AngularJS 2.0入門權威指南_AngularJS

學習 Angular 2

當越來越多的 web app 使用 Angular 1構建的時候，更快更強大的 Angular 2 將會很快成為新的標準。

Angular的新約定使得它更容易去學習、更快的去開發 app。通過本教程學習更快速。更強大的 Angular 版本。

Angular 一個跨移動和案頭的架構

快速開始

本指南指導你如何構建一個簡單 Angular app。

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

看它運行

運行執行個體是學習一個 Angular app 如何?的最快的方式。

點選連結啟動一個瀏覽器，會使用 plunker 來載入運行一個簡單的樣本。

檔案的組織圖：

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

當然，我們僅在 plunker只能構建簡單的樣本。我們關掉它開始一個真實的實踐。

搭建我們的開發環境；

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

添加 Angular 模組；

引導它去控制首頁面；

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

添加 CSS 樣式(style.css)；

如果我們跟著指南的步驟一步步去實踐，那麼我們可以在 5 分鐘內建立一個入門項目。

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

開發環境

我們需要一個地方去容納你的專案檔，你的編輯。

建立新的檔案夾：

mkdir angular-start cd angular-start

添加需要的函數庫

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

不會使用 npm，點選連結開始學習，因為本教程是通過它來建立的。

添加 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 中一個最基本的概念。一個組件管理一個視圖(一塊給使用者展示資訊、響應使用者的頁面)

技術上來講，一個組件是一個控制某各視圖模板的類。我們為搭建 Angular app 寫許多代碼。這是我們第一次嘗試所以我們將會保持盡量的簡單。

建立項目源檔案夾

我們將我們的應用程式原始碼放在一個根目錄下的app/子檔案夾下。mkdir app，cd app

添加一個組件檔案

添加一個app.componet.js的檔案並寫入下面內容：

(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 全域明明區間類方法ng.core寫入一個可視的 AppComponet 組件。

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

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

模型

Angular 應用程式時模組化的。各個基友特定功能的模型連結在一起。

ES5 JS沒有一個本地的模組系統。有許多流行的第三方類庫系統我們可以使用。同樣，為了簡化和避免選擇，Angular 為應用程式建立一個單獨的全域命名區間。

我們在這個全域對象喚醒 app 且添加我們所有的代碼構件。

我們不想去汙染這個全域命名空間。所以在每個檔案裡我們把代碼放入一個“IIFE”（Immediately Invoked Function Expression）。

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

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

大多數的應用檔案通過添加事物來輸出東西到app命名空間。app.compont.js檔案輸出AppComponent。

app.AppComponent =

有一個比較複雜的應用程式會有子組件遺傳自AppComponent在一個真是的樹模型上。一個比較複雜的應用程式將有更多的檔案和模組。

start樣本並不複雜；一個組建時我們需要的。在這個小的應用程式裡模組化扮演了基主要組織的應用規則。

模組依賴於其它的模組。在JS Angular 應用程式裡，當我們需要一些東西由其它模組提供，我們從app對象得到它。當其它模組需要涉及AppComponent，它需要從app.AppComponent擷取：

declarations: [ app.AppComponent ],

Angular 也是模組化的。它是一個模組庫的集合。每一個模組庫都是由幾個有關聯的模組組成的。

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

定義對象的類

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

這個類中是空的，這個類為AppComponent類初始化對象。當我們準備構建一個實際的項目，我們能用屬性和方法拓充這個對象。我們的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建立了並運行一個我們的AppComponent執行個體，無論如何它總是一個my-app元素作為HTML。

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

現在，我們需要一些東西去告訴 Angular 去載入這組件。

添加一個 NgModule

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

建立一個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函數

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

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

學習為什麼我們需要bootstrapModule從ng.platformBrowserDynamic並且為什麼我們建立一個單獨的JS檔案。
我們已經請求 Angular 去串連這個 app 在一個瀏覽器用我們的組件在 root。Angular 將放在那兒？

添加index.html

Angular 運行我們的 app 在我們的index.html的一個指定位置。開始建立檔案。

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

index.html檔案內容如下：

<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 庫；學習關於它們。

我們載入我們的 JS 檔案。

我們添加<my-app>標籤在<body>中。

當 Angular在main.js 請求bootstrapModule函數，它讀取AppModule源資訊，看見AppComponent是一個 啟動組件，找到這個my-app選取器，定位到my-app的元素，然後載入我們的 app 視圖在這些標籤中。

添加一些樣式

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

建立這個樣式檔案在根目錄下並寫入樣式。也可以使用迷你版的樣式檔案。你可以參考下面的樣式設定。

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

這個命令運行一個靜態伺服器 lite-server，它載入index.html在瀏覽器並且重新整理瀏覽器當程式檔案被修改。

很快，瀏覽器的標題列會代開並顯示內容。恭喜你，我們成功了。

做一些改變

嘗試去改變資訊的內容。

lite-server會一直監視，所以它會察覺改變，重新整理瀏覽器，顯示改變後的資訊。

最後的項目結構

最後專案檔結構如下：

以上所述是小編給大家介紹的AngularJS 2.0入門權威指南，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！