Angular2學習筆記.1、環境部署，基本概念，HelloAngular2

阿新 • • 發佈：2019-01-31

前言

作為本系列筆記的第一篇文章，在開頭要說一些閒言碎語。
首先我是一個Angular2的初學者，這個系列文章不是教程或其他一切厲害的東西，僅僅是作為我學習過程的一個記錄，我在編輯和排版後將它作為資料儲存並分享給其他人。也希望大家和我共同以學習的態度探討技術，希望這個系列能對大家或多或少的有所幫助。雖然這個系列是我的學習筆記，但既然拿出來和別人分享，我會盡量考慮讀者的感受，盡力做出循序漸進並且詳盡的描述。
同樣因為我是初學者，在學習和行文過程中必然有所疏漏和曲解，我儘量避免這些問題並且會在以後發現問題時返回改正，希望發現問題的大家不吝賜教。
在學習的過程中我發現官方文件和Angular的實際程式碼存在出入，我會在筆記中詳細註明，我確保我的程式碼在當時是正確的，但不排除Angular繼續修改程式碼的可能性。
這個系列以理論和實踐的方式進行，我會在

[email protected]上同步更新我的工程，也會提供展示站點。
本次學習的一個目的是將[email protected]上面的我發起的一個開源庫AliceSPA的客戶端由AngularJS 1.x升級到Angular 2。AliceSPA是一個有Phalcon和Angular構建的SPA框架。
本系列GIT地址（包含工程）
本系列在CSDN上的釋出地址
AliceSPA專案GIT地址
演示站點地址
Angular2可以用於三種開發環境，分別為TypeScript、Dart和JavaScript。我選擇從相對熟悉的JavaScript入手，以後應該會對前兩種也有學習。

Angular2官方文件

構建基礎目錄

由於本系列筆記會有許多工程，那麼首先提出一個目錄結構以便日後管理（你不需提前建立這個目錄結構，在需要的時候我會提出建立相關內容）：

/  
|-package.json  
|-index.html  
|-node_modules/  
  |-libraries  
  |-...  
|-Project1/  
|-Project2/  
|-Project3/  
|-...

package.json檔案與node_modules資料夾是由NPM管理的庫檔案相關內容。
index.html提供了各個工程的超連結索引。
ProjectN為日後穿件的各個工程（名字會根據實際內容改變）。
首先建立/資料夾，這個資料夾可以自己取名如web，以後我都會用/指代這個資料夾。

開始

本文內容及工程參考Angular2官方文件5 MIN QUICKSTART
既然是第一篇文章，那麼我們先以讓Angular2成功執行為目的。
演示地址

1、NPM

NPM是NodeJS的包管理器，通過NPM我們可以方便的對專案依賴的包進行管理，Angular2就是通過NPM管理的。
關於NodeJS和NPM的安裝請自行搜尋，我假設你已經成功安裝了NPM。
/package.json為NPM的配置檔案，記載了工程所需要的各個包的版本資訊，可以通過NPM一鍵安裝。
建立/package.json檔案，內容為：

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.14"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^2.0.1"
  }
}

在/下啟動命令列或中斷，執行
npm install
完成相關包的下載，此時會自動建立/node_modules/資料夾並下載相關包。

2、HelloAngular2

在本工程完成時目錄結構將為：

/  
|-package.json  
|-index.html  
|-node_modules/  
  |-libraries  
  |-...  
|-HelloAngular2/
  |-index.html
  |-app/
    |-app.component.js
    |-main.js

首先在/下建立本次工程目錄”HelloAngular2”。

Component

Component(元件)是頁面的一部分，它用於顯示內容和響應使用者操作，包含了處理邏輯和HTML模板。
從技術上來說，Component是控制檢視模板的類，在構建Angular應用時我們會構建許多這樣的類。
建立/HelloAngular2/app.component.js檔案，內容為：

(function(app){

  app.AppComponent = 
  ng.core.Component({
    selector:'my-app',
    template:'<h1>Hello Angular 2!</h1>'
  })
  .Class({
    constructor:function(){}
  });
})(window.app || (window.app = {}));

上面的程式碼建立了一個叫做“app”的全域性名稱空間，我們所有的程式碼都將在這個物件中。
上面的程式碼中為了避免對全域性名稱空間的汙染，我們使用IIFE(“Immediately Invoked Function Expression”)：(function(app) {})(window.app || (window.app = {}));匿名函式會被立刻執行並不會被保留。這裡當window.app不存在時會用空物件初始化它。
上面程式碼中使用了ng.core.Component()方法，它定義了一個Agular component物件，它接收一個物件作為引數，其包含兩個屬性selector（選擇器）和template（模板）。
selector是一個簡單的CSS選擇器，這裡的值為my-app，它用於定位在HTML的頁面中的同樣叫做my-app的元素。無論在HTML中的何處遇到叫做my-app的元素，Angular都將建立或顯示一個AppCompoent的instance（例項）。
template是一個知道Angular如何渲染檢視的模板，直觀的說，selector所對應的html元素將被渲染為template的內容。你會在接下來的index.html中看到<my-app>標籤，它顯示了一級標題“Hello Angular 2!”。

Modules

Angular應用是模組化的，ES5 JavaScript沒有提供一個Native（原生）的模組化系統，我們可以使用一些第三方的實現。
大多數情況下一個程式檔案為app名稱空間新增一個部分（或者說模組），這個工程中我們已經通過app.component.js為window.app（既app）添加了AppComponent元件（模組）。
在更復雜的應用中可以為元件定義子元件以形成一個可視樹（檢視樹）。在複雜的應用中會有很多檔案和模組，至少和這個應用包含的Component數量一樣多。
一個Module可以依賴於其他Module，在JavaScript下的Angular應用中，當我們需要使用其他Module的功能時，我們可以從app物件獲取，例如window.app.AppComponent。

啟動引導

我們需要兩部分來啟動APP：
1、Angular的bootstrap函式
2、作為根的Component
建立/HelloAngular2/main.js,內容為：

(function(app){
  document.addEventListener('DOMContentLoaded',function(){
    ng.platform.browser.bootstrap(app.AppComponent);
  });
})(window.app || (window.app = {}));

上面程式碼可以看出，引導是對於特定平臺的，我們使用的是ng.platform.browser而不是ng.core，因為在core中提供的是跨平臺的功能，而bootstrap可能發生在browser（瀏覽器）、Apache Cordova或者NativeScript，不同平臺的bootstrap是不同（或者說特定優化）的。我們可能還會在伺服器上進行引導以進行頁面的伺服器端渲染從而提供更好的SEO（搜尋引擎的SEO對於Angular的動態頁面程式，如SPA是一個難題。因為搜尋引擎不會執行頁面的JavaScript指令碼，而沒有指令碼執行的Angular應用基本上只有模板之類的無用資訊）。

index.html

建立/HelloAngular2/index.html，內容為：

<html>
  <head>
    <title>Hello Angular 2!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 1. Load libraries -->
    <!-- IE required polyfill -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
    <script src="node_modules/angular2/bundles/angular2-all.umd.js"></script>

    <!-- 2. Load our 'modules' -->
    <script src='app/app.component.js'></script>
    <script src='app/main.js'></script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

從上面的html程式碼中可以看到<body>中的<my-app>元素，如前面所說，window.app.AppComponent構建是傳入的selector為”my-app”,Angular會找到index.html中的my-app元素並替換模板。

3、執行

在/下啟動命令列或中斷，執行npm start。
可以看到頁面顯示Hello Angular 2!。

Angular2學習筆記.1、環境部署，基本概念，HelloAngular2

前言

Angular2官方文件

構建基礎目錄

開始

1、NPM

2、HelloAngular2

Component

Modules

啟動引導

index.html

3、執行

Angular2學習筆記.1、環境部署，基本概念，HelloAngular2

MyBatis-Plus學習筆記(1)：環境搭建以及基本的CRUD操作

CNTK與深度強化學習筆記之一：環境搭建和基本概念

Angular2學習筆記.4、表單相關，雙向資料繫結，HeroForm

Angular2學習筆記.3、通過模板呼叫Controller事件實現使用者輸入和顯示，UserInput

Redis學習筆記1 -- 單機環境時分布式鎖的使用

資料分析學習筆記(1):工作環境以及建模理論基礎

Arduino 入門學習筆記1 開發環境及雙色LED實驗

【深入理解JVM】學習筆記——-1、JVM基本結構

深度學習框架Caffe學習筆記(1)-Caffe環境搭建

比特幣學習筆記——————1、比特幣簡介

Angular2學習筆記.2、繫結、ngFor和ngIf指令、MVVM分離、DisplayingData

【django3】Django學習筆記3：Model,Template,View 基本概念

Choerodon學習筆記1——環境搭建：微服務支撐元件部署(原始碼形式)

OpenWRT學習筆記（1）環境部署程式碼下載及編譯

lua學習筆記1 環境配置

Linux學習筆記1-CentOS7不能聯網、關閉防火墻

PHP:學習筆記(1)——環境配置

35、C#學習筆記1

十五、Hadoop學習筆記————Zookeeper的環境搭建

Angular2學習筆記.1、環境部署，基本概念，HelloAngular2

前言

Angular2官方文件

構建基礎目錄

開始

1、NPM

2、HelloAngular2

Component

Modules

啟動引導

index.html

3、執行

相關推薦