标签:
Angular 2 Series: Introduction
By Max on April 2, 2015
現在, Angular 2 和 Ionic 2 呼之欲出。我們超讚的小隊正在為下一個大版本的 Ionic 和 Angular 2 在努力工作。我為我們在那麽短的時間內取得那麽大的進展感到興奮,而且我相信,Ionic 社區,肯定會愛死它的。
對許多人來說, Angular 2 把他們所鐘愛框架改得太多了(這就是相愛相殺吧)。大家花了太多時間去學習 v1 的術語了(directive
,有的舉手?),還有花事件去理解 scope,和生命週期,花時間去 debug ngModel
的問題,然後總結出最棒的工程目錄結構,但是現在,全都沒了。
不過相信我,這是最棒的。
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
創建一個新的 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
。
下面,我們要寫點 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
,你會看到如下圖:
就是這樣!
為了簡單起見,入門工程用了一個 Traceur 提供的 Angular 2 預編譯版本。
不過,這個工程挺好用的,讓整個工具鏈更簡單。我想說的是,你不需要去學 Traceur 或者記住什麼別的長長的名字。
在上面的文件裏,我們創造了第一個組件(Component)。組件是 Angular 2 的核心,取代了原先 v1 版本的 Controller,Scope 和 Directive。
去看看下一帖,介紹 Angular 2 的組件 來學習新的組件系統吧,少年!
标签:
原文地址:http://my.oschina.net/ilivebox/blog/409104