Angular 2. What is it? How can I use it with Visual Studio 2015?
Angular 2 is a renovated framework for Single-Page Applications (SPA) development. Developed in TypeScript, it is the clear evolution of AngularJS 1, and as such, still using a functional architecture similar to its predecessor.
Some concepts have been left behind like controllers and scope, among many other aspects that have been replaced by simple classes, and a metadata system has been implemented to define how Angular will process each of the classes.
A simple Angular 2 class example:
This creates a Component that Angular will inject to the HTML by placing the tag
In this article I will explain how to configure VS2015 to use Angular2.
Creating an Angular2 project in VS2015
The following steps are based on «5 min Quickstart» (https://angular.io/docs/ts/latest/quickstart.html) and “Angular2 with TypeScript using Visual Studio 2015” http://www.codeproject.com/Articles/1070022/Angular-with-TypeScript-using-Visual-Studio.
First you need to install ASP.NET 5 RC1 (https://download.microsoft.com/download/B/0/A/B0AEBD7D-6979-4265-B1AC-A0B73618FB22/AspNet5.ENU.RC1_Update1.exe).
Once installed, open VS2015 and create an ASP.NET Web Application project. I named it Angular2Weather.
Then we have to choose what kind of template we want. In our case, we have to choose the Empty option in ASP.NET 5 Templates category.
Once we have the solution created, we need to add a new dependency to be able to use our static files like HTML, CSS, JavaScript… To do this, open the file project.son and change the dependencies keys to:
"dependencies": {
"Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final",
"Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final",
"Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final"
},
We also need to change the Configure method of Startup.cs file:
public void Configure(IApplicationBuilder app)
{
app.UseDefaultFiles();
app.UseStaticFiles();
}
Now we need to download Angular 2 and all of its dependencies. Go to our project and add a new Client-side NPM Configuration File with the name package.json.
Within this file put the following code:
{
"name": "Angular2Weather",
"version": "1.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.2",
"typescript": "^1.7.5",
"gulp": "^3.9.0",
"del": "^2.1.0"
}
}
It will start to download the necessary files from NPM. Once completed, we will create a new client-side file of type TypeScript JSON Configuration File with the name tsconfig.json, and the following content:
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "wwwroot/app"
},
"exclude": [
"node_modules"
]
}
This is the TypeScript compiler configuration compatible with Angular 2.
Then, we will create another client-side file, this time inside the /wwwroot folder. The file type will be HTML Page and his name index.html.
Now the solution should look like this:
The next step, is to copy the necessary .js files downloaded from NPM to the /wwwroot directory. To do this we will create a new client-side file Gulp Configuration File with the name: gulpfile.js. Gulp is a system that allows you to run scripts to do automatic tasks such as copy files, minify javascript, etc. This file should contain:
/// <binding BeforeBuild='build' Clean='clean' />
const gulp = require('gulp');
const del = require('del');
gulp.task('clean', function () {
return del('wwwroot/scripts/**/*');
});
gulp.task('compile:deps', ['clean'], function () {
return gulp.src([
'node_modules/es6-shim/es6-shim.min.js',
'node_modules/angular2/bundles/angular2-polyfills.js',
'node_modules/angular2/bundles/angular2.dev.js',
'node_modules/rxjs/bundles/Rx.js',
'node_modules/systemjs/dist/system.js',
'node_modules/systemjs/dist/system-polyfills.js',
]).pipe(gulp.dest('wwwroot/scripts/angular2'));
});
gulp.task('build', ['compile:deps']);
As you can see on the first line, this script will execute the build task before compiling the project and when we do a project clean it will delete all content inside /wwwroot/scripts.
Now let’s make a rebuild of the solution and all JS needed will appear in /wwwroot/scripts.
Then open index.html and insert the following content:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/angular2/es6-shim.min.js"></script>
<script src="scripts/angular2/system-polyfills.js"></script>
<script src="scripts/angular2/angular2-polyfills.js"></script>
<script src="scripts/angular2/system.js"></script>
<script src="scripts/angular2/rx.js"></script>
<script src="scripts/angular2/angular2.dev.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
System.config is the configuration method of SystemJS, in our case, packages allows us to define how it should resolve a petition of a module that is inside the folder /app.
Now we are going to create the component
Create the /app folder in /wwwroot. Inside /wwwroot/app create two new files, app.component.ts and main.ts.
The app.component.ts file content should be the following:
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
And the main.ts, which is responsible for loading the needed platform components where the instance will run. We must bear in mind that Angular 2 is compatible with Apache Cordova or NativeScripts, which means not only is used to develop web pages for desktop browsers.
The content of main.ts will be:
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
Run the solution and we should see this:
Conclusion
Angular 2 is still in beta, but it should not change too much until the final version comes out. Also you can follow the changes of each version here: https://github.com/angular/angular/blob/master/CHANGELOG.md
The next article will teach you how to start developing a real application in Angular 2. I recommend you to read the developer guides of Angular 2 which can be found at: https://angular.io/docs/ts/latest/guide/