Angular項目新建

時間 2019-11-25

原文原文鏈接

Angular新建項目步驟記錄

標籤（空格分隔）： Angularcss

1. `ng new my-app`

2. 啓動dev環境

cd my-app
ng serve --open

3. 修改`styles.css`爲`styles.scss`,同時修改文件 .angular-cli.json 中的：

...
      "styles": [
        "styles.scss"
      ],
...

從新打包。html

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時候須要注意node

添加font-awesome:

npm i --save font-awesome

而後在.angularcli.json中添加：git

...
"apps": [{
    ...
    "styles": [
        "styles.scss",
        "../node_modules/font-awesome/scss/font-awesome.scss"
    ],
    ...
}],
...

還能夠去iconmoon等網站定製本身的icon字體，

將字體文件放在assets目錄下，這時候引用字體文件的時候，須要將路徑設置爲絕對路徑,參見。最後在style.scss文件import便可。github

5. 配置全局變量管理，應用初始化，懶加載

咱們使用cookie進行本地信息管理，因此須要先安裝ngx-cookie：

npm i --save ngx-cookie

而後在app.module.ts中：ajax

...
@NgModule({
    ...
    imports: [
        CookieModule.forRoot(),
    ],
    providers: [
        CookieService
    ]
    ...
})
...

配置全局變量和數據管理服務。

添加src/services文件夾，添加ajax.service.ts(XHR封裝),data-store.service.ts(全局枚舉/屬性以及接口初始化服務和配置初始化),data-user.service.ts(用戶帳戶操做信息管理服務), utilities.service.ts(靜態工具類/公共工具)。npm

在/src/app/中添加app.config.ts,用於保存全局變量。添加app-routing.module.ts用於單獨配置應用的路由以及路由懶加載。json

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中調用數據初始化：api

...
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>