Angular搭建腳手架

一、安裝CLI:

cnpm install -g @angular/cli

//卸載: npm uninstall -g @angular/cli   npm cache clean

二、檢測是否成功:

ng –version  or  ng v

三、新建項目

ng new ng-app //ng-app能夠本身命名項目名稱

cd ng-app   //進入ng-app

ng serve     //啓服務

http://localhost:4200/ 訪問angular項目

四、項目結構說明

文件	說明
E2e	應用的端對端(e2e)測試，用 Jasmine 寫成並用 protractor 端對端測試運行器測試。
Node_modules	依賴包
Src
App	Angular應用文件
App.module.ts
App.component.ts
assets	資源文件
Environments	環境配置：開發、部署
Index.html	應用的宿主頁面。 它以特定的順序加載一些基本腳本。 而後它啓動應用，將根AppComponent放置到自定義<my-app>標籤裏。
Main.ts
Polyfills.ts	處理瀏覽器兼容問題
Tsconfig.app.json	Typescript編譯配置
Tsconfig.spec.json	Typescript測試編譯配置
Typings.d.ts	類型定義文件
//.angular-cli.json	Cli配置文件
.editorconfig	統一代碼風格工具配置，不支持的須要安裝插件
.gitignore	Git配置文件
//Karma.conf.js	在測試指南中提到的 karma 測試運行器的配置。
//Package.json	項目指定npm依賴包
Protractor.conf.js	protractor 端對端 (e2e) 測試器運行器的配置。
Tsconfig.json	Typescript編譯配置
Tslint.json	Typescript語法檢查器

4.1根目錄

1、三大目錄

e2e目錄：是端到端（end-to-end)測試；
mode_modules目錄：是angular6.1項目所依賴的第三方模塊庫文件；
src目錄：這時放置了咱們項目的全部文件。

2、其餘文件

.editorconfig：給你的編輯器看的一個簡單配置文件
.gitignore： git 排除文件
angular.json： angular cli 的配置文件
package.json：npm 配置文件，項目使用到的第三方依賴包
protractor.conf.js：運行 ng e2e 的時候會用到
README.md：項目的基礎文檔
tsconfig.json：TypeScript 編譯器的配置
tslint.json：運行 ng lint 時會用到

4.2根目錄下的src目錄

1、src下的三大目錄

app目錄：咱們要編寫的項目文件都在這個目錄下；
assets目錄：放置靜態資源；
environments目錄：環境文件目錄；

2、其餘文件

browserslist：前端工具之間共享[目標瀏覽器]的配置文件
favicon.ico：瀏覽器書籤欄中圖標
index.html：主頁面 HTML 文件
karma.conf.js：運行 ng test 時會用到它
main.ts：應用的主要入口點
polyfills.ts：膩子腳本（polyfill）能把瀏覽器對 Web不一樣點進行標準化
styles.css：全局樣式
test.ts：單元測試的主要入口點
tsconfig.app.json：TypeScript 編譯器的配置文件
tslint.json：額外的 Linting 配置

4.3根/src/app目錄

 

app.component.css：組件css樣式文件
app.component.html：組件html文件
app.component.spec.ts：單元測試文件
app.component.ts：組件typescript文件
app.module.ts：模塊文件，用來全局導入聲明模塊組件和服務等