Angular 2 application with asp.net core API – Part 2

The angular template from dotnet cli is using the angular v4.4.6 LTS version. So we cannot use the latest angular v.5 APIs. After creating the angular components in earlier post now we need to write each component, if you use VSCode or Visual Studio this will be easy because the editor will provide intellisense for typescript syntax. Inside todo.components.ts, create a class named TodoComponent and decorate it with @Component to indicate the class as a component also it’s selector and a templateUrl. As for the template file todo.component.html, simply put an input text and a button then hook it up with the method inside the component. See the full code below.

Angular Component

Do the same thing with todoitem.component.ts, only for this one we need to add an Angular ActivatedRoute as dependency in it’s constructor. We need the angular ActivatedRoute to be able to read the route parameter, in this component the parameter is [id]. The parameter was registered when we declare a router inside app.shared.module.ts, this file is responsible for registering all components, services and modules that will be used in our angular clientapp(generated  by dotnet cli). Here is the snipped code for todoitem.component.ts and app.shares.module.ts

Inside each components you will see that i also create an interface as a datatype for each component, the purpose is for us to have a typed reference when creating an object or variable or etc. Note that this is why we use TypeScript instead of JavaScript, to help developer by providing a typed structure while developing angular application.

Angular Service

Both components also depend on a service class called TodoService, in angular, services are a great way to share information among classes (components) that don’t know each other. Before creating TodoService class, make a folder called service inside ClientApp/app/components/ then create a file Todo.service.ts inside it.

Dont forget to register todoservice inside app.shared.module.ts, put it in a providers[] decoration (see app.shared.module.ts code above).

And that’s it the app is ready and can be tested on your local machine.

Source Code

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s