Angular7創(chuàng)建項(xiàng)目、組件、服務(wù)以及服務(wù)的使用
三大前端項(xiàng)目就剩angular沒(méi)學(xué)了,在網(wǎng)上找了幾個(gè)教程,這里總結(jié)一下,方便以后用到時(shí)查閱
創(chuàng)建項(xiàng)目
首先安裝cli工具
npm install -g @angular/cli
創(chuàng)建一個(gè)空項(xiàng)目, 有兩處要選擇的,一個(gè)是路由,我這里是要路由的,還有一個(gè)開(kāi)發(fā)css的語(yǔ)言,我這里選擇scss,就不截圖了,選完后會(huì)自動(dòng)通過(guò)yarn安裝依賴,稍等一會(huì)就好了
ng new pybbs-front-angular
創(chuàng)建好了,運(yùn)行 npm run start 或者 ng serve 啟動(dòng)服務(wù),然后就可以在瀏覽器里打開(kāi) http://localhost:4200/ 地址查看啟動(dòng)后的首頁(yè)了
創(chuàng)建組件
命令 ng g component user 執(zhí)行完后,會(huì)在 src/app 目錄下生成一個(gè)user的文件夾,里面有四個(gè)文件
如果想把組件都放在一個(gè)文件夾里管理,也可以在創(chuàng)建的時(shí)候加上一個(gè)文件夾名字,比如把所有的組件都放在 components 文件夾里,命令就是這樣的 ng g component components/user
| 頁(yè)面名 | 說(shuō)明 |
|---|---|
| user.component.html | 組件模板文件 |
| user.component.scss | 組件的樣式文件 |
| user.component.spec.ts | 組件測(cè)試文件 |
| user.component.ts | 組件文件 |
使用命令創(chuàng)建組件有個(gè)好處就是cli會(huì)自動(dòng)把這個(gè)組件引入到 src/app/app.module.ts 文件里,這樣直接在其它文件里使用 src/app/user/user.component.ts里定義的selector,一般這個(gè)名字都是 app-xxx 后面xxx就是這個(gè)模塊的名字,比如這里的user模塊,就是 app-user
生命周期
angular的生命周期有很多,看下下圖
這里只介紹二個(gè)
| 方法 | 說(shuō)明 |
|---|---|
| ngOnInit | 組件加載時(shí)初始化變量或者網(wǎng)絡(luò)請(qǐng)求時(shí)代碼寫(xiě)在這里面 |
| ngAfterViewInit | 如果想對(duì)頁(yè)面進(jìn)行dom操作,最好在這個(gè)方法里操作,這個(gè)方法是在頁(yè)面dom元素都加載完成后才調(diào)用的 |
創(chuàng)建服務(wù)
命令 ng g service user 執(zhí)行完后,cli會(huì)自動(dòng)創(chuàng)建兩個(gè)文件在 src/app/user 文件夾里
如果想把服務(wù)也都放在一個(gè)文件夾里管理,可以在命令上加上一個(gè)服務(wù)的文件夾名字,如 ng g service services/user
| 服務(wù)文件名 | 說(shuō)明 |
|---|---|
| user.service.ts | 組件提供服務(wù)的主文件 |
| user.service.spec.ts | 組件提供服務(wù)文件的測(cè)試文件,寫(xiě)對(duì)服務(wù)測(cè)試的代碼都放在這里面 |
服務(wù)創(chuàng)建好了之后,沒(méi)有創(chuàng)建組件那么方便了,還需要自己配置一下,打開(kāi) src/app/app.component.ts 文件
在文件內(nèi)引入,然后將服務(wù)注入到 providers 里
import { UserService } from './user/user.service';
@NgModule({
providers: [
UserService
]
})
首先添加一個(gè)服務(wù) 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);
// 如果有錯(cuò)誤,通過(guò) error() 方法將錯(cuò)誤返回
// observe.error(data.description);
});
});
}
}
打開(kāi) user.component.ts 文件,使用這個(gè)服務(wù)里定義的方法,代碼如下
引入服務(wù)文件,然后初始化,這里初始化有兩種方式,一種 private userService: UserService = new UserService(),另一種是通過(guò)構(gòu)造方法注入
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));
}
}
說(shuō)明:上面例子中請(qǐng)求接口用的是 angular 內(nèi)置好的 rxjs 模塊,你也可以換成流行的 axios 或者其它的框架
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
利用Angularjs和bootstrap實(shí)現(xiàn)購(gòu)物車功能
在學(xué)習(xí)了如何簡(jiǎn)單開(kāi)始一個(gè)Angular程序之后,跟著網(wǎng)上的教程我也來(lái)實(shí)現(xiàn)一個(gè)購(gòu)物車功能,為了減少頁(yè)面樣式設(shè)計(jì)我使用了bootstrap來(lái)偷懶,現(xiàn)在分享給大家,有需要的可以參考借鑒。2016-08-08
angularjs項(xiàng)目的頁(yè)面跳轉(zhuǎn)如何實(shí)現(xiàn)(5種方法)
本篇文章主要介紹了詳解angularjs項(xiàng)目的頁(yè)面跳轉(zhuǎn)如何實(shí)現(xiàn) ,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
Angular 4.x 動(dòng)態(tài)創(chuàng)建表單實(shí)例
本篇文章主要介紹了Angular 4.x 動(dòng)態(tài)創(chuàng)建表單實(shí)例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
Angular 利用路由跳轉(zhuǎn)到指定頁(yè)面的指定位置方法
今天小編就為大家分享一篇Angular 利用路由跳轉(zhuǎn)到指定頁(yè)面的指定位置方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
AngularJS directive返回對(duì)象屬性詳解
這篇文章主要為大家纖細(xì)介紹了AngularJS directive返回對(duì)象屬性的相關(guān)內(nèi)容,感興趣的小伙伴們可以參考一下2016-03-03
angular2+nodejs實(shí)現(xiàn)圖片上傳功能
這篇文章主要介紹了angular2+nodejs實(shí)現(xiàn)圖片上傳功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03
Angular 4依賴注入學(xué)習(xí)教程之ClassProvider的使用(三)
這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之ClassProvider使用的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Angular 4具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-06-06

