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

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

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

Angular 一個(gè)跨移動(dòng)和桌面的框架

快速開(kāi)始

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

可以使用typescript/ JavaScript / Dart任意一種語(yǔ)言來(lái)編寫(xiě)Angular app，本教程采用JavaScript。

看它運(yùn)行

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

點(diǎn)擊鏈接啟動(dòng)一個(gè)瀏覽器，會(huì)使用 plunker 來(lái)加載運(yùn)行一個(gè)簡(jiǎn)單的示例。

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

對(duì)我們來(lái)說(shuō)，它只是一個(gè)index.html，style.css 和包含三個(gè)JavaScript文件的 app 文件夾組成的簡(jiǎn)單的 Web 目錄。

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

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

為我們的 app 編寫(xiě) Angular 根組件；

添加 Angular 模塊；

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

編寫(xiě)主頁(yè)面(即index.html)；

添加 CSS 樣式(style.css)；

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

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

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

我們需要一個(gè)地方去容納你的項(xiàng)目文件，你的編輯。

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

mkdir angular-start 
cd angular-start

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

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

不會(huì)使用 npm，點(diǎn)擊鏈接開(kāi)始學(xué)習(xí)，因?yàn)楸窘坛淌峭ㄟ^(guò)它來(lái)創(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"
 }
}

通過(guò) npm 命令安裝這些包。

npm install

第一個(gè) Angular 組件

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

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

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

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

添加一個(gè)組件文件

添加一個(gè)app.componet.js的文件并寫(xiě)入下面內(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 = {}));

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

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

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

模型

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

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

我們?cè)谶@個(gè)全局對(duì)象喚醒 app 且添加我們所有的代碼構(gòu)件。

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

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

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

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

app.AppComponent =

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

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

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

declarations: [ app.AppComponent ],

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

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

定義對(duì)象的類(lèi)

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

這個(gè)類(lèi)中是空的，這個(gè)類(lèi)為AppComponent類(lèi)初始化對(duì)象。當(dāng)我們準(zhǔn)備構(gòu)建一個(gè)實(shí)際的項(xiàng)目，我們能用屬性和方法拓充這個(gè)對(duì)象。我們的AppComponent類(lèi)是空的，但是有一個(gè)空的constructor，因?yàn)槲覀儾恍枰趕tart項(xiàng)目里做任何事。

組件定義對(duì)象

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

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

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

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

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

添加一個(gè) NgModule

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

創(chuàng)建一個(gè)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 = {}));

啟動(dòng)app

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

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

我們需要兩個(gè)東西去運(yùn)行這個(gè)app：

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

這個(gè)app我們剛寫(xiě)的初始模塊；

我們需要它們都要在我們的命名空間。然后我們請(qǐng)求bootstrapModule，傳入這個(gè) root app module，AppModule。

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

添加index.html

Angular 運(yùn)行我們的 app 在我們的index.html的一個(gè)指定位置。開(kāi)始創(chuàng)建文件。

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

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個(gè)值的注意的地方：

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

我們加載我們的 JS 文件。

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

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

添加一些樣式

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

創(chuàng)建這個(gè)樣式文件在根目錄下并寫(xiě)入樣式。也可以使用迷你版的樣式文件。你可以參考下面的樣式設(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
 */

運(yùn)行它

打開(kāi)命令工具，輸入命令 npm start

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

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

做一些改變

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

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

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

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

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