Angular2 's five-minute introductory implementation under Windows

Angular2 's five-minute introductory implementation under Windows

The official website provides the steps in the Linux, and actually directly take these steps under Windows can also be implemented, but the only thing is not --watch typescript file, that is the tear, change the code will be recompiled, who can bear.

Then I'll try to build it using gulp directly.

First, create the project

Although ANGULAR2 allows us to use typescript, Dart, ES5, ES6 to write code, but Angular2 also embrace typescript, then our only best choice is typescript.

First create an empty folder and then install the ANGULAR2 package via TSD (see my previous article in TSD).

tsd install angular2 es6-promise rx rx-lite

Then create App.ts and index.html two empty files respectively.

Second, TSC compiler typescript

tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts

This is the official website to provide the command, meaning that the use of tsc.exe App.ts compiled into the ES5 standard JavaScript, where –watch is the key, he can directly listen to the app.ts, one but app.ts change immediately recompile.

It is this step that cannot be monitored under Windows. So here I try to compile the typescript code with gulp.

Third, Gulp compiled typescript

First we change the previously created two file storage path, create a new SRC folder to hold all the *.ts files.

Next, you need to install the corresponding node component, using Gulp-typescript to compile the typescript code.

npm install --save-dev gulp gulp-typescript

Finally, our overall directory structure looks like this:

ng2├─dist├─node_modules├─src    └─app.ts├─typings    ├─angular2    ├─es6-promise    └─rx├─gulpfile.js├─index.html├─package.json└─tsd.json

The final point is gulpfile.js configuration, where I write two gulp tasks, one is compiling, one is listening.

Var Gulp=Require(' Gulp ')Ts=Require(' Gulp-typescript ');Compiling Task Gulp.Task(' Default ',function(){var Tsresult= Gulp.Src(' Src/*.ts ').Pipe(Ts({Noimplicitany:True, module:' Commonjs ', Target:' ES5 'Output by ES5 Standard}));Return Tsresult. js.Pipe(Gulp.Dest(' dist/'));});Monitoring Task Gulp.Task ( ' watch ' [ ' default ' ]function ( {gulp.watch ( ' src/*.ts ' [ ' default ' 

In this way, we can run the gulp directly with gulp watch the command, but once we have any changes to our SRC folder, we will recompile it immediately and output the result in the Dist folder with the App.js name.

Iv. Import of angular

The ANGULAR2 package is quoted in App.ts, and this reference can also play a smart reminder of angular2 in vs.

/// <reference path="../typings/angular2/angular2.d.ts" />

Note : It seems that the path here cannot be used/to represent the root directory, only. /In the form of a little check.

Import the core modules of the ANGULAR2.

import { Component, View, bootstrap } from ‘angular2/angular2‘;

Assuming that the code is in VS, then you will also find that on the Component press F12 can jump directly to his file, not the loss is and m$ cooperation, so if the development of NG2 in VS, the experience will not have to say more.

V. Define a component

In NG2, the component-based structure is used to represent the UI, and the following is the creation of a complete <my-app> component.

Annotation section@Component({Selector:' My-app '})@View({template:  "
}) //Component controllerclass  Myappcomponent {name: String; constructor ({this.name =  ' Alice ' ; }}        /span>              

If you don't have typescript knowledge at all, look at the real-time headache.

A ANGULAR2 component consists of two parts, a ES6 class that represents the controller of the component (known as the angular1.x experience, which is used for the component controller), and an annotated way to tell the component where and what content should be placed on the page. It's kind of like a reactjs, you know.

@Component and @View annotations

In the Angular2 there will be a large number of annotations using typescript, but also a new function of TypeScript1.5, it is to append additional data to the class, equivalent to the configuration metadata, take the above, it will be the @Component interface of a DOM element Selector association, To make it easy for angular to know where the results should be inserted? People familiar with 1.x know that when inserting a component into a page It also generates a comment code, which is not in 2.x.

In addition, the annotations may also appear in the ES7 standard. Under the VS IDE is allowed to be IntelliSense, developed to leverage.

Liu, Bootstrap

In the 1.x we start a angular program in two ways ng-app="" and angular.bootstrap() , in 2.x, only use the latter. At the bottom of the app.ts we add:

bootstrap(MyAppComponent);

VII. Define HTML

<!--index.html-->><title>angular 2 Quickstart</title><script SRC="Https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script><script SRC="Https://jspm.io/system@0.16.js"></script><script SRC="Https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>><body><!--the app component created in App.ts--<my-app></my-app> < Span class= "token tag" ><script>systemimport ( ' Dist/app ' ; </script></body > >          

Traceur-runtime.js and Angular2.dev.js are referenced, the former is the ES6 compiler, the latter is the angular core package, and System.js is a universal module loader (like Require.js).

Eight, run

An HTTP service is required to run our angular2. npm install -g http-serverthe installation is directly used here, and finally:

http-server

Visit http://localhost:8080/in the browser to see:

Well, for, if you want to run correctly, you also need to open a VPN, because the library referenced above is directly foreign. @#￥%......&* () ......

This is my complete code, download and follow the 8th step installation http-server run.

Angular2 's five-minute introductory implementation under Windows