top
Loading...
Angular 2 JavaScript 環境配置

Angular 2 JavaScript 環境配置

本章節我們為大家介紹如何配置 Angular 2 的執行環境。

本章節使用的是 JavaScript 來創建 Angular 的應用,當然你也可以使用 TypeScript 和 Dart 來創建 Angular 應用 。

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


創建配置文件

創建目錄

$ mkdir angular-quickstart
$ cd angular-quickstart

載入需要的庫

這里我們推薦使用 npm 來作為包的管理工具,如果你還沒安裝npm或者不了解 npm 可以查看我們的教程:NPM 使用介紹

創建 package.json 文件,代碼如下所示:


package.json 文件:

{ "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 install -g cnpm --registry=https://registry.npm.taobao.org

執行後我們就可以使用 cnpm 命令來安裝模塊:

$ cnpm install

執行成功後,angular-quickstart 目錄下就會生成一個 node_modules 目錄,這里包含了我們這個實例需要的模塊。


創建 Angular 組件

組件(Component)是構成 Angular 應用的基礎和核心,一個組件包裝了一個特定的功能,併且組件之間協同工作以組裝成一個完整的應用程序。

一般來說,一個組件就是一個用於控製視圖模板的JavaScript類。

接下來我們在 angular-quickstart 創建一個 app 的目錄:

$ mkdir app
$ cd app

併添加組件文件 app.component.js ,內容如下:

app.component.js 文件:

(function(app) { app.AppComponent = ng.core.Component({ selector: 'my-app', template: '<h1>我的第一個 Angular 應用</h1>' }) .Class({ constructor: function() {} }); })(window.app || (window.app = {}));

接下來我們來分析下以上代碼:

我們通過鏈式調用全局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 實例 - 教程</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 分析

  • 1、載入我們需要的JavaScript庫;
  • 2、載入我們自己的JavaScript文件,注意順序;
  • 3、我們在<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。


在 Cloud Studio 中使用 AngularJS2

  • step1:訪問 騰訊云開發者平台,注冊/登錄賬戶。

  • step2:在右側的運行環境菜單選擇:"Node.js"

  • step3:然後全局安裝 Angular CLI:

    npm install -g @angular/cli
  • step4:創建新項目,運行下列命令來生成一個新項目以及默認的應用代碼:

    ng new my-app
  • Angular CLI 會安裝必要的 NPM 包、創建項目文件,併在該項目中生成一個簡單的默認應用。這可能要花一點時間。

  • step5:進入項目目錄,併啟動服務器:

    cd my-app
    ng serve --open

    ng serve 命令會啟動開發服務器,監聽文件變化,併在修改這些文件時重新構建此應用。

現在 CODING 正在舉辦一場基於 Cloud Studio 工作空間的【我最喜愛的 Cloud Studio 插件評選大賽】。進入活動官網:https://studio.qcloud.coding.net/campaign/favorite-plugins/index,了解更多活動信息。

北斗有巢氏 有巢氏北斗