Angularjs2.0 Five-minute introductory tutorial version of Typescript

Do not seem to see a Chinese explanation ng2 introductory five-minute tutorial, so personally organized the next step of the entire introductory tutorial, I hope to learn from the later help. PS: I am in the Win7 yards. Create a new project directory, and all of the following are done in this directory. 1. Install TSD compile typescript Code command tool

$ NPM install-g [email protected]^0.6.0

2. Installing Angular2,es6-promiserx,rx,rx-lite

$ TSD Install angular2 es6-promise Rx Rx-lite

Note that the network error may be reported here, you need to flip the wall you know 3. Create a new two empty fileApp.ts index.html 4. Install the typescript compiler, you need to compile the typescript code into JavaScript code that the browser can recognize

$ NPM install-g [email Protected]^1.5.0-beta

5. Monitor the typescript file in real time, and perform automatic compilation after detecting changes

$ TSC--watch-m commonjs-t es5--emitdecoratormetadata app.ts

The above is the official website to give the code, I do encounter the following error, prompt error ts6064:option ' experimentaldecorators ' must also is specified when Option ' Emitdecoratormetadata ' is sepecified This tip we also need to configure experimentaldecorators, so we need to modify the following command to execute

$ TSC- -watch -m commonjs -t es5 --Emitdecoratormetadata- - Experimentaldecorators app. TS

6. Introduction of angular in App.ts

<reference path= "Typings/angular2/angular2.d.ts"/>import {Component, View, bootstrap} from ' angular2/ Angular2 ';

7. in the App.ts Defining a component

Annotation section@component ({selector: ' My-app '//defines a custom label that corresponds to <my-app></my-app> in HTML;}) @View ({ Template: ' 
　　
8.in the App.tsuse the bootstrap () method to pass in the Myappcomponent component we defined above as a parameter so that we can render the component content to the page
Bootstrap (myappcomponent);
 9. Go back to the index.html page and paste the following code in. 
<!--index.html-->
System.js This is an open source third-party library, to the browser extension Add ES6 module loaded, so you see the code above the System.import (' app ') This line of code, popularly speaking is loaded app.ts compiled generated app.js.
System is a Third-party open-source library this adds ES6 module loading functionality to browsers.
10. The final step is to run, you can install http-server according to the following code, you can also use your own other server configuration such as IIS--!
# from the directory that contains index.html:npm install-g http-server  # Or sudo npm install-g http-serverhttp-serv Er                 # Creates a server at localhost:8080# in a browser, visit localhost:8080/index.html
Run Http-server under Project root to see an interface similar to the following, my port 8080 is occupied so it becomes automatically allocated 8082 and then access localhost:8082 you can see the final effect. Original English link address: https://angular.io/docs/js/latest/quickstart.html
Angularjs2.0 Five-minute introductory tutorial version of Typescript