Angular新建項目步驟記錄
標簽（空格分隔）： Angular
1. ng new my-app
2. 啟動dev環境
cd my-app
ng serve --open
3. 修改styles.css為styles.scss,同時修改文件 .angular-cli.json 中的：
...
"styles": [
"styles.scss"
],
...
重新打包。
4. 配置全局樣式
- /src 目錄下添加
./scss文件夾 - /scss 目錄下添加
./mixins,./utilities文件夾，添加_mixins.scss(混合),_reboot.scss(重置瀏覽器),_utilities.scss(工具),_variables.scss(變量)。 - 在
/src/styles.scss文件中引用以上：
/**
* Global styles
*/
@import "scss/_variables.scss";
@import "scss/_mixins.scss";
@import "scss/_reboot.scss";
@import "scss/_utilities.scss";
注意：Chrome並不支持12px以下的大小 使用rem時候需要注意
- 添加
font-awesome:
npm i --save font-awesome
然后在.angularcli.json中添加：
...
"apps": [{
...
"styles": [
"styles.scss",
"../node_modules/font-awesome/scss/font-awesome.scss"
],
...
}],
...
- 還可以去iconmoon等網站定制自己的icon字體，
將字體文件放在assets目錄下，這時候引用字體文件的時候，需要將路徑設置為絕對路徑,參見。最后在style.scss文件import即可。
5. 配置全局變量管理，應用初始化，懶加載
- 我們使用cookie進行本地信息管理，所以需要先安裝
ngx-cookie：
npm i --save ngx-cookie
然后在app.module.ts中：
...
@NgModule({
...
imports: [
CookieModule.forRoot(),
],
providers: [
CookieService
]
...
})
...
- 配置全局變量和數據管理服務。
添加src/services文件夾，添加ajax.service.ts(XHR封裝),data-store.service.ts(全局枚舉/屬性以及接口初始化服務和配置初始化),data-user.service.ts(用戶賬戶操作信息管理服務), utilities.service.ts(靜態工具類/公共工具)。
在/src/app/中添加app.config.ts,用於保存全局變量。添加app-routing.module.ts用於單獨配置應用的路由以及路由懶加載。
import {RouterModule, Routes} from '@angular/router';
import {NgModule} from '@angular/core';
import {IndexComponent} from '../views/index/index/index.component';
const APP_ROUTES: Routes = [
{ path: '', component: IndexComponent }
];
@NgModule({
declarations: [
IndexComponent
],
imports: [
RouterModule.forRoot(APP_ROUTES, { useHash: Boolean(history.pushState) === false })
],
exports: [
RouterModule
],
providers: []
})
export class AppRoutingModule { }
- 設置應用初始化
在app.module.ts中調用數據初始化：
...
export function AppInit(apiDataService: ApiDataService, userDataService: UserDataService) {
apiDataService.InitConfig(); // 初始化配置數據
apiDataService.Init(); // 初始化token
userDataService.Init(); // 初始化用戶信息
return () => Observable.of([]);
}
@Ngmodule({
...
providers: [
...
ApiDataService,
UserDataService,
{ provide: APP_INITIALIZER, useFactory: AppInit, deps: [ApiDataService, UserDataService], multi: true }
...
]
...
})
- lazyload模塊
比如我們有一個賬號登錄account.module.ts。實現懶加載需要在app-routing.module.ts中這樣引用：
...
const APP_ROUTES: Routes = [
{ path: '', component: IndexComponent },
{ path: 'account', loadChildren: 'views/account/account.module#AccountModule' } // 實現懶加載
];
@NgModule({
declarations: [
IndexComponent
],
imports: [
RouterModule.forRoot(APP_ROUTES, { useHash: Boolean(history.pushState) === false })
],
exports: [
RouterModule
],
providers: []
})
export class AppRoutingModule { }
在瀏覽器中，當出現account.module.chunk.js的js加載就表示成功了：
6. 其他
- 應用加載顯示
應用首次進入的時候會有白屏。可以添加一些loading動畫使加載過程有更好的用戶體驗。
打開根目錄下的index.html,可以在app-root中填入任何代碼：
...
<body>
<app-root>
<style>
app-root {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #F4D8D9;
text-transform: uppercase;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
Helvetica,
sans-serif;
font-size: 25px;
text-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}
body {
background: #21ABA5;
margin: 0;
padding: 0;
}
@keyframes dots {
50% {
transform: translateY(-.4rem);
}
100% {
transform: translateY(0);
}
}
.d {
animation: dots 1.5s ease-out infinite;
}
.d-2 {
animation-delay: .5s;
}
.d-3 {
animation-delay: 1s;
}
</style>
Loading<span class="d">.</span><span class="d d-2">.</span><span class="d d-3">.</span>
</app-root>
</body>
</html>
以上源碼請參見Github。純屬個人見解，如有錯誤疏漏之處望不吝賜教。