Angular2.0快速开始
目前Angular2.0開發(fā)者預覽版已經(jīng)發(fā)布，和Angular1.x相比，發(fā)生了很多顛覆性的變化，隨后Angular2團隊在官網(wǎng)上給出了一個5分鐘快速開始的教程，用于編寫一個hello world級別的ng2的web應用，但是由于其中涉及到的新東西比較多，變化較大，僅僅是搭建環(huán)境并運行這個環(huán)節(jié)就不是那么容易掌握，本文就是以Angular2官方的quickstart教程為基礎，講解如何搭建本地運行環(huán)境并編寫一個hello world的ng2應用。
首先，關于Angular2.0是什么以及有什么新特性，這里不做贅述，只進行淺顯的陳述意義不大，隨后我會寫一系列Angular2的文章來詳述這個話題，本文要做的是讓大家快速在本地搭建Angular2的開發(fā)環(huán)境并編寫應用。
步驟一：通過git clone Angular2.0官方的一個hello world種子項目
首先在本地創(chuàng)建一個文件夾，叫做ng2
mkdir ng2 cd ng2在這個文件夾中git clone
git clone https://github.com/angular/quickstart.git hello2ng2這時候就會將這個種子項目克隆到本地
在這個項目中，包含了如下的一些庫：
1）能夠編譯為ES5的Angular2的庫；
2）能夠編譯為ES5的rtts_assert庫，這個庫主要是一個JS運行時的類型斷言庫，它主要用在Traceur中，Traceur用來將ES6代碼轉化為瀏覽器或者Node可以理解的ES5代碼；
3）ES6的shim庫，Angular是為下一代web應用開發(fā)而設計的，所以它的內部腳本語言是使用ES6，但是由于目前各種環(huán)境（瀏覽器或Node）暫不支持ES6的代碼，所以需要一些shim機制讓ES6寫的代碼能夠轉化為ES5形式并可以正常運行在瀏覽器中，在這個項目中，這些庫包括Traceur（能夠將ES6轉化為ES5的編譯器），ES6的模塊加載器，SystemJs(通用模塊加載器)，zone.js以及通過Traceur的配置項定義的元數(shù)據(jù)注解。
關于上面的這些庫，在目前情況下沒有必要深究，它們的功能就是為了讓你在現(xiàn)有條件下（ES6還不被廣泛支持）能夠編寫Angular2代碼并運行在自己的環(huán)境上。
到目前為止這個項目的文件結構應該是這樣的（app目錄是我自己后來加上去的，作用后面會講）。
可以看到在項目根目錄下有一個gulpfile.js,說明這個種子項目是采用gulp作為構建工具的，所以要安裝gulp.
npm install -g gulp接著在項目的根目錄hello2ng2目錄下安裝項目依賴項
npm install這一步需要注意的是，由于網(wǎng)絡原因，很可能失敗，所以需要翻墻或者使用VPN。
上一步成功之后，使用gulp中配置的默認task重新生成Angular2的項目和他的依賴項。
gulp到目前為止，我們算是已經(jīng)搭建好了Angular2的環(huán)境，下面可以編寫代碼了。
由于Angular2.0是采用ES6編寫，所以需要對ES6有一個大致了解，這里推薦兩個學習地址，ES6新特性和ES6入門，
接著我們在項目根目錄hello2ng2下建立一個app目錄，用于存放我們編寫的代碼，然后創(chuàng)建一個index.html,內容如下：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>Angular 2 Hello World!</title> 6 <script src="../dist/es6-shim.js"></script> 7 </head> 8 <body> 9 <my-app></my-app> 10 <script> 11 System.paths={ 12 'angular2/*':'../angular2/*.js', 13 'rtts_assert/*':'../rtts_assert/*.js', 14 'app':'app.es6' 15 }; 16 System.import('app'); 17 </script> 18 </body> 19 </html>在第6行加入es6的shim庫文件，然后在11到15行通過配置SystemJS的一些加載項來加載外部js文件，包括angular2相關js文件，rtts_assert庫相關js文件，以及后面我們自己編寫的app.es6文件，然后加載完成后在第16行開始這個application。第9行實際上就是我們使用Angular2編寫的一個叫做my-app的組件，是不是很像Angular1.x中的directive？當然，在Angular2中編寫組件更為簡單。
接著在app目錄下新建一個app.es6文件，后綴名為es6表明它采用es6語法，文件內容如下：
1 import {Component, Template, bootstrap} from 'angular2/angular2'; 2 3 // Annotation section 4 @Component({ 5 selector: 'my-app' 6 }) 7 @Template({ 8 inline: '<h1>Hello {{ name }}</h1>' 9 }) 10 11 // Component controller 12 class MyAppComponent { 13 constructor() { 14 this.name = 'World!'; 15 } 16 } 17 18 bootstrap(MyAppComponent);第一行采用es6的模塊加載機制從angular2中加載三個模塊，分別是Component,Template以及bootstrap(這里的bootstrap和Twitter的BootStrap沒有關系，這里是用來啟動Angular2應用的一個模塊，在Angular1.x中也是有這個API的，只不過我們更愿意使用自動啟動的ng-app).
第4行和第7行使用注解（Annotation）來表明my-app這個組件的一些屬性，第5行是它的選擇器，第8行是它的模板即需要渲染成的html字符串。注解在ES6中是沒有的，嚴格地講，這個app.es6文件采用放入的是AtScript腳本，它是ES6的一個超集，在ES6的基礎上添加了一些新的特性（比如說注解），通過編譯之后能夠生成ES6代碼，它簡化了ES6的代碼的寫法，它是Angular2團隊專門為Angular研發(fā)的。關于它的介紹這里有一篇文章，然后在第12行到第16行定義了一個類來作為my-app這個組件的controller，相比于1，你會發(fā)現(xiàn)代碼更為簡潔，更為模塊化和清晰（一個組件對應一個類），然后在第18行啟動這個組件。它的作用就是在頁面上渲染一個hello world的h1標題。
到目前為止，我們已經(jīng)編寫了一個完整的組件，在Angular2中編寫組件就是這么容易（想想Angular1.x中封裝為directive 那種方式，竊喜啊），接下來可以運行這個ng2的web app了.
運行需要web服務器，在node環(huán)境下，安裝一個簡易的web服務器
進入到項目根目錄，安裝web服務器并啟動它
npm install http-server -g http-server然后就可以在本地http://localhost:8080/app/下查看結果了。
到目前為止，我們已經(jīng)能夠編寫并運行一個Angular2的應用程序了，在后面，我會寫一系列文章來揭示Angular2到底有哪些新特性以及如何使用。
?
轉載于:https://www.cnblogs.com/myzhibie/p/4667210.html
總結
以上是生活随笔為你收集整理的Angular2.0快速开始的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： post上传代码实现
- 下一篇： 自己实现苹果安装app动画