Angular2.x環境搭建快速入門--最簡單教程

Angular2簡介：

---

Angular 2 是Google推出的一個跨平臺全終端的框架，和目前比較火的React和Vue.js相比，有如下優點：

1. 由於Google的目的是推出一個完整解決方案，所以官方默認提供的類庫（比如routing，http，依賴性注入（DI）等）非常完整，無需自己選擇。React的一大痛點就是選擇太多導致在配置尋找組件和類庫的過程中消耗太多精力，當然從另一方面看這也是其優勢，選擇衆多且自由。
2. 官方支持TypeScript（微軟出品，是JavaScript的超集，是 JavaScript 的強類型版本）作爲首選編程語言，使得開發腳本語言的一些問題可以更早更方便的找到。
3. RxJS友好使得響應式編程在Augular2中變得極爲容易（Google開發的框架依賴這麼多的微軟的產品，可見微軟的轉型還是很成功的）
4. 支持NativeScript甚至ReactNative等進行原生Android/iOS應用開發（React支持React Native）
5. 支持服務器端渲染（React也支持）

環境配置要求：

---

angular2需要node.js和npm。node.js版本需要6.9.x以上、npm需要3.5.x以上。可以通過node -v和npm -v來檢查版本信息。（如果node的版本較低的話可以把node卸載重新下載高版本的即可）
在安裝的過程中需要用到npm，但是npm安裝非常慢，個人建議使用cnpm。安裝cnpm的方法如下：

npm install -g cnpm --registry=https://registry.npm.taobao.org

以上安裝完成後，開發環境就部署好了，接下來就開始angular2探險之旅吧！

Angular2小應用

---

1. 打開命令行窗口，安裝全局的angular-cli

cnpm install -g angular-cli

2、安裝完成之後，創建一個angular項目(hello-angular)

ng new hello-angular

如果出現以下三句就創建成功了：

文件目錄如下：

要看一下自己的項目目錄中有沒有node_modules文件，如果沒有通過cnpm install來下載這些依賴。

3、以上這些都完成之後，就進入文件hello-angular內，輸入以下命令：

cd hello-angular

4、開啓服務

ng serve

我們可以看到 應用運行在4200端口：

稍等片刻之後如果出現以下信息就搭建成功了：

切記！！命令窗口不要關閉，保證持續運行服務！！
在瀏覽器輸入http://localhost:4200 就可以看到運行結果了：

如果想要自己修改一下內容，在src/app/app.component.ts修改title即可：如title="這是第一個angular2文件"保存，然後返回瀏覽器，發現結果已經改變了。

接下來我們在創建第一個組件吧！

---

（由於要保證持續運行服務，我們需要在文件的根目錄在打開一個新的命令行窗口）

創建組件需要在命令窗口輸入：

ng generate component login --inline-template --inline-style

1. 參數generate使用來生成文件的。
2. 參數component是說明我們要生成一個組件。
3. login是組件的名字。（自己隨便起）。
4. 後面兩個參數是告訴angular-cli，生成組件的時候，把組件的html和style放在同一個文件下。

以上命令行感覺太長的話，可以使用縮寫：

ng g c login -it -is

這個時候angular-cli爲我們生成了一個新的文件login。目錄結構如下：

login下有兩個文件login.component.spec.ts是測試文件，這裏我們不需要關心。還有一個文件login.component.ts就是我們新建的組件。

打開新生成的login組件源碼如下：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  template: `
    <p>
      login Works!
    </p>
  `,
  styles: []
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

上面代碼，@Component中的selector: 'app-login'表示我們可以在其他組j件的template中使用<app-login></app-login>來引用這個組件。

現在我們在src/app/app.component.html中引用這個組件。

<h1>
  {{title}}
</h1>
<app-login></app-login>

保存後返回瀏覽器，發現我們的第一組件也出來了：

今天就先說這些吧！！