Ablikim's Blog

Microsoft built ASP.NET core to make modern application development easier and efficient. ASP.NET core makes it possible to build and deploy .NET based server web applications across any of the major platforms available.

On the other hand, front-end web is evolving very rapidly. The tooling to build front-end applications is getting matured to meet the developers’ needs. This brings up a challenge to the server platforms to support the front-end ecosystem inside their boundaries.

Are you keeping up with new developer technologies? Advance your IT career with our Free Developer magazines covering Angular, React, .NET Core, MVC, Azure and more. Subscribe to this magazine for FREE and download all previous, current and upcoming editions.

The ASP.NET team has built Angular and React templates to support development of front-end based applications with ASP.NET core as the backend.

The Angular team built Angular CLI to address the difficulties that developers face while setting up the environment to build a sophisticated web application. It reduces the time and effort required to generate a new Angular application. Using the commands it provides, one can generate an application, generate different code blocks of Angular, add unit test spec files, run tests, run the applications in development mode and generate build files to deploy the application.

These features are hard to recreate. Anyone would love to have these features while working on Angular.

So, the ASP.NET team released a new template by including Angular CLI. This template is still in RC at the time of this writing and is expected to be ready for production in a few months.

This tutorial will show you how to create a simple CRUD based application using the ASP.NET core Angular template.

Angular App with ASP.NET Core Angular CLI Template - System Setup

To follow along with this article and build the sample, your system should have the following software installed:

- Visual Studio 2017

- .NET core 2.0 or above

- Node.js

- Angular CLI: To be installed as a global npm package using the following command

Angular CLI is installed using npm, so the system should have Node.js installed before the npm command is executed.

The ASP.NET core Angular template to be used in this article is still a release candidate (RC) and it is not available on Visual Studio’s template dialog box. The template has to be installed using the following command:

Once these installations are complete, you can start using the new template to build applications.

Understanding the Application Structure

We are going to build a video tracker application. Using this application, one can enter his or her favorite set of videos with their links and can watch the video by clicking the link whenever he or she wants to watch it.

At first, we need to get this project generated using the template. Open a command prompt, go to the folder where you want to place your code and run the following command:

This command will generate the web application containing ASP.NET core and Angular. The code gets added to a new folder named VideoTracker. This folder contains the VideoTracker.csproj file, open the project in Visual Studio 2017 using this file.

The folder structure is shown in Figure 1.

Figure 1 – Folder Structure

The following listing describes the files and folders in the above screenshot:

• ClientApp folder contains the Angular CLI based front end application
• Controllers folder contains a sample controller with an API endpoint
• The file appsettings.json contains some settings used by the ASP.NET core application
• The Program.cs file has the Main method to start the application
• The Startup.cs file sets up the services and middlewares for the ASP.NET core application

The following screenshot shows structure of the ClientApp folder:

Figure 2 – Structure of ClientApp folder

If you are familiar with the files generated by Angular CLI, most of the files in Figure 2 would look familiar to you. If not, read the Angular CLI introduction article to understand the structure.

The src folder contains the front-end code that gets rendered on the browser. To build the Video Tracker application, we will modify the files inside the src folder.

The following listing describes the vital parts of the src folder:

- The file main.ts bootstraps the application

- The file app.module.ts defines the Angular module of the application and configures the routes. The following snippet shows the modules imported and the route configuration added to AppModule:

Notice the BrowserModule in the imports array. Call to the method withServerTransition is made to support server-side rendering of the Angular application. The application has three routes configured.

- The AppComponent in the file app.component.ts contains the router-outlet component, which is the placeholder to display the routes. It uses the NavMenuComponent to show the menu items that help to navigate between the routes.

- The components supplied to the routes carry out simple tasks. The HomeComponent has a static HTML template displaying some information about ASP.NET core, Angular, Bootstrap and the template. The CounterComponent has a basic data binding example. The FetchDataComponent makes a call to the sample API added in the project and displays the result in a table.

To run any Angular CLI commands to generate the new angular code files, you can open a command prompt in the ClientApp folder and run the command there. This will be covered later in this article.

The Startup.cs file contains the configuration to start the client application from the ClientApp folder. To run the application in development mode, it uses the “npm start” script configured in the client application. The “npm start” script uses the “ng serve” command in turn to start the Angular application in development mode. The following snippet in the Configure method does this:

While running the application in production mode, it takes the static files from ClientApp/dist folder. This is because the Angular CLI spits out the bundled static files inside this folder. The following snippet in the ConfigureServices method of the Startup class does this:

Build the project using Build menu or by pressing Ctrl+Shift+B. This will take a couple of minutes, as it is going to install the npm packages added to the Angular application. Once the build completes, run it using Ctrl+F5. You will see a bootstrap based Angular application loaded in the browser.

Figure 3 – Running instance of generated application

As you see, the generated application has three pages. They are registered as Angular routes. The Counter page shows how data binding works in Angular with a number incrementing on click of a button. And the Fetch Data page calls the sample API in the application to fetch some data and displays it in a table.

Adding Database and Building API

Now that we understood the structure and the way the application works, let’s modify it to build the video tracker. Let’s get the database and the API ready to serve the data. We will create the database using Entity Framework Core.

Add a folder named Model to the project. Add a new C# class file to this folder and name it Video.cs. Change contents of the file as follows:

Add another file to the Model folder and name it VideoTrackerContext. This class will be the DbContext class for the database we are going to create. Open this file and replace it with the following code:

Open the file appsettings.json and add the following connection string to it:

The DbContext class has to be registered in the services of the application. To do so, add the following snippet to the ConfigureServices method of the Startup class:

Now we have the connection string, model class and the context class ready.

To create the database and seed some data into it, we need to add EF Core migrations. Migrations need a context factory class. Add a new C# class to the Model folder and name it VideoContextFactory.cs. Place the following code inside this file:

To access the database created, we need Microsoft.EntityFrameworkCore.Tools package and need to run migration commands in the package manager console. Open the Package Manager Console in Visual Studio and run the following commands in the given order:

Once these commands are successful, you will have access to the database and the table created. You can see the database in the SQL Server Object Explorer. It will have the Videos table created with the five columns as specified in the Video class earlier.

Let’s add some data to this table, so that we can see the data in response to the APIs.

Add a new file to the Model folder and name it Seed.cs. Add the following code to it:

The Initialize method of the Seed class has to be called as soon as the application starts. Modify the Main method in the Program.cs file as follows:

If you run the application after saving the above changes, the data would be inserted to the Videos table.

As the database is ready with some data, let’s add the API. Right click on the Controllers folder and choose Add > Controller. From the menu, choose API Controller with actions using Entity Framework.

Figure 4 – Add control dialog

Click on the add button after choosing the option. This will show another prompt asking for the details of the model and the context class. Change the values as follows:

Figure 5 – Controller with actions dialog

Once you hit the add button, it will create the ValuesController performing CRUD operations on the Videos table. We don’t need to make any changes to this file, we can use it as is. Run the application and change the URL in the browser to http://localhost:<port-no>/api/Videos. This will display the set of videos added to the table. See Figure 6.

Figure 6 – Output of the videos API

Building Video Tracker Client App

As stated earlier, we need to modify the ClientApp/src folder to build the client part of the application. The application needs two views, one to display the list of videos and the other to add a new video. The Angular components required for these views can be generated using the Angular CLI commands. Open a command prompt and move to the ClientApp folder. Run the following commands to get the components generated:

Angular CLI provides shorter versions of these commands to ease the usage. The command to generate the video-list component can be replaced with the following:

These commands add components with their basic skeleton and register them in the AppModule. These components have to be registered as routes, so that we can access them as Angular views.

As we will be using these components going forward, it is better to remove the components that were added by the template. Open the file app.module.ts and change the code in the file as shown in the following snippet:

Now this file is free from the components added by the template and it registers the new components in the routes.

The navigation menu still points to the old routes. Let’s change it to use the new routes there. Open the file nav-menu.component.html and change the code of this file as follows:

Save these changes and run the application. You will see the new menu items in the menu bar as shown in Figure 7:

Figure 7 – Application with new menu items

Before modifying the components to show the new views, let’s create a service to interact with the backend. The reason behind creating a service to perform the data operations is to keep the components focused on building data required for its view alone. Also, as the service would be available to all the components in the application, anyone can use it without having to repeat the logic. Run the following command to generate the service:

This command adds the VideosService and registers in the AppModule. This service will interact with the web APIs created in the VideosController. Open the newly added file videos.service.ts and modify the code in this file as shown below:

The videos-list component will use the getVideos method to fetch the videos and show them in a table. It needs to update the watched property of the video when link of a video is clicked. It is better to write a method in the component to perform both these tasks. To open the link programmatically, the window object has to be used.

The application will be hard to test if the window object is used from global scope. Even if we are not going to use unit testing in this article, it is always good to use a better way to access the global objects. For this, we need to create a token using InjectionToken to register the object and inject it using the token. Add a new file to the src folder and name it window.ts. Add the following code to it:

The object windowProvider can be used to register the injectable. Open the file app.module.ts and import the windowProvider object.

Modify the providers array of the module metadata as shown in the following snippet to register the token:

Now we have all the objects ready to be used in the components. Open the file video-list.component.ts and modify the code as shown below:

Notice the way the window object is injected in the above component. It Is injected using the Inject decorator and the token is passed into the decorator.

The template has to be modified to display the data in the table. Place the following code in the file video-list.component.html:

Save these files and run the application. Figure 8 shows the home page displaying a list of videos.

Figure 8 – Video tracker with videos list

Let’s get the add-video component ready to add new videos to the application. Open the file add-video.component.ts and replace it with the following code:

The last thing to do is to modify the template of the add-video component to add a form. The form will have basic required field validations to ensure that the fields have values when the form is submitted.

Place the following code in the file add-video.component.html:

Now the application is complete. Run it and you can add a new video. And then you can see it in the video list page.

Conclusion

As we saw, ASP.NET core now has good support for Angular development using Angular CLI. The template doesn’t try to hide any of the features of Angular CLI and provides a good support for building and deploying Angular applications with ASP.NET core. We can use this template to build and deploy dynamic web applications using the goodness of both the technologies.

Download the entire source code from GitHub at bit.ly/dncm35-aspcorecli

This article was technically reviewed by Keerti Kotaru.