文档章节

Angular 2 系列: 简介

开源中国匿名会员
 开源中国匿名会员
发布于 2015/05/02 17:15
字数 984
阅读 696
收藏 9

3 月,跳不动了?>>>

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,你會看到如下圖:

http://blog.ionic.io/wp-content/uploads/2015/04/server.png

就是這樣!

##TypeScript?

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

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

#下一章: 組件

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

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

© 著作权归作者所有

开源中国匿名会员

开源中国匿名会员

粉丝 78
博文 104
码字总数 113453
作品 2
徐汇
技术主管
私信 提问
加载中

评论(0)

《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
251
0
[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen
2018/05/21
0
0
AngularJS 的 Material Design 风格框架 - AngularJS Material

AngularJS Material 是 AngularJS 框架的谷歌 Material Design 标准的实现。AngularJS Material 包含一组丰富的、可重用、经过充分测试并可访问的 UI 组件。 针对 Angular 2 或更高版本的实现...

匿名
2018/05/15
3.7K
1
Angular 实战教程 - Today 系列文章目录

Angular 实战教程 - Today 系列文章目录 发布于 10:15 文章被以下专栏收录

小温
2018/07/18
0
0
第214天:Angular 基础概念

一、Angular 简介 1、 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多款产品 - 目前有一个全职的开发团队继续开...

半指温柔乐
2018/04/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Proxy代理

Proxy对象 在一个系统中,总要存储一些数据,对于这些数据,可能有一些是希望我们访问的,但是总有一些是中重要的,不希望我们访问的,希望保护起来,因此ES6新增了代理,在目标对象前架设个...

aHai366
16分钟前
13
0
NPM,Bower,Browserify,Gulp,Grunt,Webpack

问题: I'm trying to summarize my knowledge about the most popular JavaScript package managers, bundlers, and task runners. 我试图总结我对最流行的JavaScript包管理器,捆绑器和任务......

javail
20分钟前
19
0
F版本SpringCloud 4—Eureka注册中心开发和客户端开发

源码地址:https://gitee.com/bingqilinpeishenme/Java-Tutorials 前言 通过前三篇文章,用大白话介绍了微服务和SpringCloud以及服务治理相关的概念,从这篇开始SpringCloud代码的开发。 Sp...

鹿老师的Java笔记
33分钟前
19
0
微信小程序学习笔记(九)音乐播放器(下一曲、上一曲、自动下一曲)

微信小程序学习笔记(九)音乐播放器(下一曲、上一曲、自动下一曲) 要实现自动下一曲、下一曲、上一曲功能,实现列表的循环播放,必须清楚当前播放的是列表中的第几首歌。因此,在程序中设...

AzureMonkey
33分钟前
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部