码迷,mamicode.com
首页 > 其他好文 > 详细

Angular 2 系列: 简介

时间:2015-05-02 20:50:31      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:

Angular 2 Series: Introduction

By Max on April 2, 2015

現在, Angular 2Ionic 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 的組件 來學習新的組件系統吧,少年!

Angular 2 系列: 简介

标签:

原文地址:http://my.oschina.net/ilivebox/blog/409104

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!