2.二、環境配置-AngularJS2 JavaScript 環境配置

時間 2019-11-19

標籤環境配置 angularjs2 angularjs javascript 欄目 AngularJS 简体版

原文原文鏈接

AngularJS2 JavaScript 環境配置

本章節咱們爲你們介紹如何配置 AngularJS2 的執行環境。javascript

本章節使用的是 JavaScript 來建立 Angular 的應用，固然你也可使用 TypeScript 和 Dart 來建立 Angular 應用。css

本章節使用到的文件目錄結構以下所示:html

建立配置文件

建立目錄

$ mkdir angular-quickstart
$ cd angular-quickstart

載入須要的庫

這裏咱們推薦使用 npm 來做爲包的管理工具，若是你還沒安裝npm或者不瞭解 npm 能夠查看咱們的教程：NPM 使用介紹。java

建立 package.json 文件，代碼以下所示：node

package.json 文件：web

{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "npm run lite",
"lite": "lite-server"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"@angular/upgrade": "2.0.0",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.23",
"angular2-in-memory-web-api": "0.0.20",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0"
}
}

因爲 npm 官網鏡像國內訪問太慢，這裏我使用了淘寶的npm鏡像，安裝方法以下：npm

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

執行後咱們就可使用 cnpm 命令來安裝模塊：json

$ cnpm install

執行成功後，angular-quickstart 目錄下就會生成一個 node_modules 目錄，這裏包含了咱們這個實例須要的模塊。bootstrap

建立 Angular 組件

組件（Component）是構成 Angular 應用的基礎和核心，一個組件包裝了一個特定的功能，而且組件之間協同工做以組裝成一個完整的應用程序。api

通常來講，一個組件就是一個用於控制視圖模板的JavaScript類。

接下來咱們在 angular-quickstart 建立一個 app 的目錄：

$ mkdir app
$ cd app

並添加組件文件 app.component.js ，內如以下：

app.component.js 文件：

ng.core.Component({
selector: 'my-app',
template: '<h1>個人第一個 Angular 應用</h1>'
})

接下來咱們來分析下以上代碼：

咱們經過鏈式調用全局Angular core命名空間ng.core中的Component和Class方法建立了一個名爲AppComponent的可視化組件。

Component方法接受一個包含兩個屬性的配置對象，Class方法是咱們實現組件自己的地方，在Class方法中咱們給組件添加屬性和方法，它們會綁定到相應的視圖和行爲。

模塊

Angular應用都是模塊化的，ES5沒有內置的模塊化系統，可使用第三方模塊系統，而後咱們爲應用建立獨立的命名空間 app，文件代碼能夠包裹在 IIFE（當即執行函數表達式）中：

(function(app) {
})(window.app || (window.app = {}));

咱們將全局app命名空間對象傳入IIFE中，若是不存在就用一個空對象初始化它。

大部分應用文件經過在app命名空間上添加東西來輸出代碼，咱們在app.component.js文件中輸出了AppComponent。

app.AppComponent =

Class定義對象

本實例中AppComponent類只有一個空的構造函數:

.Class({
	constructor: function() {}
});

當咱們要建立一個是有實際意義的應用時，咱們可使用屬性和應用邏輯來擴展這個對象。

Component 定義對象

ng.core.Component()告訴Angular這個類定義對象是一個Angular組件。傳遞給ng.core.Component()的配置對象有兩個字段：selector和template。

ng.core.Component({
selector: 'my-app',
template: '<h1>個人第一個 Angular 應用</h1>'
})

selector 爲一個宿主HTML元素定義了一個簡單的CSS選擇器my-app。當Angular在宿主HTML中遇到一個my-app元素時它建立並顯示一個AppComponent實例。

template 屬性容納着組建的模板。

添加 NgModule

Angular 應用由 Angular 模塊組成，該模塊包含了 Angular 應用所須要的組件及其餘任何東西。

接下來咱們建立 app/app.module.js 文件，內容以下：

app.module.js 文件：

(function(app) {
app.AppModule =
ng.core.NgModule({
imports: [ ng.platformBrowser.BrowserModule ],
declarations: [ app.AppComponent ],
bootstrap: [ app.AppComponent ]
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));

啓動應用

添加 app/main.js 文件：

app/main.js 文件：

(function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic
.platformBrowserDynamic()
.bootstrapModule(app.AppModule);
});
})(window.app || (window.app = {}));

咱們須要兩樣東西來啓動應用：

Angular 的 platformBrowserDynamic().bootstrapModule 函數。
上文中提到的應用根模塊 AppModule。

接下來建立 index.html，代碼以下所示：

index.html 文件：

<html>
<head>
<meta charset="utf-8">
<title>Angular 2 實例 - 菜鳥教程(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. 載入庫 -->
<!-- IE 須要 polyfill -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/@angular/core/bundles/core.umd.js"></script>
<script src="node_modules/@angular/common/bundles/common.umd.js"></script>
<script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
<script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
<script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
<!-- 2. 載入 'modules' -->
<script src='app/app.component.js'></script>
<script src='app/app.module.js'></script>
<script src='app/main.js'></script>
</head>
<!-- 3. 顯示應用 -->
<body>
<my-app>Loading...</my-app>
</body>
</html>

index.html 分析

一、載入咱們須要的JavaScript庫；
二、載入咱們本身的JavaScript文件，注意順序；
三、咱們在<body>標籤中添加<my-app>標籤。

執行過程爲：當 Angular 在 main.js 中調用 bootstrapModule 函數時，它讀取 AppModule 的元數據，在啓動組件中找到 AppComponent 並找到 my-app 選擇器，定位到一個名字爲 my-app 的元素，而後再這個標籤之間的載入內容。

添加一些樣式

styles.css 文件代碼爲：

styles.css 文件：

h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
body {
margin: 2em;
}

打開終端，輸入如下命令：

$ npm start

訪問 http://localhost:3000/，瀏覽器顯示結果爲：

這樣咱們的第一個 Angular2 的應用就算建立完成了，本文所使用的源碼能夠經過如下方式下載，不包含 node_modules。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。