In our previous post we have overview .NET Core 1.0 with MVC & dependency Injection in .Net Core 1.0 empty template. In this post we are going to add Angular2 to our application.
ANGULAR2
Now we know how to install .Net Core, Enable MVC, Including .Net libraries, know about different json files, and also know how to run task & manage package in client side dependencies.
Our main purpose of this part is integrating AngularJS2 in our application. So let’s get started.
Open existing application with visual Studio 2015. We will follow those listed steps below.
- Update package.json
- Update gulp.json
- Update Startup.cs file for serving static files.
- Add tsConfig.json for typescript.
- Add bootstrap & component file for AngularJS2
- Modify _layout.cshtml to include references
- Change index page
This is all we have to do now.
First let’s just add packages
As you can see there are two different type object, one is dependencies that used for production purpose & other one is devDependencies for development related, Like gulp is to run different task.
In dependencies section we have added AngularJS2 with updated version. We can see others dependencies are also listed.
- Es6-shim : is a library, provides compatibility on old environment.
- Rxjs : provide more modular file structure in a variety of formats.
- SystemJS : enables System.import TypeScript files directly.
Click save, it will restore automatically.
Now let’s add a gulp configuration file to run task. Click Add > New Item > Client-Side then select gulp json file to include.
Modify the gulp config file
Run task by reload > right click > Run
Files copied successfully to wwwroot folder.
Let’s modify startup file
This will serve the static files on request.
TypeScript:
- noImplicitAny : Raise error on expressions and declarations with an implied ‘any’ type.
- noEmitOnError : Do not emit outputs if any errors were reported.
- Target : Specify ECMAScript target version: ‘es3’ (default), ‘es5’, or ‘es6’.
- experimentalDecorators : Enables experimental support for ES7 decorators.
Get more details on Compiler option here.
Bootstrapping
Component: imports the Component function from Angular 2 library, use of import, appcomponent class can be imported from other component.
As you can see the both file in app folder need to reference in the implementation pages.
MVC View:
Index page
Finally the welcome message is appear.
Source Code: I’ve uploaded the full source code to download/clone , Hope this will help 🙂
