這次帶給大家Angular CLI創建Angular專案步驟詳解，Angular CLI創建Angular專案的注意事項有哪些，以下就是實戰案例，一起來看一下。
開始專案前，你需要先安裝node和npm，然後執行npm install -g @angular/cli安裝Angular CLI。
一：用命令列新建一個項目
ng new newApp --skip-install
cd newApp
cnpm install
ng serve --open
登入後複製
執行上面的指令就會自動新建一個Angualr項目，並啟動了專案。
其中--skip-install表示node套件先不安裝，我們接著使用cnpm install安裝會快多了。
二：目錄結構
現在來看看ng指令幫助我們產生了什麼，也就是專案的目錄結構，裡面都是做什麼的，先有個大致了解，你可以不知道全部，不過先記住下面幾個個人感覺重要的：
1.src：應用程式碼存放的地方；
2 .src/app：你的程式碼主要存放的地方，這樣說也許不合適，不過你開發的時候，大部分時間都是在修改這裡的程式碼；
3.src/assets：圖片等存放的地方，建置時會複製到發布套件裡；
4.src/main.js：你基本上不會修改它，它是程式的主入口；
5.src /styles.css：特別用的樣式寫在對應的地方，後面會說，對於公共的樣式就會寫在這裡；
6.karma.conf.js：給Karma的單元測試配置，當運行ng test時會用到它。
三：自定義元件
import { Component } from '@angular/core';
@Component({
selector: 'my-comp',
template: '<ul><li *ngFor='let row of dataList'>ID:{{row.id}} INFO:{{row.info}}</li></ul>',
styles: [`ul{background-color: antiquewhite;padding-left: 10px;list-style: none;}`]
})
export class MyComponent {
dataList = [
{ id: 1, info: "Angular" },
{ id: 2, info: "React" },
{ id: 3, info: "Vue" }
];
}登入後複製
上面就已經定義了一個非常簡單的元件，不過在使用前，你還需要在模組中定義，此時就是src/app/app.module.ts中註冊：
import { NgModule } from '@angular/core';
import { MyComponent } from './my.component';
@NgModule({
declarations: [
MyComponent
]
})
......登入後複製
現在已經註冊好了，你就可以使用了，上面的例子的使用方法很簡單，就是自訂了一個標籤my-comp，和普通的p的用法一模一樣。
要注意的是，為了方便查看，在註冊的例子中我去掉了無關的程式碼，實際情況還好有包括啟動，別的元件，服務等的註冊，你可以看看命令列自動產生的別的指令，這裡主要還是說明更重要的東西，下同。
類似AngularJS，Angular的selector除了上面的自訂標籤，還有別的：
1.selector: 'element-name'//自訂標籤選擇器;
2.selector: '.class'//樣式選擇器;
3.selector: '[attribute]'//屬性選擇器；
4.selector: '[attribute=value]'//屬性值選擇器；
5.selector: ':not(sub_selector)'//取反選擇器；
6.selector: 'selector1, selector2'//多種選擇器。
四：自訂服務
和元件一樣，我們先來定義一個服務。
import { Injectable } from '@angular/core';
export class DataFormat {
id: number;
info: string;
}
@Injectable()
export class MyServ {
getData(): DataFormat[] {
return [
{ id: 1, info: "Angular" },
{ id: 2, info: "React" },
{ id: 3, info: "Vue" }
];
}
}登入後複製
接著來註冊它，服務和元件在註冊上有點不同，我們現在先註冊在主元件上面吧，預設就是在arc/app/app.component.ts檔案中註冊：
import { Component } from '@angular/core';
import { MyServ } from './my.service';
@Component({
providers: [MyServ]
})登入後複製
服務的使用也很簡單，我們這裡用建構函數來示範：
import { MyServ } from './my.service';
......
export class MyComponent {
dataList: any[];
constructor(private demoService: MyServ) {
this.dataList = this.demoService.getData();
}
}登入後複製
還記得自訂元件的程式碼嗎？我們就在其中示範了服務的用法，上面只給了修改的部分程式碼。
五：路由的使用
我們這裡給出路由的一個簡單用法，具體的細節和上面的類似，會單獨再去討論，這篇文章的目的是快速入門使用。
為了方便演示，我們預設已經定義了二個元件：MyComponent和My2Component。
首先需要確定index.html頁面的head標籤中定義好了或動態產生該元素的腳本。
我們先在src/app/app.module.ts中註冊路由：
......
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [MyComponent,My2Component],
imports: [
RouterModule.forRoot([
{path: 'my',component: MyComponent},
{path: 'my2',component: My2Component}
])
]
......
})
......登入後複製
使用就很簡單了：
<a routerLink="/my">toMycomp</a>
<a routerLink="/my2">toMy2comp</a>
<router-outlet></router-outlet>
登入後複製
点击toMycomp或者toMy2comp就会跳转对应的路由设置的组件了。
六：HTTP
由于@angular/http库中的HttpModule保存着http相关的服务，需要先引入进来（这里是在src/app/app.module.ts中引入）：
import { HttpModule } from '@angular/http';
@NgModule({
imports: [HttpModule]
})
......登入後複製
现在，http就是一个服务，下面简单演示一种用法：
......
import { Http } from '@angular/http';
......
constructor(private http: Http) {
http.get('assets/XXX.json').forEach(function (data) {
console.log(data['_body']);
});
}
......登入後複製
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Angular+Font-Awesome步骤详解
源生js实现哈夫曼编码步骤详解
以上是Angular CLI創建Angular專案步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
