Angular 2 系列: 简介

By Max on April 2, 2015

現在， Angular 2 和 Ionic 2 呼之欲出。我們超讚的小隊正在為下一個大版本的 Ionic 和 Angular 2 在努力工作。我為我們在那麽短的時間內取得那麽大的進展感到興奮，而且我相信，Ionic 社區，肯定會愛死它的。

對許多人來說， Angular 2 把他們所鐘愛框架改得太多了(這就是相愛相殺吧)。大家花了太多時間去學習 v1 的術語了(directive，有的舉手？)，還有花事件去理解 scope，和生命週期，花時間去 debug ngModel 的問題，然後總結出最棒的工程目錄結構，但是現在，全都沒了。

不過相信我，這是最棒的。

#Angular 2 系列

Ionic 是最早把 Angular 2 應用到大型項目的隊伍之一。因此，我們接觸到了關於 Angular 2 的許多複雜，局限，當然還有牛逼的地方。我們知道為了讓社區接納 Angular 2，我們需要給前端開發者們分享我們的經驗和教訓。

這周開始，我們準備給 Angular 2 來一個系列的帖。這個系列將會覆蓋這個框架的各個方面，怎麽用它，以及到哪裡能得到幫助。

今天，我們將會從介紹這個框架開始，安裝我們所需的東西，然後做一個小小的例子試試。

#開始

讓我們先從 Angular 2 官方的快速上手開始，不過我們要加點料。

首先，創建一個工程文件夾，把 quickstart 倉庫給克隆下來：

<!-- lang: js -->
mkdir myApp
cd myApp
git clone git@github.com:angular/quickstart.git

##HTML

創建一個新的 index.html，文件，像這樣：

<!-- lang: js -->
<!-- index.html -->
<html>
  <head>
    <title>Angular 2 Quickstart</title>
    <script src="/quickstart/dist/es6-shim.js"></script>
  </head>
  <body>

    <!-- The app component created in app.es6 -->
    <my-app></my-app>

    <script>
      // Rewrite the paths to load the files
      System.paths = {
        'angular2/*':'/quickstart/angular2/*.js', // Angular
        'rtts_assert/*': '/quickstart/rtts_assert/*.js', // Runtime assertions
        'app': 'app.js' // The my-app component
      };

      // Kick off the application
      System.import('app');
    </script>    
  </body>
</html>

我猜你的第一反應應該是，"System.* 是什麽鬼？"。System 只是為了瀏覽器支持把 es6 模塊加載進來而已。它什麼都不是，就像現在許多 Angular 2 的模板一樣，之後是要刪掉的東西(最起碼在我們 Ionic2 發佈的時候要刪掉，所以你不要去看它)。知道就行，無視它。

所有看起來是不是都很熟悉，只是沒有了 ng-app。

##Javascript

下面，我們要寫點 ES6 的東西了！

那麽，先來創建一個 app.js 然後填代碼。(官方文檔用了 .es6，不過我不建議用這個擴展名，因為現在還沒支持)。

<!-- lang: js -->
import {Component, View, bootstrap} from 'angular2/angular2';

// Annotation section
@Component({
  selector: 'my-app'
})
@View({
  inline: '<h1>Hello {{ name }}</h1>'
})
// Component controller
class MyAppComponent {
  constructor() {
    this.name = 'Alice'
  }
}
bootstrap(MyAppComponent)

有意思的事情是，我們是怎樣指定 app 組件的。bootstrap(MyAppComponent) 方法在我們的 app 啟動的時候被調用，就像 ng-app 那樣。只不過，在這種情況下，我們明確的在 app 啟動的時候提供了組件。

讓叔叔來檢查一下！

如果你沒有安裝一個本地的 HTTP 服務，我們可以用 npm install -g http-server 或者 python -m SimpleHTTPServer。隨便你咯，不過我建議你還是下一個，學學怎麼用。

<!-- lang: js -->
http-server

在你瀏覽器打開 http://localhost:8080，你會看到如下圖：

就是這樣！

##TypeScript？

為了簡單起見，入門工程用了一個 Traceur 提供的 Angular 2 預編譯版本。

不過，這個工程挺好用的，讓整個工具鏈更簡單。我想說的是，你不需要去學 Traceur 或者記住什麼別的長長的名字。

#下一章：組件

在上面的文件裏，我們創造了第一個組件(Component)。組件是 Angular 2 的核心，取代了原先 v1 版本的 Controller，Scope 和 Directive。

去看看下一帖，介紹 Angular 2 的組件來學習新的組件系統吧，少年！

来源：oschina

链接：https://my.oschina.net/u/1035386/blog/409104

标签

ionic

angular2