Angular 2 application with core API

To develop web application with Angular 2 and ASP .NET Core API we can use a builtin template that’s provide from the dotnet CLI (command line interface) by typing dotnet new angular but before you do that you need to make a new folder where you’ll put all your project files. Don’t forget to run npm install inside your project folder after you have successfully create the project.

dotnet new angular
dotnet new angular
npm install
npm install

After that you can open VSCode (or your favorite code editor) and start working. Create a new .cs file inside Controllers folder and call it TodoController.cs. we’re going to make an EntityFramework Core DbContext file and use InMemory data provider, so for that we need to make a model class and dbcontext class then register the dbcontext in Startup.cs file. The Model class and repository class that were use to access the database are put into one file called TodoRepository.cs inside Models directory.

Now lets change the TodoController.cs files to do simple CRUD operations on Todo object. To make things easier we’re going to leverage a simple Repository Pattern that we define in TodoRepository file, with a built in dependency injection that provided by ASP.NET Core all that we need is to put a parameter in the controller’s constructor. This parameter is of type TodoRepository, beacuse we already register the type as Scoped lifetime services in our Startup file. TodoController will provide basic CRUD operation on Todo and TodoItem table, we need to provide every action (method) a unique name and put Route() attribute on each method. These methods are: Index, GetItem(int todoId), Get(int id), AddItem(int id, TodoItem todoItem), AddTodo(Todo todo) you may see the file here. Now we can test the controller by running the project and go to /api/Todo/Index.

Since we are using an angular template that created from dotnet cli, then we can’t use the angular cli and its commands to generate components or services because the folders structures were different than the ones generated template by angular cli. So we have to manually create the the folders and files inside the ClientApp directory. For this demo purpose, lets create a new component, before that we need to create two folders inside clientapp/app/components called those todo and todoitem. Then create two files inside each of those folder; todo.component.html and todo.component.ts, todoitem.component.html and todoitem.component.ts. each component has it’s own html file and typescript file where we declare the component’s class and functions.

angular components file
angular components file

That’s it for now, i’ll continue explain how the angular components work in the next article. Stay tuned…

Source Code


Satu tanggapan untuk “Angular 2 application with core API

Tinggalkan Balasan

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


You are commenting using your 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