AngularJs 2 快速入門
來自： https://segmentfault.com/a/1190000004506135
閱讀文檔時順便翻譯， 不好還請見諒！ 原文 Quickstart
</div>
讓我們從零開始，使用 Typescript 構建一個超級簡單的 AngularJs 2 應用。
先跑一個DEMO
運行這個 DEMO 先來感受一下 AngularJS2 的應用。
下面是這個應用的文件結構
angular2-app
|_ app
| |_ app.component.ts
| |_ main.ts
|_ index.html
|_ license.md
</div>
總結來說就是一個 index.html 文件和兩個在 app 文件下的 Typescript 文件， 我們可以hold住！
下面我們將一步一步的構建這樣的一個程序：
-
配置我們的開發環境
-
編寫 Angular 初始化組件
-
引導它控制我們主要的 index.html 頁面
-
編寫index.html 頁面
開發環境搭建
建立文件夾
mkdir angular2-app cd angular2-app
配置Typescript
需要通過一些特殊的設置來指導Typesript進行編譯。
新建一個 tsconfig.json 文件，放于項目根目錄下，并輸入一下配置
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
我們稍后在附錄中會詳細講解這個 tsconfig.json
</div>
Typescript Typings
有很多Javascript的庫，繼承了一些 Javascript的環境變量以及語法， Typescript編譯器并不能原生的支持這些。 所以我們使用 Typescript 類型定義文件 - d.ts 文件 （即 typings.json） 來解決這些兼容性問題。
創建 typings.json 文件，放于項目根目錄下
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
}
}
同樣的，在附錄中會有更詳細點的解釋
</div>
添加我們需要的庫
我們推薦使用npm來管理我們的依賴庫。在項目根目錄下創建package.json文件
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.7",
"systemjs": "0.19.22",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.5.15"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.7.5",
"typings":"^0.6.8"
}
}
在附錄中，會有更詳細的解釋
</div>
安裝這些依賴包只需要運行
npm install
這樣我們就完成了我們的開發環境的搭建。
第一個Angular 組件
組件是Angular中最基本的一個概念。 一個組件包含一個視圖 - 我們用來展示信息或者完成用戶交互的頁面。 技術上來講， 一個組件就是一個控制模板試圖的類， 在開發應用中會寫很多組件。 這是我們第一次嘗試寫一個組件，所以我們保證他盡可能的簡單。
創建一個應用源碼的子目錄
我們習慣上將我們的程序放在項目根目錄下的 app 子目錄下，所以首先創建一個 app 文件夾
mkdir app cd app
創建組件文件
在 app 文件夾下創建一個 app.component.ts 文件，然后輸入以下內容
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }</pre>
讓我們來詳細的看一下這個文件， 在文件的最后一行，我們定義了一個 類。
組件類
在這個文件地步，我們創建了一個啥都不做的空組件類 AppComponent。 當我們真正開發應用的時候， 我們可以擴展這個類，比如添加一些屬性和方法邏輯。 這個 AppComponent 類之所以為空是因為我們在入門程序中他不用做任何事情。
模塊
Angular應用是模塊化的。 他們包含很多完成某項功能的模塊文件。大多數程序文件會 export出一個東西比如一個組件。 我們的 app.component.ts 文件 exports出了 AppComponent
export class AppComponent { }
exports使一個文件轉變成一個模塊。 文件名（不包含擴展名）通常就是這個模塊的名稱。 所以， app.component 就是我們的第一個模塊的名稱。
一些更復雜的應用會有繼承于 AppComponent 的子組件， 而且會有很多文件和模塊。但是我們的快速入門程序不需要這么多， 一個組件就夠了。
如果一個組件依賴其他的組件， 在Typescript應用中， 當我們需要引入其他模塊的時候，直接import進來就可以使用。 例如：
import {AppComponent} from './app.component'
Angular 同樣是一個模塊， 他是一系列模塊的集合。 所以當我們需要angular的一些功能時，同樣的把Angular引入進來。
組件注解
當我們給一個類加上注解的時候， 一個類就變成了 Angular的組件。 Angular 需要通過注解來搞明白怎么去構建視圖， 還有組件是怎么與應用的其他部分進行整合的。
我們用 Componet 方法來定義一個組件的注解， 這個方法需要引入 angular2/core 才可以使用。
import {Component} from 'angular2/core';
在Typescript中，我們在類上面添加注解， 注解的方式很簡單，使用 @ 作為前綴進行注解。
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
<p>@Component 告訴Angular這個類是一個組件。 里面的參數有兩個, selector 和 template.</p>
selector參數是一個 css 選擇器， 這里表示選擇 html 標簽為 my-app的元素。 Angular 將會在這個元素里面展示AppComponent 組件。
記住這個 my-app 元素，我們會在 index.html 中用到
template控制這個組件的視圖， 告訴Angular怎么去渲染這個視圖。 現在我們需要讓 Angular去加載這個組件
初始化引導
在 app 文件夾下創建 main.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);</pre>
我們需要做兩個東西來啟動這個應用
-
Angular自帶的 bootstrap 方法
-
我們剛剛寫好的啟動組件
把這個兩個統統 import進來，然后將組件傳遞給 bootstrap 方法。
附錄中會詳細講解 為什么我們從 angular2/platform/browser中引入bootstrap 方法，還有為什么會創建一個main.ts文件
現在萬事俱備，只差東風啦！
添加 index.html 文件
首先回到項目的根目錄，在根目錄中創建index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html></pre>
HMTL中三個部分需要說明一下：
-
加載我們需要的 javascript庫， 附錄中會有詳細的介紹
-
配置了 System 并讓他import 引入 main 文件
-
添加 my-app 這個HTML元素，這里才是加載我們Angular實例的地方！
我們需要一些東西來加載應用的模塊，這里我們使用 SystemJs。 這里有很多選擇，SystemJS不一定是最好的選擇，但是這個挺好用。
SystemJs的具體使用不在我們的快速入門教程里，在附錄中會有一個剪短的說明。
當Angular調用main.ts文件中的 bootstrap方法， 它讀取 AppComponent 的注解，找到 my-app 這個HTML元素， 并將template 渲染進去。
編譯然后運行
只需要在終端中輸入
npm start
程序將會將Typescript編譯成 Javascript ，同事啟動一個 lite-server， 加載我們編寫的index.html。 顯示 My First Angular 2 App.
最終的結構
|_ angular2-quickstart
|_ app
| |_ app.component.ts
| |_ main.ts
|_ node_modules ...
|_ typings ...
|_ index.html
|_ package.json
|_ tsconfig.json
|_ typings.json
</div>
</div>
本文由用戶 pklq6594 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！