學(xué)習(xí) Angular 2

當(dāng)越來越多的 web app 使用 Angular 1構(gòu)建的時候，更快更強大的 Angular 2 將會很快成為新的標(biāo)準(zhǔn)。

Angular的新約定使得它更容易去學(xué)習(xí)、更快的去開發(fā) app。通過本教程學(xué)習(xí)更快速。更強大的 Angular 版本。

Angular 一個跨移動和桌面的框架

快速開始

本指南指導(dǎo)你如何構(gòu)建一個簡單 Angular app。

可以使用typescript/ JavaScript / Dart任意一種語言來編寫Angular app，本教程采用JavaScript。

看它運行

運行實例是學(xué)習(xí)一個 Angular app 如何實現(xiàn)的最快的方式。

點擊鏈接啟動一個瀏覽器，會使用 plunker 來加載運行一個簡單的示例。

文件的組織結(jié)構(gòu)：

對我們來說，它只是一個index.html，style.css 和包含三個JavaScript文件的 app 文件夾組成的簡單的 Web 目錄。

當(dāng)然，我們僅在 plunker只能構(gòu)建簡單的示例。我們關(guān)掉它開始一個真實的實踐。

搭建我們的開發(fā)環(huán)境；

為我們的 app 編寫 Angular 根組件；

添加 Angular 模塊；

引導(dǎo)它去控制主頁面；

編寫主頁面(即index.html)；

添加 CSS 樣式(style.css)；

如果我們跟著指南的步驟一步步去實踐，那么我們可以在 5 分鐘內(nèi)創(chuàng)建一個入門項目。

但是，大多數(shù)人總會陷入“why”和“how”中，花掉許多時間。

開發(fā)環(huán)境

我們需要一個地方去容納你的項目文件，你的編輯。

創(chuàng)建新的文件夾：

mkdir angular-start 
cd angular-start

添加需要的函數(shù)庫

我們推薦使用 npm 包管理器來獲得和管理我們的開發(fā)庫。

不會使用 npm，點擊鏈接開始學(xué)習(xí)，因為本教程是通過它來創(chuàng)建的。

添加 package.json 文件，直接 copy：

{
 "name": "angular2-quickstart",
 "version": "1.0.0",
 "scripts": {
 "start": "npm run lite",
 "lite": "lite-server"
 },
 "license": "ISC",
 "dependencies": {
 "@angular/common": "2.0.0",
 "@angular/compiler": "2.0.0",
 "@angular/core": "2.0.0",
 "@angular/forms": "2.0.0",
 "@angular/http": "2.0.0",
 "@angular/platform-browser": "2.0.0",
 "@angular/platform-browser-dynamic": "2.0.0",
 "@angular/router": "3.0.0",
 "@angular/upgrade": "2.0.0",

 "core-js": "^2.4.1",
 "reflect-metadata": "^0.1.3",
 "rxjs": "5.0.0-beta.12",
 "zone.js": "^0.6.23",

 "angular2-in-memory-web-api": "0.0.20",
 "bootstrap": "^3.3.6"
 },
 "devDependencies": {
 "concurrently": "^2.0.0",
 "lite-server": "^2.2.0"
 }
}

通過 npm 命令安裝這些包。

npm install

第一個 Angular 組件

組件是 Angular 中一個最基本的概念。一個組件管理一個視圖(一塊給用戶展示信息、響應(yīng)用戶的頁面)

技術(shù)上來講，一個組件是一個控制某各視圖模板的類。我們?yōu)榇罱?Angular app 寫許多代碼。這是我們第一次嘗試所以我們將會保持盡量的簡單。

創(chuàng)建項目源文件夾

我們將我們的應(yīng)用程序源代碼放在一個根目錄下的app/子文件夾下。mkdir app，cd app

添加一個組件文件

添加一個app.componet.js的文件并寫入下面內(nèi)容：

(function(app) {
 app.AppComponent =
 ng.core.Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
 })
 .Class({
  constructor: function() {}
 });
})(window.app || (window.app = {}));

我們通過鏈接一個組件和屬于 Angular 全局明明區(qū)間類方法ng.core寫入一個可視的 AppComponet 組件。

app.AppComponent =
 ng.core.Component({
 })
 .Class({
 });

這個組件方法用到一個含3個屬性的對象。類方法使我們實現(xiàn)這個組件，給它賦予屬性和方法就會綁定到視圖，無論它的變現(xiàn)是否適合 UI。

模型

Angular 應(yīng)用程序時模塊化的。各個基友特定功能的模型鏈接在一起。

ES5 JS沒有一個本地的模塊系統(tǒng)。有許多流行的第三方類庫系統(tǒng)我們可以使用。同樣，為了簡化和避免選擇，Angular 為應(yīng)用程序創(chuàng)建一個單獨的全局命名區(qū)間。

我們在這個全局對象喚醒 app 且添加我們所有的代碼構(gòu)件。

我們不想去污染這個全局命名空間。所以在每個文件里我們把代碼放入一個“IIFE”（Immediately Invoked Function Expression）。

(function(app){
})(window.app || (window.app={}));

我們通過這個全局的app命名空間對象傳入 IIFE，如果他還不存在則使用一個空對象初始化它。

大多數(shù)的應(yīng)用文件通過添加事物來輸出東西到app命名空間。app.compont.js文件輸出AppComponent。

app.AppComponent =

有一個比較復(fù)雜的應(yīng)用程序會有子組件遺傳自AppComponent在一個真是的樹模型上。一個比較復(fù)雜的應(yīng)用程序?qū)⒂懈嗟奈募湍K。

start示例并不復(fù)雜；一個組建時我們需要的。在這個小的應(yīng)用程序里模塊化扮演了基本組織的應(yīng)用規(guī)則。

模塊依賴于其它的模塊。在JS Angular 應(yīng)用程序里，當(dāng)我們需要一些東西由其它模塊提供，我們從app對象得到它。當(dāng)其它模塊需要涉及AppComponent，它需要從app.AppComponent獲取：

declarations: [ app.AppComponent ],

Angular 也是模塊化的。它是一個模塊庫的集合。每一個模塊庫都是由幾個有關(guān)聯(lián)的模塊組成的。

當(dāng)我們需要 Angular 的一些東西，我們使用ng對象。

定義對象的類

.class({
 constructor: function(){}
});

這個類中是空的，這個類為AppComponent類初始化對象。當(dāng)我們準(zhǔn)備構(gòu)建一個實際的項目，我們能用屬性和方法拓充這個對象。我們的AppComponent類是空的，但是有一個空的constructor，因為我們不需要在start項目里做任何事。

組件定義對象

ng.core.Component()告訴 Angular 這個類初始化對象為一個 Angular 組件。這個配置對象傳遞給 ng.core.Component()方法有兩個字段，selector 和 template。

ng.core.Component({
 selector: 'my-app',
 template: '<h1>My First Angular App</h1>'
});

這個selector指定一個簡單的CSS選擇器給一個叫做my-app的HTML元素。Angular創(chuàng)建了并運行一個我們的AppComponent實例，無論如何它總是一個my-app元素作為HTML。

記住這個my-app選擇器，我們需要這個知識點在我們寫index.html的時候用到。
這個template屬性保存組件的同伴模板。一個模板是一個HTML的形式，它告訴 Angular 怎樣去渲染一個視圖。我們的模板是一個單獨HTML代碼，“My First Angular App”。

現(xiàn)在，我們需要一些東西去告訴 Angular 去加載這組件。

添加一個 NgModule

Angular app 由 Angular 模塊組成，這些模塊依賴包含我們的組件和所有我們的app需要的。

創(chuàng)建一個app/app/module.js文件像下面這樣：

(function(app) {
 app.AppModule =
 ng.core.NgModule({
  imports: [ ng.platformBrowser.BrowserModule ],
  declarations: [ app.AppComponent ],
  bootstrap: [ app.AppComponent ]
 })
 .Class({
  constructor: function() {}
 });
})(window.app || (window.app = {}));

啟動app

添加一個新文件，app/main.js，像下面：

(function(app) {
 document.addEventListener('DOMContentLoaded', function() {
 ng.platformBrowserDynamic
  .platformBrowserDynamic()
  .bootstrapModule(app.AppModule);
 });
})(window.app || (window.app = {}));

我們需要兩個東西去運行這個app：

Angular 的platformBrowserDynamic().bootstrapModule函數(shù)

這個app我們剛寫的初始模塊；

我們需要它們都要在我們的命名空間。然后我們請求bootstrapModule，傳入這個 root app module，AppModule。

學(xué)習(xí)為什么我們需要bootstrapModule從ng.platformBrowserDynamic并且為什么我們創(chuàng)建一個單獨的JS文件。
我們已經(jīng)請求 Angular 去連接這個 app 在一個瀏覽器用我們的組件在 root。Angular 將放在那兒？

添加index.html

Angular 運行我們的 app 在我們的index.html的一個指定位置。開始創(chuàng)建文件。

我們不能把我們的index.html放在app/文件夾下。我們將把它放在上一層，在項目的根文件夾下。

index.html文件內(nèi)容如下：

<html>
 <head>
 <title>Angular QuickStart JS</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="styles.css">
 <!-- 1. Load libraries -->
 <!-- IE required polyfill -->
 <script src="node_modules/core-js/client/shim.min.js"></script>
 <script src="node_modules/zone.js/dist/zone.js"></script>
 <script src="node_modules/reflect-metadata/Reflect.js"></script>
 <script src="node_modules/rxjs/bundles/Rx.js"></script>
 <script src="node_modules/@angular/core/bundles/core.umd.js"></script>
 <script src="node_modules/@angular/common/bundles/common.umd.js"></script>
 <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
 <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
 <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
 <!-- 2. Load our 'modules' -->
 <script src='app/app.component.js'></script>
 <script src='app/app.module.js'></script>
 <script src='app/main.js'></script>
 </head>
 <!-- 3. Display the application -->
 <body>
 <my-app>Loading...</my-app>
 </body>
</html>

這兒有3個值的注意的地方：

我們加載我們需要的 JS 庫；學(xué)習(xí)關(guān)于它們。

我們加載我們的 JS 文件。

我們添加<my-app>標(biāo)簽在<body>中。

當(dāng) Angular在main.js 請求bootstrapModule函數(shù)，它讀取AppModule源信息，看見AppComponent是一個 啟動組件，找到這個my-app選擇器，定位到my-app的元素，然后加載我們的 app 視圖在這些標(biāo)簽中。

添加一些樣式

樣式不是非常重要但是它們是非常好的，index.html假設(shè)我們有一個樣式表叫style.css。

創(chuàng)建這個樣式文件在根目錄下并寫入樣式。也可以使用迷你版的樣式文件。你可以參考下面的樣式設(shè)置。

h1 {
 color: #369;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 250%;
}
body {
 margin: 2em;
}
 /*
 * See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css
 * for the full set of master styles used by the documentation samples
 */

運行它

打開命令工具，輸入命令 npm start

這個命令運行一個靜態(tài)的服務(wù)器 lite-server，它加載index.html在瀏覽器并且刷新瀏覽器當(dāng)程序文件被修改。

很快，瀏覽器的標(biāo)題欄會代開并顯示內(nèi)容。恭喜你，我們成功了。

做一些改變

嘗試去改變信息的內(nèi)容。

lite-server會一直監(jiān)視，所以它會察覺改變，刷新瀏覽器，顯示改變后的信息。

最后的項目結(jié)構(gòu)

最后項目文件結(jié)構(gòu)如下：

以上所述是小編給大家介紹的AngularJS 2.0入門權(quán)威指南，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！