簡述

開始一個專案需要先建立起的基底。

流程

請先 ng new 自己專案，並且做以下的流程。

• 請安裝 Angular Material。

此系列文的UI框架都使用這個。

• CSS基礎設定。

• 請安裝 i18n ngx-translate。

也許有人想說專案大部分不需要多語系，
但還是想跟大家建議 為了避免未來的變動性，
以及字串另外裝起來處理，事後更動也方便得多，
哪怕不需要多語系，我仍然建議一開始設置i18n。

實作

(一) 簡述Angular Materia安裝

可參考官網流程，如果已經會安裝請跳過。

指令：

下述指令目的是統一各瀏覽器的css。

npm install --save normalize.css

npm install --save @angular/material @angular/cdk @angular/animations

npm install --save hammerjs

--

main.ts：

請在 src/main.ts 裡import hammerjs。

import 'hammerjs';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/
...

--

index.html：

請在 src/index.html 加上Angular Material的css style。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
rel="stylesheet">

(二) CSS基礎設定

請先在assets資料夾底下建立
css、img、icon、i18n四個資料夾。

內容請參照下方#範例網。

檔案結構：

-src
  |-app
        |-app.component.css
        |-app.component.html
        |-app.component.ts
        |-app.module.ts
  |-assets
        |-css
           |-_global.css
        |-i18n
        |-icon
        |-img
  |-style.css

--

assets/css/_global.css：

其實就是公司風格的打底，以及 flexbox 的設定。

*,
*::after,
*::befor {
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  font-size: 1.2rem;
  font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

body {
  position: fixed;
  top: 0;
}

a,
a:link,
a:visited,
a:active {
  color: #2b3d4f;
  text-decoration: underline;
}

a:hover {
  color: #ffaa00;
  cursor: pointer;
}

input {
  width: 100%;
  height: 30px;
  border: none;
  border-bottom: 1px solid;
  padding: 2px;
  margin-bottom: 2px;
  outline: none;
  background: transparent;
}

[hidden] {
  display: none !important;
}

/*Flex */
.flex {
  display: flex;
}

.flex.straight-flex {
  flex-direction: column;
}

.flex.space-between {
  justify-content: space-between;
}

.flex.center {
  justify-content: center;
}

.flex.flex-end {
  justify-content: flex-end;
}

.flex.align-center {
  align-items: center;
}

.flex.wrap {
  flex-wrap: wrap;
}

/* Other Info*/
.word-break {
  word-break: break-all;
  word-wrap: break-word;
}

.b {
  font-weight: bold;
}

--

style.css：

建議裡面放需要匯入的css檔案。

@import '~normalize.css';
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
@import 'assets/css/_global.css';

--

app.component.css：

很多時候開發會遇到有種狀況，
就是受到範圍化的影響導致在調整寬高時沒反應，
例如說根<app-root>是100%寬高，
但是它的子模塊<app-child>調100%沒反應，
所以我們此檔案做以下設定。

:host ::ng-deep router-outlet + * {
  display: flex;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

:host {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

(三) 簡述安裝i18n ngx-translate

指令：

npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save

--

在assets下建立 i18n資料夾 ：

請建立需要的語言json檔。

Demo目前展示以最方便的：

• 繁體中文tw.json
• 簡體中文cn.json
• 英文en.json

內容請參照下方#範例網。

此英文檔並非翻譯過的字串，而是為了方便核對Demo裡要翻譯的變數。

--

檔案結構

-src
  |-app
        |-app.component.css
        |-app.component.html
        |-app.component.ts
        |-app.module.ts
  |-assets
        |-css
           |-_global.css
        |-i18n
           |-cn.json
           |-en.json
           |-tw.json
        |-icon
        |-img
  |-style.css

--

app.module.ts

請在此檔中寫入 ngx-translate 的相關匯入。

export function createTranslateLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}

@NgModule({
declarations: [AppComponent],
imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: createTranslateLoader,
            deps: [HttpClient]
        }
    }),
    AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

範例碼

https://stackblitz.com/edit/ngcms-base