摘要：開(kāi)始項(xiàng)目前，你需要先安裝和，然后執(zhí)行安裝。一用命令行新建一個(gè)項(xiàng)目執(zhí)行上面的命令就會(huì)自動(dòng)新建一個(gè)項(xiàng)目，并啟動(dòng)了項(xiàng)目。

作者：心葉
時(shí)間：2018-04-22 09:13

Angular CLI是一個(gè)命令行界面工具，它可以創(chuàng)建項(xiàng)目、添加文件以及執(zhí)行一大堆開(kāi)發(fā)任務(wù)，比如測(cè)試、打包和發(fā)布，這里的快速開(kāi)始就是基于這個(gè)命令。

開(kāi)始項(xiàng)目前，你需要先安裝node和npm，然后執(zhí)行npm install -g @angular/cli安裝Angular CLI。

ng new newApp --skip-install

cd newApp

cnpm install

ng serve --open

執(zhí)行上面的命令就會(huì)自動(dòng)新建一個(gè)Angualr項(xiàng)目，并啟動(dòng)了項(xiàng)目。

其中--skip-install表示node包先不安裝，我們接著使用cnpm install安裝會(huì)快多了。

現(xiàn)在來(lái)看看ng命令幫助我們生成了什么，也就是項(xiàng)目的目錄結(jié)構(gòu)，里面都是干什么的，先有個(gè)大致了解，你可以不知道全部，不過(guò)先記住下面幾個(gè)個(gè)人感覺(jué)重要的：

1.src：應(yīng)用代碼存放的地方；

2.src/app：你的代碼主要存放的地方，這樣說(shuō)也許不合適，不過(guò)你開(kāi)發(fā)的時(shí)候，大部分時(shí)間都是在修改這里的代碼；

3.src/assets：圖片等存放的地方，構(gòu)建時(shí)會(huì)復(fù)制到發(fā)布包里；

4.src/main.js：你基本不會(huì)修改它，它是程序的主入口；

5.src/styles.css：特別用的樣式寫(xiě)在對(duì)應(yīng)的地方，后面會(huì)說(shuō)，對(duì)于公共的樣式就會(huì)寫(xiě)在這里；

6.karma.conf.js：給Karma的單元測(cè)試配置，當(dāng)運(yùn)行ng test時(shí)會(huì)用到它。

import { Component } from "@angular/core";

@Component({

    selector: "my-comp",
    
    template: "
ID:{{row.id}}  INFO:{{row.info}}
",
    
    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" }
    ];
    
}

上面就已經(jīng)定義好了一個(gè)非常簡(jiǎn)單的組件，不過(guò)在使用前，你還需要在模塊中定義，此時(shí)就是src/app/app.module.ts中注冊(cè)：

import { NgModule } from "@angular/core";

import { MyComponent } from "./my.component";

@NgModule({

    declarations: [
        MyComponent
    ]
    
})
......

現(xiàn)在已經(jīng)注冊(cè)好了，你就可以使用了，上面的例子的使用方法很簡(jiǎn)單，就是自定義了一個(gè)標(biāo)簽my-comp，和普通的div的用法一模一樣。

需要注意的是，為了方便查看，在注冊(cè)的例子中我去掉了無(wú)關(guān)的代碼，實(shí)際情況還好有包括啟動(dòng)，別的組件，服務(wù)等的注冊(cè)，你可以看看命令行自動(dòng)生成的別的指令，這里主要還是說(shuō)明更重要的東西，下同。

類似AngularJS，Angular的selector除了上面的自定義標(biāo)簽，還有別的：

1.selector: "element-name"http://自定義標(biāo)簽選擇器；

2.selector: ".class"http://樣式選擇器；

3.selector: "[attribute]"http://屬性選擇器；

4.selector: "[attribute=value]"http://屬性值選擇器；

5.selector: ":not(sub_selector)"http://取反選擇器；

6.selector: "selector1, selector2"http://多種選擇器。

和組件一樣，我們先來(lái)定義一個(gè)服務(wù)。

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" }
        ];
    }
    
}

接著來(lái)注冊(cè)它，服務(wù)和組件在注冊(cè)上有點(diǎn)不同，我們現(xiàn)在先注冊(cè)在主組件上面吧，默認(rèn)就是在arc/app/app.component.ts文件中注冊(cè)：

import { Component } from "@angular/core";

import { MyServ } from "./my.service";

@Component({

    providers: [MyServ]
    
})

服務(wù)的使用也很簡(jiǎn)單，我們這里用構(gòu)造函數(shù)來(lái)演示一下：

import { MyServ } from "./my.service";
......

export class MyComponent {

    dataList: any[];
    
    constructor(private demoService: MyServ) {
    
      this.dataList = this.demoService.getData();
      
    }
    
}

還記得自定義組件的代碼嗎？我們就在其中演示了服務(wù)的用法，上面只給出了修改的部分代碼。

我們這里給出路由的一個(gè)簡(jiǎn)單用法，具體的細(xì)節(jié)和上面的類似，會(huì)多帶帶再去討論，這篇文章的目的就是快速入門(mén)使用。

為了方便演示，我們默認(rèn)已經(jīng)定義好了二個(gè)組件：MyComponent和My2Component。

首先需要確定index.html頁(yè)面的head標(biāo)簽中定義好了或動(dòng)態(tài)生成該元素的腳本。

我們先在src/app/app.module.ts中注冊(cè)路由：

......
import { RouterModule } from "@angular/router";

@NgModule({

    declarations: [MyComponent,My2Component],
    
    imports: [
    
        RouterModule.forRoot([
        
            {path: "my",component: MyComponent},
            
            {path: "my2",component: My2Component}
            
        ])
    ]
    ......
})
......

使用就很簡(jiǎn)單了：

toMycomp

toMy2comp

點(diǎn)擊toMycomp或者toMy2comp就會(huì)跳轉(zhuǎn)對(duì)應(yīng)的路由設(shè)置的組件了。

由于@angular/http庫(kù)中的HttpModule保存著http相關(guān)的服務(wù)，需要先引入進(jìn)來(lái)（這里是在src/app/app.module.ts中引入）：

import { HttpModule }    from "@angular/http";

@NgModule({

    imports: [HttpModule]
    
})
......

現(xiàn)在，http就是一個(gè)服務(wù)，下面簡(jiǎn)單演示一種用法：

......
import { Http } from "@angular/http";
......

    constructor(private http: Http) {
    
        http.get("assets/XXX.json").forEach(function (data) {
        
            console.log(data["_body"]);
            
        });
        
    }
    
......