這次帶給大家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='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 CLI怎樣實作一個Angular項目的詳細內容。更多資訊請關注PHP中文網其他相關文章!