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.
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.
That’s it for now, i’ll continue explain how the angular components work in the next article. Stay tuned…