Angular 2 系列: 簡介

時間 2019-11-07

原文原文鏈接

By Max on April 2, 2015前端

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

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

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

#Angular 2 系列github

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

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

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

#開始app

讓我們先從 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。隨便你咯，不過我建議你還是下一個，學學怎麼用。