首頁  >  文章  >  web前端  >  Angular CLI怎樣實作一個Angular項目

Angular CLI怎樣實作一個Angular項目

php中世界最好的语言
php中世界最好的语言原創
2018-06-06 15:26:291458瀏覽

這次帶給大家Angular CLI怎樣實現一個Angular項目,Angular CLI怎樣實現Angular項目的注意事項有哪些,以下就是實戰案例,一起來看一下。

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=&#39;let row of dataList&#39;>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中文网其它相关文章!

推荐阅读:

移动端怎样做出上拉下滑刷新加载

Vue做出弹窗功能(附代码)

以上是Angular CLI怎樣實作一個Angular項目的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn