Asp.net development professionals bring this post to explain the use of Angular 2 with Asp.net MVC/ Core. You will read the overview of Angular 2 and Asp.net Core at first in this post. Read the article to find how experts use Angular 2 with MVC / Core.
Angular 2 Overview
Angular 2 is the upcoming version of MV framework used for creating high level applications in browser. It contains everything needed to create a complex mobile or web apps from a variety of templates. Angular team recently released a beta version of Angular 2. Many changes are performed by beta version of Angular 2 in comparison to the alpha version.
It is possible to use Angular 2 and MVC6 with Asp.Net Core to manage dependencies at client side with the help of Node Package Manager (NPM).
SET UP ENVIRONMENT
For using MVC6/Asp.Net Core with Angular JS, following are the required prerequisites:
1. Asp.Net Core (version 1.0)
2. Visual Studio (2015)
In case Visual Studio is already installed on the system, then update the same with Update 3, else download the same.
3. Download tools of .Net Core SDK or Download .Net Core 1.0.
OVERVIEW OF ASP.NET CORE
The main difference between the .Net framework and the .Net Core is:
1. .Net Core is cross-platform while .Net framework can run only on Windows platform.
2. .Net Core is built on .Net framework and .Net Core runtime while .Net framework is built on the framework runtime.
3. .Net Core is open source and supports dynamic compilation.
4. In .Net framework, there is separation of the Web API and the MVC Controller while in .Net Core they are unified.
5. .Net Core contains smart tooling (including Gulp, Grunt, Bower and NPM) and has an inbuilt dependency injection.
6. .Net Core has different command line tools.
Using .Net Core 1.0
1. Add a new project in Visual Studio 2015. Click on File, then open New Project and click on Asp.Net Core Web Application.
2. Choose the empty template and then click on OK. A new project of Asp.Net Core will be created.
Program.cs file
A file named as program.cs will be created in the solution explorer. Look at its code.
1. .UseKestrel()- Defines the .Net Core hosting in IIS Express and IIS.
HTTP Servers
1. Microsoft.AspNetCore.Server.WebListener (Windows-only)
2. Microsoft.AspNetCore.Server.Kestrel (cross-platform)
.UseStartUp: It helps in specifying the startup class.
.UsellSIntegration():It is used to do hosting in IIS Express and IIS.
.UseContentRoot : It is used to specify the path of the application's root directory.
.Build()-It is used to build IWebHost that will manage the incoming requests and host the app.
StartUp.cs file:
A file named as startup.cs is created in the solution Explorer. This file is the starting point for an Asp.Net application. All services required by the application are provided by this file. The startup class has two methods: first is the ConfigureServices method and second is the Configure method. The Configure method requires three parameters. The IApplicationBuilder parameter is used to configure the request of the application.
Project.json: All application dependencies of the project are listed in this file by the version and the name. It is also used to manage the compilation settings and the runtime.
Dependencies: If required, it is possible to add new dependencies to the application dependencies. On saving the changes, the dependencies of NuGet will be automatically restored.
The package can be uninstalled by doing right click on the package and then click on Uninstall Package option.
Tools: The command line tools are managed by this section. By default, IIS Integration tool is added. This tool is used to publish the application.
Frameworks: By default, the application runs on the .Net Core Platform.
Build Options: These options refers to the options that are passed to compiler when the application is build.
RuntimeOptions: These are used to handle the garbage collection.
Publish Options: These are used to define the folders/files to exclude/include from the output file.
Scripts: These scripts are used to specify the scripts that are executed while publishing or building the application.
ADD MVC6
Now include an MVC service to the application. Open the project.json file and dependencies. Add the following in dependencies section:
1. Microsoft.AspNetCore.Mvc:1.0.0.
2. Microsoft.AspNetCore.StaticFiles:1.0.0.
Click on save now. All the packages will be automatically restored. Add MVC s required in the config section in StartUp class. Also, add a framework service in the ConfigureService method.
MVC Folder Structure
Now add an MVC folder structure in the application. View files have been added in the views folder and the MVC controller has been added in the controllers folder. On adding the MVC folder structure, a new file is created in the Views folder named as "_ViewImports.cshtml". It is used to set the namespaces that are accessed by views in the application. Earlier Web.Config does the same job.
Now add a welcome message in the view. Run the application. The message will appear on the page.
Adding Angular JS 2 In the Application:
AngularJS2 is a new Client side Javascript framework that is based on the TypeScript.
To install Angular2 in the project, following steps are used:
1. Client based Dependencies: A config file of JSON needs to be added in the application for NPM(Node package Manager). Add a new client side item of type NPM Configuration File and click on OK. Modify the settings in the NPM Config file as required.
2. Add AngukarJS2 along with the other dependencies in the dependencies section. There will be two types of objects: first is the dependencies used for production purpose and second is the devDependencies used for things related to development such as gulp. Now click on save button. Add another Client side package manager file called the Bower Configuration file.
Comparison of Bower and NPM
1. Bower helps in managing css, html and js files while NPM manages the NodeJS module.
2. Bower loads the minimal resources while NPM loads the nested dependencies.
3. Flat dependencies are loaded with Bower. NPM installs the dependencies recursively.
Add the needed dependencies in the Web.Config file.
Lastly, add the configuration file of gulp to execute the task. Build the application and run it.
Professionals of asp.net Development Company have shared this article to brief you about Angular 2 and Asp.net Core. They have also explained how to use Angular 2 with asp.net MVC/Core. If you need to ask anything related
