有關angular4的一些介紹

理論篇

1、目錄結構

 

 

package.json配置文件

當運行npm run build 是，會自動找package.json配置文件。

說明

module：組織代碼的方式

target：編譯目標平臺（ES三、ES五、ES6等）

sourceMap:把ts文件編譯成JS文件時，是否生成對應的SourceMap文件

emitDecoratorMetadata：把TypeScript支持爲帶有裝飾器的聲明生成元數據

experimentalDecorators：是否啓用實驗性裝飾器特性

typeRoots：指定第三方庫的類型定義文件的存放位置，推薦使用node_modules/@types文件夾

 

src目錄是存放項目具體資源的地方。包括app等

 

app.component.html 網頁的配置文件，寫的是網頁內容

 

 

 

app.module.ts 是定義模塊的配置文件

 

說明

@NgModule：用於定義模塊用的裝飾器

Declarations：導入模塊依賴的組件、指令等

Imports：用來導入當前模塊所需的其餘模塊

BrowserModule模塊註冊了一些關鍵的Provider和通用的指令，在imports屬性中配置，做爲公用模塊供全局調用。

Bootstrap：標記出引導組件，在Angular啓動應用時，將被標記的組件渲染到模板中。

 

 

main.ts  文件的入口文件，串聯整個項目

 

 

index.html

在根目錄下，是訪問網頁的主頁面

 

2、簡單的建立項目

一、實現的效果

 

 

 

二、建立工做目錄並建立主要的配置文件

1. package.json 用來標記出本項目所需的 npm 依賴包。
2. tsconfig.json 定義了 TypeScript 編譯器如何從項目源文件生成 JavaScript 代碼。
3. typings.json 爲那些 TypeScript 編譯器沒法識別的庫提供了別的定義文件。

npm init 命令是初始化package.json內容的。

二、安裝ng2的相關依賴庫，用nmp

1. npm install xxxpackage --save-dev

2. npm install xxxpackage --save

3. npm install xxxpackage -g

 

三、添加typescript庫

ng2首選使用ts開發，npm安裝ts，提示你們使用全局和局部安裝方法，好處是全局使用

npm install typescript -g

npm install -g typescript@2.0.6

npm install typescript --save-dev

 

四、建立應用和組件

mkdir src

cd src

mkdir app

 

五、啓動應用

在APP同級目錄下穿件文件@main.ts

六、主頁面index.html

七、編譯運行ng2

添加配置文件tsconfig.json 更好的設置tsc編譯所需參數。

{

  "compilerOptions":{

    "target": "es5",

    "experimentalDecorators": true,

    "emitDecoratorMetadata": true

  }

}

 

八、安裝typings工具

npm install --save-dev typings

$(npm bin)/typings -v

$(npm bin)/typings search core-js

$(npm bin)/typings install --global --save dt~core-js

 

完成上述 幾個步驟，就能夠看到 根目錄多了 文件夾 typings , typings.json 。 
他們的做用就是爲了解決上述提到 tsc 編譯 ng2出現了error。

再次執行 $(npm bin)/tsc --rootDir src --outDir dist 就沒有任何問題了！

 

npm build  和 npm run build 的區別

npm ubild 是npm run build 的簡寫。

npm run build 能夠指定運行scripts中的任何條目

 

npm的命令集

 

npm install --save 和npm install --save-dev的區別

npm install --save

• 會把msbuild包安裝到node_modules目錄中
• 會在package.json的dependencies屬性下添加msbuild
• 以後運行npm install命令時，會自動安裝msbuild到node_modules目錄中
• 以後運行npm install --production或者註明NODE_ENV變量值爲production時，會自動安裝msbuild到node_modules目錄中

npm install --save-dev

• 會把msbuild包安裝到node_modules目錄中
• 會在package.json的devDependencies屬性下添加msbuild
• 以後運行npm install命令時，會自動安裝msbuild到node_modules目錄中
• 以後運行npm install --production或者註明NODE_ENV變量值爲production時，不會自動安裝msbuild到node_modules目錄中

 

使用原則:

運行時須要用到的包使用--save，不然使用--save-dev。

 

構建命令示例

命令	做用	說明
npm run dev	開發構建	會開啓監聽, 執行開發環境的構建
npm run build	正式構建	會先清理構建的結果, 再執行正式環境的構建
npm run build:css	構建 CSS	支持參數: --watch 是否開啓監聽, 文件改動後自動再次執行構建 --env=dev 指定構建的環境 例如: npm run build:css -- --env=dev

 

# these are equivalent

ng build --target=production --environment=prod

ng build --prod --env=prod

ng build --prod

# and so are these

ng build --target=development --environment=dev

ng build --dev --e=dev

ng build --dev

ng build

 

 

 

npm install -g angular-cli

ng build -prod

git clone https://github.com/angular/angular-cli.git cd angular-cli npm link

npm link與npm install -g很是類似，只是從repo下載軟件包，而剛剛克隆的angular-cli/文件夾變成了全局軟件包。 對angular-cli/文件夾中的文件所作的任何更改都將當即影響全局angular-cli軟件包，從而能夠快速測試對cli項目所作的任何更改。

 

如今你能夠經過命令行使用angular-cli了：

 

 ng new foo cd foo npm link angular-cli ng server

npm link angular-cli是須要的，由於默認狀況下全局安裝的angular-cli只是加載了從npm遠程獲取的項目中的本地angular-cli 。 npm link angular-cli將全局angular-cli包符號連接到本地angular-cli包。 如今你克隆的angular-cli有三個地方：你克隆的文件夾，npm的文件夾，它存儲全局包和剛建立的angular-cli項目。