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

Published by Gadael Sedubun


One thought on “Angular 2 application with core API

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: