溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“angular2創(chuàng)建和啟動項目的步驟”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“angular2創(chuàng)建和啟動項目的步驟”吧!
1. 創(chuàng)建項目文件夾
創(chuàng)建一個新的文件夾來保存你的項目，比如一開始有個self就好了
2.安裝基礎庫
首先確保已經安裝了node.js
我們使用 npm package manager 來安裝需要的開發(fā)庫和開發(fā)工具。
打開終端窗口，輸入下面的命令。
npm install
如果在執(zhí)行npm install命令時沒有出現(xiàn)npm ERR!，一起都好?？赡軙袔讉€npm WARN消息，這也沒有影響。
我們會經常在一連串的gyp ERR!（gyp: generate your project）消息后看到一個npm WARN消息。不用管他們。一個包會使用node-gyp重新編譯自己。如果重新編譯失敗，包會恢復（場使用一個預編譯版本），一切正常工作。
只要保證在npm install命令最后面沒有npm ERR!就好。
之后再執(zhí)行下面的命令
npm init -y npm i angular2@2.0.0-alpha.44 --save --save-exact npm i live-server --save-dev
這些命令將會創(chuàng)建名為 package.json 的項目文件，安裝相應的軟件包，現(xiàn)在的 package.json 看起來應該如下所示。
{
"name": "angular2-getting-started",
"version": "1.0.0",
"dependencies": {
"angular2": "2.0.0-alpha.44"
},
"devDependencies": {
"live-server": "^0.8.1"
}
}還需要一個 scripts 的配置節(jié)，找到并替換為如下的內容, 如果在你的文件中沒有這個配置節(jié), 那就加上好了.
"scripts": {
"start": "live-server"
}3. 第一個 Angular Component
添加一個名為 app.js 的文件，輸入下面的內容。
var AppComponent = ng
.Component({
selector: 'my-app',
template: '<h2>My First Angular 2 App</h2>'
})
.Class({
constructor: function () { }
});我們正在創(chuàng)建一個名為 AppComponent 的可視組件，通過使用全局的 ng 命名空間下的 Component 和 Class 方法來完成。
var AppComponent = ng
.Component({...})
.Class({...})Component 方法需要一個包含兩個屬性的配置對象。selecter 屬性告訴 Angular 需要控制名為 "my-app" 的元素。一旦遇到 my-app 元素，Angular 將會創(chuàng)建和顯示 AppComponent 實例
template 屬性定義了組件的可視外觀。在這個示例中，我們使用了內聯(lián)的模板，我們也可以把這個模板調整到一個模板文件中，然后通過 templateUrl 來關聯(lián)模板文件的名稱來使用它。
我們使用 Class 方法實現(xiàn)這個組件本身的內容，可以定義屬性，方法并綁定到這個視圖
現(xiàn)在的組件是一個最小化的實現(xiàn)，構造函數(shù)中沒有內容。在以后的示例中，我們會看到很多有趣的內容。
4. 啟動應用
我們需要在應用中做點什么，在 app.js 的最后，添加下面的內容。
document.addEventListener('DOMContentLoaded', function() {
ng.bootstrap(AppComponent);
});我們等到瀏覽器通知我們說，內容已經加載完成了，然后再調用 bootstrap 方法。
bootstrap 方法通知 Angular 使用 AppComponent 作為應用的根來啟動應用，
應該可以猜到, 在應用變得復雜的情況下, 我們會創(chuàng)建一個 Component 的樹來完成復雜的工作.
Wrapped in an IIFE
我們不希望污染全局命名空間，但是,現(xiàn)在還不需要應用到命名空間，我們直接使用 IIFE ( Immediately Invoked Function Execution ) 來封裝我們的代碼。
(function() {
var AppComponent = ng
.Component({
selector: 'my-app',
template: '<h2>My First Angular 2 App</h2>'
})
.Class({
constructor: function () { }
});
document.addEventListener('DOMContentLoaded', function() {
ng.bootstrap(AppComponent);
});
})();5. 創(chuàng)建 index.html
在項目文件夾中添加名為 index.html 的頁面，內容如下：
<html> <head> <title>Angular 2 QuickStart</title> <script src="node_modules/angular2/bundles/angular2.sfx.dev.js"></script> <script src="app.js"></script> </head> <body> <my-app></my-app> </body> </html>
在 head 中，我們的應用加載了兩個腳本
angular2.sfx.dev.js, Angular2 的開發(fā)庫
app.js, 我們剛剛開發(fā)的腳本。
在 body 中，使用了名為 <my-app> 的元素，這是應用的根的占位，Angular 將在這里顯示我們的應用。
到此，相信大家對“angular2創(chuàng)建和啟動項目的步驟”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。
