投顧網站 – 設定篇

 投顧網站 – 設定篇
今天開始 今天完成
您可以直接看今天完成的結果，或者用git clone https://github.com/jerryhsieh/ngrx-demo.git

跟著下列步驟一起做

產生新的專案
第一步：如果您還沒安裝過 angular-cli，請先安裝

npm install -g @angular/cli
當然前提是您已經安裝了 Node.js, 如果還沒安裝過的話，請依照這個官方文件安裝
第二步：接著用 angular-cli 產生新的專案，這個可以參考這篇官方文章

ng new ngrx-demo –routing
等待系統下載完所以必須的檔案，您就可以用

cd ngrx-demo
npm start
來產生專案，在瀏覽器打入 http://localhost:4200 可以即時看到程式修改的結果。

加入 Angular Material
我們預計會用到 @angular/materail 及 @angular/flex-layout，詳細安裝解說請看官方文件
第一步：安裝套件

npm install –save @angular/material @angular/cdk @angular/flex-layout
第二步：Animations
加入 BrowerAnimationsModule 到 src/app/app.module.ts

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;
import { AppRoutingModule } from ‘./app-routing.module’;
import { AppComponent } from ‘./app.component’;
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
第三步：加入 Share Module，將所有用到的 Material 集中放在一個 module, 這樣就不用到處 import

ng generate module share
修改 src/app/share/share.module.ts

import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { MatButtonModule } from ‘@angular/material’;
@NgModule({
imports: [
CommonModule,
MatButtonModule
],
exports: [
MatButtonModule
],
declarations: []
})
記得在 app.module.ts 做 import，以後的 Module 也會共用到這個模組

import { ShareModule } from ‘./share/share.module’;
// …
@ngModule({
// …
imports: [
//…
ShareModule
]
})
第四步：加入佈景主題
將以下這一行加入 src/styles.css

@import “~@angular/material/prebuilt-themes/indigo-pink.css”;
第五步：加入手勢

npm install –save hammerjs
修改 src/main.ts, 加入這一行

import ‘hammerjs’;
第六步： 使用 Materail Icon, 將這一行加入 src/index.html

<link href=”https://fonts.useso.com/icon?family=Material+Icons

” rel=”stylesheet”>
建立相關模組 (modules)
根據前面的需求及規劃，我們預計產生兩個主要模組(modules), user 跟 member

ng generate module user –routing
ng generate module member –routing
我們之後再來處理這兩個模組。

建立最上層相關元件 (components)
我們先建立最上層用到的元件, 在 src/app 底下

ng generate component home
ng generate component navbar
修改首頁
第一步：將 app.componenet.ts import navbar 如下

import { Component } from ‘@angular/core’;
import { NavbarComponent } from ‘./navbar/navbar.component’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘app’;
}
第二步：將 app.components.html 修改如下

<app-navbar></app-navbar>
<router-outlet></router-outlet>
第三步：修改 src/app-routing.module.ts 如下

import { NgModule } from ‘@angular/core’;
import { Routes, RouterModule } from ‘@angular/router’;
import { HomeComponent } from ‘./home/home.component’;
const routes: Routes = [{
path: ”, children: [
{ path: ‘home’, component: HomeComponent },
{ path: ”, redirectTo: ‘/home’, pathMatch: ‘full’ }
]
}];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
好了，我們把最基本的架構先留下來，接著就要一個一個填空，這時首頁會產生