小編給大家分享一下如何使用Angular CLI快速創(chuàng)建Angular項目，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站建設、網(wǎng)站重做改版、寶山網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、html5、商城網(wǎng)站建設、集團公司官網(wǎng)建設、外貿(mào)網(wǎng)站建設、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為寶山等各大城市提供網(wǎng)站開發(fā)制作服務。

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

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

一：用命令行新建一個項目

ng new newApp --skip-install
cd newApp
cnpm install
ng serve --open

執(zhí)行上面的命令就會自動新建一個Angualr項目，并啟動了項目。

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

二：目錄結構

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

1.src：應用代碼存放的地方；

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

3.src/assets：圖片等存放的地方，構建時會復制到發(fā)布包里；

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

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

import { NgModule } from '@angular/core';
import { MyComponent } from './my.component';
@NgModule({
  declarations: [
    MyComponent
  ]  
})
......

現(xiàn)在已經(jīng)注冊好了，你就可以使用了，上面的例子的使用方法很簡單，就是自定義了一個標簽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" }
    ];
  }  
}

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

import { Component } from '@angular/core';
import { MyServ } from './my.service';
@Component({
  providers: [MyServ]  
})

服務的使用也很簡單，我們這里用構造函數(shù)來演示一下：

import { MyServ } from './my.service';
......
export class MyComponent {
  dataList: any[];  
  constructor(private demoService: MyServ) {
     this.dataList = this.demoService.getData();
    }  
}

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

五：路由的使用

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

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

首先需要確定index.html頁面的head標簽中定義好了<base href="/" rel="external nofollow" >或動態(tài)生成該元素的腳本。

我們先在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]  
})
......

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

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

看完了這篇文章，相信你對“如何使用Angular CLI快速創(chuàng)建Angular項目”有了一定的了解，如果想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)頁名稱：如何使用AngularCLI快速創(chuàng)建Angular項目-創(chuàng)新互聯(lián)
標題鏈接：http://www.rwnh.cn/article48/dosdep.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供電子商務、網(wǎng)站排名、面包屑導航、虛擬主機、商城網(wǎng)站、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)