深入理解angular2啟動專案步驟

2022-10-02 01:36:09 字數 2063 閱讀 8128

1. 建立專案資料夾

建立乙個新的資料夾來儲存你的專案,比如一開始有個self就好了

2.安裝基礎庫

首先確程式設計客棧保已經安裝了node.js

我們使用 npm package manager  來安裝需要的開發庫和開發工具。

開啟終端視窗,輸入下面的命令。

npm install

如果在執行npm install命令時沒有出現npm err!,一起都好。可能會有幾個npm warn訊息,這也沒有影響。

我們會經常在一連串的gyp err!(gyp: generate your project)訊息後看到乙個npm warn訊息。不用管他們。乙個包會使用node-gyp重新編譯自己。如果重新編譯失敗,包會恢復(gapmfvb場使用乙個預編譯版本),一切正常工作。

只要保證在npm install命令最後面沒有npm err!就好。

之後再執行下面的命令

npm init -y

npm i [email protected] --s**e --s**e-exact

npm i live-server --s**e-dev

這些命令將會建立名為 package.json 的專案檔案,安裝相應的軟體包,現在的 package.json 看起來應該如下所示。

,"devdependencies":

}還需要乙個 scripts 的配置節,找到並替換為如下的內容, 如果在你的檔案中沒有這個配置節, 那就加上好了. 

"scripts":

3. 第乙個 angular component

新增乙個名為 app.js 的檔案,輸入下面的內容。

var appcomponent = ng

.component()

.class()

component 方法需要乙個包含兩個屬性的配置物件。selecter 屬性告訴 angular 需要控制名為 "my-app" 的元素。一旦遇到 my-app 元素,angular 將會建立和顯示 appcomponent 例項

template 屬性定義了元件的可視外觀。在這個示例中,我們使用了內聯的模板,我們也可以把這個模板調整到乙個模板檔案中,然後通過 templateurl 來關聯模板檔案的名稱來使用它。

我們使用 class 方法實現這個元件本身的內容,可以定義屬性,方法並繫結到這個檢視

現在的元件是乙個最小化的實現,建構函式中沒有內容。在以後的示例中,我們會看到很多有趣的內容。

4. 啟動應用

我們需要在應用中做點什麼,在 app.js 的最後,新增下面的內容。

document.addeventlistener('domcontentloaded', function() );

我們等到瀏覽器通知我們說,內容已經載入完成了,然後再呼叫 bootstrap 方法。

bootstrap 方法通知 angular 使用 appcomponent 作為應用的根來啟動應用,

應該可以猜到, 在應用變得複雜的情況下, 我們會建立乙個 component 的樹來完成複雜的工作.

wrapped in an iife

我們不希望汙染全域性命名空間,但是,現在還www.cppcns.com不需要應用到命名空間,我們直接使用 iife ( immediately invoked function execution ) 來封裝我們的**。

(function() )

.class(

});document.addeventlistener('domcontentloaded', function() );

})();

5. 建立 index.html

在專案資料夾中新增名為 index.html 的頁面,內容如下:

angular 2 quickstart

在 head 中,我們的應用載入了兩個指令碼

angular2.sfx.dev.js, angular2 的開發庫

app.js, 我們剛剛開發的指令碼。

在 body 中,使用了名為 的元素,這是應用的根的佔位,angular 將在這裡顯示我們的應用。

本文標題: 深入理解angular2啟動專案步驟

本文位址:

angular2的生命週期理解

1.對於一些通過輸入介面給元件傳值,元件對傳遞的值需要做處理的操作,一般放在ngoninit中。ngoninit 是 angular 2 元件生命週期中的乙個鉤子,angular 2 中的所有鉤子和呼叫順序如下 ngonchanges 當資料繫結輸入屬性的值發生變化時呼叫 ngoninit 在第一次...

深入理解 Oracle 啟動原理

當oracle啟動時,初始化引數檔案的載入順序為 spfilesid.ora spfile.ora initsid.ora 資料庫處於shutdown狀態 資料庫處於停止狀態。不能接受外界資料請求。使用作業系統命令ps ef grep ora看不到任何資料庫程序的存在,啟動指令碼問dbstart 資...

angular2專案教程 微型Blog系統1

照應的ppt 1.ng build prod aot angular cli會在專案根目錄下生成乙個dist目錄,裡面就是編譯 壓縮好的檔案了。2.ng serve 啟動服務,修改了檔案,瀏覽器改變 3.ng serve prod aot 就會 變小 建立乙個元件 ng g c user user....