學習 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，如果他還不存在則使用一個空對象初始化它。

大多數的應用文件通過添加事物來輸出東西到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入門權威指南，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！