SPA Using Angular 2, ASP.NET Core 1.1 And Entity Framework Core - Part One

Introduction

This is the first part of this series. In this series, we will create a SPA Application, using Angular 2, ASP.NET Core 1.1 and Entity Framework Core. Here, we use Angular 2 as UI for the Application, using ASP.NET Core MVC. We will perform Server side tasks and using Entity Framework Core, we will perform all the database level operations. In this series, we create an Employee Management system project. In this management system, we provide features to see the list of all employees, edit the existing employee, delete any particular employee and enter a new employee. Let’s go through the agenda of this series.

Agenda

• Setup development environment for Angular 2.
• Understand the structure of an Application.
• Add Entity Framework in project.
• Create new pages to see the Employee List and also for Insert, Update and Delete operations.
• Perform Angular 2 routing.
• Add Services.

Prerequisites

There some minimum configuration, which must be configured in your system before staring the work on this series.

• Visual Studio 2015 Update 3 or Visual Studio 2017.
• .NET Core 1.0.
• Type Script 2.0.
• js Version 6 or later.

After meeting all the above requirements, now we can setup SPA Application in some simple steps.

Getting started

The easiest way to get started is by using one of the project templates, which are made available. These plug into the standard dotnet new command and work on Windows, Mac in addition to Linux. To install the (Single Page Application)SPA templates, open the command prompt and run the command given below.

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

The command given above takes some time and installs several templates for SPA like Angular, Knockout.js, React etc. The benefit of all these templates are that we don’t need to worry about the whole setup process.

To generate a new project, create an empty folder and name this project as EMS here. EMS is an abbreviation for Employee Management System. After creating an empty folder, now change the directory and go to this project. Now, run the command dotnet new angular.

This command creates a template project for Angular 2 Application. Now, run “dotnet restore” commanpm nd. This command builds MSBuild file and restore all .NET dependencies.

After installing all the .NET dependencies, now we install Node.js dependencies. Run “npm install” command. This command takes couples of minutes to install the required Node.js dependencies.

After creating the template project and installing all the required dependencies, now run “start EMS.csproj” command. This command will open your project in Visual Studio. Here, I am using Visual Studio 2017.

Now, press Ctrl + F5 and run the project.

After running the project, if you get the above screen, then Congrats, as you successfully created Angular 2 Application. If you make any changes either in “.ts” files or “.html” file, you will get the live update as soon as you save the changes and don’t need to refresh the Browser.

Structure of the Application

After creating and running the Application successfully, let’s understand the structure of the project. Now, open Solution Explorer Window and you will find the project structure given below.

Following are the major parts of our Application.

Dependencies

This section contains three types of the dependencies and npm dependencies are related to our Client Application. NuGet contains .NET Core level dependencies. SDK section contains system level dependencies.

launchSettings.json

This JSON file holds the project specific settings, which are associated with each debug profile, Visual Studio is configured to launch the Application, including any environment variables, which should be used. This file defines ApplicationURL, SSL port number and mode of authentication.

wwwroot

wwwroot section contains the “dist” folder. Here, dist folder contains the compiled code of our ClinetApp. All the code, which we write in template(.ts) or .html pages converts into a compiled code and save in a main-client.js file. This file contains the compiled form of all the components, Service and all other resources, which we create in our ClientApp folder.

If you go to Index.cshtml view of Home controller, you fill find that we referenced the main-client.js file in Application startup process.

ClientApp

This is client section of our project. Here, we write all Angular2 related code. Create component and Services. App folder contains components and app.module.ts file. The boot-client.ts file defines the root component selector.

Controllers

In this section, we create MVC Controllers. In this project, we will use controller to get the data from the database.

Views

It defines V part of the MVC project, I think, we are already aware of Views.

Appsettings.json

Instead of web.config, all your settings are now located in appsettings.json. It contains all the configuration information in form of key-value pair. In this file, we define connection string and other Application level settings.

Packages.json

This file contains all Angular2 related dependencies.

Program.cs

This is the entry point of the Application and is used to host the Application. In this file, we simply do the job of configuring & launching a host, using WebHostBuilder

Startup.cs

Startup.cs file works like a middleware and provide all the Services, which system requires to run.

tsconfig.cs

This file contains TypeScript configuration settings.

Webpack.config.js

Webpack works like a Package Manger and module bundler. It takes all the project modules with dependencies and generates the static assets, which represents these modules. Webpack and build and bundle CSS, JavaScript file, images all other static contents.

Configure Entity Framework

Now, we use Code First approach and create the database and tables. In our Application, we will use SQL Server for the database, so we need to install Entity Framework for SQL Server. To configure Entity Framework for SQL Server, we need to add SQL Server database provider.

Open Package Manager Console and run the command given below.

“Install-Package Microsoft.EntityFrameworkCore.SqlServer”

We will be using some Entity Framework tools to maintain the database. Thus, we need to install the tools packages as well. Hence, run the command given below to add all the required tools.

“Install-Package Microsoft.EntityFrameworkCore.Tools”

Create Entity classes

After adding the dependencies for Entity Framework, let’s create Employee and Project entity class. There will be a many to one relationship between Employee and Project entity. This means one employee can have only one project at a time but there can be more than one employees in a single project. Create a Model folder and add an Employee class in this folder.

Employee Entity

Add an Employee class in Models folder and replace the code of Employee class with the code given below.

In the code given above, EmployeeId property is a primary key for an Employee entity and it is also an identity type. The ProjectId is foreign key and corresponding navigation property is Project.

Project Entity

Now, add another class in Model folder and name this class Project, and replace the code of this class with the code given below.

The ProjectId property is a primary key for this entity and other properties defines the information about the project.

Add DbContext Class:

The main class of any Entity Framework structure is DbCntext class. In this class, we define all the entities, which are used to create the table in the database. Now, add another class in Model folder and name it as EmployeeContext. This class will be derived from System.Data.Entity.DbContext class. Replace the code of this class with the code given below.

In the code given above, we defined two Dbset properties for Employee and Project class. This property will create two tables in the database and name will be same, as defined in Dbset property.

Register Context with dependency Injection

After creating all entitities and dbContext classes, now we add a Service for Entity Framework such that any component requires this Service, which can be provided by constructor. In our controller constructor, we use this Service to get the context instance. Now, open startup.cs and add the code given below to ConfigureServices method.

services.AddDbContext<EmployeeContext>(options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

In the code given above, we register a Service for DbContext. Here, DefaultConnection provides the connection string, which is defined in our appsettings.json. Now, open your appsettings.json” file and add the code given below. Replace the Server name with your SQL Server name.

Add Migration and create a database

After configuring dbContext and entity classes now we add the migration and using the “Update-Database” command we will create our project database. First, we add the migration to open your “Package Manager Console”. Run “Add-Migration firstMigration” command. This command will add the Migrations folder in your project and first file in Migrations folder contains all the information on how to create your database.

Now, we will run Update-Database command. This command takes codes, which are available in migration class and updates your database. In our case this command create an “Employee” database in SQL Server, which contains all the table and properties, which we defined earlier in our model classes.

Now, open your SQL Server and you will find that Employee database has been added.

Add initial data

Now, our tables and database are ready. Let’s add some initial data into our tables.

Add data into Project Table

AdddData into an Employee Table

Now, our database and an Application setup is ready. Let’s start work with View section of an Application.

Show Employee List

Now, go to “app.modules.ts” file in “App” folder. In this file, you find that some default routes are defined like counter, home and fetch-data. We don’t need all these routes, so remove counter and fetch-data routes from routing table and also delete these components from components section. After all these changes, now go to navmenu.component.html file, remove Counter and Fetch Data items from the navmenu.component.html.

After all the changes given above, now our Application looks, as shown below.

Now, we add some components, which are required in this project.

Employee Detail Component

Now, we add the details component and using this component, we will display the details of an employee.

Right click on components folder, add a new folder and name this folder as details. This folder contains the content for the employee details component. Now, add a TypeScript file in this folder and name this file as details.component.ts and paste the code, as given below.

Now, we need to add template file for this component fo which we are require to right click on details folder and an HTML file and name this file as details.component.html and paste the code given below.