作者：心恭弘=叶 恭弘
時刻：2018-04-22 09:13
Angular CLI是一個敕令行界面東西，它能夠建立項目、增加文件以及實行一大堆開闢使命，比方測試、打包和宣布，這裏的疾速最先就是基於這個敕令。
最先項如今，你須要先裝置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，和一般的div的用法如出一轍。
須要注重的是，為了輕易檢察，在註冊的例子中我去掉了無關的代碼，實際情況還好有包含啟動，別的組件，效勞等的註冊，你能夠看看敕令行自動天生的別的指令，這裏重要照樣申明更重要的東西，下同。
相似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標籤中定義好了<base href=”/”>或動態天生該元素的劇本。
我們先在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']);
});
}
......