三大前端項目就剩angular沒學了，在網上找了幾個教程，這里總結一下，方便以后用到時查閱
創建項目
首先安裝cli工具
npm install -g @angular/cli
創建一個空項目, 有兩處要選擇的，一個是路由，我這里是要路由的，還有一個開發css的語言，我這里選擇scss，就不截圖了，選完后會自動通過yarn安裝依賴，稍等一會就好了
ng new pybbs-front-angular
創建好了，運行 npm run start 或者 ng serve 啟動服務，然后就可以在瀏覽器里打開 http://localhost:4200/ 地址查看啟動后的首頁了
創建組件
命令 ng g component user 執行完后，會在 src/app 目錄下生成一個user的文件夾，里面有四個文件
如果想把組件都放在一個文件夾里管理，也可以在創建的時候加上一個文件夾名字，比如把所有的組件都放在 components 文件夾里，命令就是這樣的 ng g component components/user
| 頁面名 | 說明 |
|---|---|
| user.component.html | 組件模板文件 |
| user.component.scss | 組件的樣式文件 |
| user.component.spec.ts | 組件測試文件 |
| user.component.ts | 組件文件 |
使用命令創建組件有個好處就是cli會自動把這個組件引入到 src/app/app.module.ts 文件里，這樣直接在其它文件里使用 src/app/user/user.component.ts里定義的selector,一般這個名字都是 app-xxx 后面xxx就是這個模塊的名字，比如這里的user模塊，就是 app-user
生命周期
angular的生命周期有很多，看下下圖
這里只介紹二個
| 方法 | 說明 |
|---|---|
| ngOnInit | 組件加載時初始化變量或者網絡請求時代碼寫在這里面 |
| ngAfterViewInit | 如果想對頁面進行dom操作，最好在這個方法里操作，這個方法是在頁面dom元素都加載完成后才調用的 |
創建服務
命令 ng g service user 執行完后，cli會自動創建兩個文件在 src/app/user 文件夾里
如果想把服務也都放在一個文件夾里管理，可以在命令上加上一個服務的文件夾名字，如 ng g service services/user
| 服務文件名 | 說明 |
|---|---|
| user.service.ts | 組件提供服務的主文件 |
| user.service.spec.ts | 組件提供服務文件的測試文件，寫對服務測試的代碼都放在這里面 |
服務創建好了之后，沒有創建組件那么方便了，還需要自己配置一下，打開 src/app/app.component.ts 文件
在文件內引入，然后將服務注入到 providers 里
import { UserService } from './user/user.service';@NgModule({ providers: [ UserService ]})首先添加一個服務 user.service.ts
import { Injectable } from '@angular/core';import { HttpClient, HttpHeaders } from '@angular/common/http';import { Observable } from 'rxjs';@Injectable({ providedIn: 'root'})export class TopicService { constructor(private http: HttpClient) { } fetchGithubApi() { return new Observable((observe) => { const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) }; this.http.get('https://api.github.com', httpOptions) .subscribe((data: any) => { observe.next(data.detail); // 如果有錯誤，通過 error() 方法將錯誤返回 // observe.error(data.description); }); }); }}打開 user.component.ts 文件，使用這個服務里定義的方法，代碼如下
引入服務文件，然后初始化，這里初始化有兩種方式，一種 private userService: UserService = new UserService()，另一種是通過構造方法注入
import { Component, OnInit } from '@angular/core';import { ActivatedRoute } from '@angular/router';import { UserService } from './user.service';@Component({ selector: 'app-user', templateUrl: './user.component.html', styleUrls: ['./user.component.scss']})export class UserComponent implements OnInit { constructor( private userService: UserService ) { } ngOnInit() { this.userService.fetchGithubApi() .subscribe(data => console.log(data), error => console.log(error)); }}說明：上面例子中請求接口用的是 angular 內置好的 rxjs 模塊，你也可以換成流行的 axios 或者其它的框架
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
