angular的版本目前更新到 ^7.0.2
之前我用的是angular 4,然后升級(jí)到了6,怕升級(jí)到最新版之后有什么不兼容,所以我直接搭了一個(gè)簡(jiǎn)單的最新版本的demo
升級(jí) How to upgrade?
推薦一個(gè)網(wǎng)站,親測(cè)好用 angular升級(jí)網(wǎng)站
-
這里可以告訴你應(yīng)該怎么做?你要從哪個(gè)版本升到哪個(gè)版本
image.png 然后點(diǎn)擊 show me how to update! 下面會(huì)詳情地告訴你怎么做的
-
我的從6.1 更新到7.0
image.png
主要運(yùn)行這兩個(gè)命令
npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json
新功能 What are the new functions?
試了下這個(gè)
ng add @angular/material // 安裝并設(shè)置 Angular Material 和主題拗引，注冊(cè)新的初始組件 到ng generate中
然后再運(yùn)行
ng g @angular/material:material-dashboard --name="my-dashboard" // 生成一個(gè)dashboard的組件
ng g @angular/material:material-table --name="my-table" // 生成一個(gè)table的組件
ng g @angular/material:material-nav --name="my-nav" // 生成一個(gè)nav的組件
nav.png
更多Material請(qǐng)點(diǎn)擊
支持創(chuàng)建和構(gòu)建庫
ng g library 名字 // 在你項(xiàng)目中創(chuàng)建一個(gè)庫
ng build 名字 // 構(gòu)建一個(gè)庫
cd/dist 名字
npm publish // 發(fā)布之前要去注冊(cè)
npm adduser // 第一次發(fā)布注冊(cè)一個(gè)用戶,之后還要去驗(yàn)證
npm驗(yàn)證網(wǎng)站 一般是發(fā)封郵件驗(yàn)證就可以了,之后就可以通過npm publish 發(fā)布了
最后發(fā)布成功 可以通過npm i 名字安裝,和一般使用庫的方法一樣
服務(wù)
之間的服務(wù)都需要這么寫的
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from "rxjs";
import { Res } from '../interfaces/res.interface';
@Injectable()
export class LoginService {
constructor(private http: HttpClient) { }
// 登錄
public login(loginData: LoginData): Observable<Res<string>> {
return this.http.post<Res<string>>('/api/login/auth', loginData)
}
// 在模塊中注入服務(wù)
@NgModule({
...
providers: [ MyService ]
})
export class AppModule {}
現(xiàn)在不需要再模塊中注入
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root' // 關(guān)鍵在這里
})
export class MyServiceService {
constructor() { }
}
附加
修改默認(rèn)的接口,在package.json的script里面,可以用npm start啟動(dòng)
"start": "ng serve --port 4203",
官方文檔沒事多逛逛
