原文地址: https://angular.io/docs/ts/latest/quickstart.html
讓我們從 0 開始創建一個簡單的 Angular 2 應用。
下載任何版本的 angularjs, 訪問：https://code.angularjs.org/
不想用 JavsScript 語言？
雖然我們這里使用 JavaScript, 你也可以使用 TypeScript，或者 Dart 來開發 Angular 2 應用。
我們將用 6 步完成
1. 創建項目文件夾
2. 安裝基礎庫
3. 創建應用組件
4. 啟動應用
5. 創建 index.html
6. 運行
1. 創建項目文件夾
創建一個新的文件夾來保存你的項目，應該類似下面的樣子。
mkdir angular2-quickstart cd angular2-quickstart
2. 安裝基礎庫
我們使用 npm package manager 來安裝需要的開發庫和開發工具。
angular2 - Angular 2 庫
live-server - 一個靜態文件服務器，可以在修改文件之后，自動重新加載到瀏覽器中。
我們既可以直接引用 Web 上的庫，也可以下載項目中。
還沒有安裝 NPM？趕緊安裝它，我們在這里將會不斷使用這個工具。
打開終端窗口，輸入下面的命令。
npm init -y npm i angular2@2.0.0-alpha.44 --save --save-exact npm i live-server --save-dev
這些命令將會創建名為 package.json 的項目文件，安裝相應的軟件包，現在的 package.json 看起來應該如下所示。
{ "name": "angular2-getting-started", "version": "1.0.0", "dependencies": { "angular2": "2.0.0-alpha.44" }, "devDependencies": { "live-server": "^0.8.1" } }
還需要一個 scripts 的配置節，找到並替換為如下的內容, 在你的文件中可能根本就沒有這個配置節, 那就加上好了.
"scripts": { "start": "live-server" }
我們使用它來擴展項目，以便運行腳本命令，很快就會用到。
3. 第一個 Angular Component
添加一個名為 app.js 的文件，輸入下面的內容。
var AppComponent = ng .Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) .Class({ constructor: function () { } });
我們正在創建一個名為 AppComponent 的可視組件，通過使用全局的 ng 命名空間下的 Component 和 Class 方法來完成。
var AppComponent = ng .Component({...}) .Class({...})
Component 方法需要一個包含兩個屬性的配置對象。selecter 屬性告訴 Angular 需要控制名為 "my-app" 的元素。一旦遇到 my-app 元素，Angular 將會創建和顯示 AppComponent 實例
template 屬性定義了組件的可視外觀。在這個示例中，我們使用了內聯的模板，我們也可以把這個模板調整到一個模板文件中，然后通過 templateUrl 來關聯模板文件的名稱來使用它。
我們使用 Class 方法實現這個組件本身的內容，可以定義屬性，方法並綁定到這個視圖
現在的組件是一個最小化的實現，構造函數中沒有內容。在以后的示例中，我們會看到很多有趣的內容。
4. 啟動應用
我們需要在應用中做點什么，在 app.js 的最后，添加下面的內容。
document.addEventListener('DOMContentLoaded', function() {
ng.bootstrap(AppComponent);
});
我們等到瀏覽器通知我們說，內容已經加載完成了，然后再調用 bootstrap 方法。
bootstrap 方法通知 Angular 使用 AppComponent 作為應用的根來啟動應用，
應該可以猜到, 在應用變得復雜的情況下, 我們會創建一個 Component 的樹來完成復雜的工作.
Wrapped in an IIFE
我們不希望污染全局命名空間，但是,現在還不需要應用到命名空間，我們直接使用 IIFE ( Immediately Invoked Function Execution ) 來封裝我們的代碼。
(function() { var AppComponent = ng .Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) .Class({ constructor: function () { } }); document.addEventListener('DOMContentLoaded', function() { ng.bootstrap(AppComponent); }); })();
5. 創建 index.html
在項目文件夾中添加名為 index.html 的頁面，內容如下：
<html> <head> <title>Angular 2 QuickStart</title> <script src="node_modules/angular2/bundles/angular2.sfx.dev.js"></script> <script src="app.js"></script> </head> <body> <my-app></my-app> </body> </html>
在 head 中，我們的應用加載了兩個腳本
angular2.sfx.dev.js, Angular2 的開發庫
app.js, 我們剛剛開發的腳本。
在 body 中，使用了名為 <my-app> 的元素，這是應用的根的占位，Angular 將在這里顯示我們的應用。
6. Run it!
我們需要一個文件服務器來服務靜態資源。
對這個示例來說，我們這里使用通過 npm 安裝的 live-server，因為它默認就提供了動態加載。
打開終端窗口，輸入下面的命令。
npm start
還記得我們添加的 npm 命令嗎？
live-server 自動幫我們啟動瀏覽器，當我們更新文件的時候，還可以自動刷新頁面。
稍等一下，瀏覽器就會顯示出下面的內容。
做一點修改
live-server 自動檢測項目文件的修改，並刷新瀏覽器。
將項目的信息修改為 "My Second Angular 2 app.", live-server 會檢測到修改自動刷新顯示。
保持 live-server 運行在終端窗口中，並進行更多的修改，可以使用 Ctrl-C 來停止它。
祝賀你，我們完成了！