Angular 2 JavaScript 環境配置
本章節我們為大家介紹如何配置 Angular 2 的執行環境。
本章節使用的是 JavaScript 來創建 Angular 的應用,當然你也可以使用 TypeScript 和 Dart 來創建 Angular 應用 。
本章節使用到的文件目錄結構如下所示:
創建配置文件
創建目錄
$ mkdir angular-quickstart $ cd angular-quickstart
載入需要的庫
這里我們推薦使用 npm 來作為包的管理工具,如果你還沒安裝npm或者不了解 npm 可以查看我們的教程:NPM 使用介紹。
創建 package.json 文件,代碼如下所示:
package.json 文件:
由於 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 文件:
接下來我們來分析下以上代碼:
我們通過鏈式調用全局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。
selector 為一個宿主HTML元素定義了一個簡單的CSS選擇器my-app。當Angular在宿主HTML中遇到一個my-app元素時它創建併顯示一個AppComponent實例。
template 屬性容納著組件的模板。
添加 NgModule
Angular 應用由 Angular 模塊組成,該模塊包含了 Angular 應用所需要的組件及其他任何東西。
接下來我們創建 app/app.module.js 文件,內容如下:
app.module.js 文件:
啟動應用
添加 app/main.js 文件:
app/main.js 文件:
我們需要兩樣東西來啟動應用:
- Angular 的 platformBrowserDynamic().bootstrapModule 函數。
- 上文中提到的應用根模塊 AppModule。
接下來創建 index.html,代碼如下所示:
index.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 文件:
打開終端,輸入以下命令:
$ 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
step5:進入項目目錄,併啟動服務器:
cd my-app ng serve --open
ng serve
命令會啟動開發服務器,監聽文件變化,併在修改這些文件時重新構建此應用。
Angular CLI 會安裝必要的 NPM 包、創建項目文件,併在該項目中生成一個簡單的默認應用。這可能要花一點時間。
現在 CODING 正在舉辦一場基於 Cloud Studio 工作空間的【我最喜愛的 Cloud Studio 插件評選大賽】。進入活動官網:https://studio.qcloud.coding.net/campaign/favorite-plugins/index,了解更多活動信息。