最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

Angular 網站實例之 – 首頁篇

XAMPP下载 admin 575浏览 0评论
 Angular 網站實例之 – 首頁篇
今天開始 今天完成

今天的目標要完成網站的首頁,先來做導覽列

導覽列 (Navbar)
我們用 Angular Materail 的 toolbar 跟 button 來做
第一步:先加入這兩個 Material 到 Share Module

import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { MatToolbarModule, MatButtonModule } from ‘@angular/material’;
@NgModule({
imports: [
CommonModule,
MatToolbarModule,
MatButtonModule
],
exports: [
MatToolbarModule,
MatButtonModule
],
declarations: []
})
export class ShareModule { }
第二步:修改 navbar.component.html

<mat-toolbar  [style.background] = “(login$ | async) ? ‘darkviolet’ : ‘seagreen'” class=”navbar”>
<a mat-button routerLink=”/”>洋蔥投顧</a>
<span class=”to-right”></span>
<a mat-button *ngIf=”!(login$ | async)” routerLink=”/user/login”>會員登入</a>
<a mat-button *ngIf=”login$ | async” (click)=”logout()”>會員登出</a>
</mat-toolbar>
mat-toolbar 會根據會員是否已經登入來決定底色 background以及顯示 會員登入 或是 會員登出, login$ 是一個 Observable,我們用 async pipe 來 subscribe 這個 Observable,這樣會省去 unsubscribe 的步驟。官方文件
第三步:修改 navbar.component.css

.navbar {
width: 100%;
color: white;
}
.to-right {
flex: 1 1 auto;
}
第四步: 修改 navbar.component.ts

mport { Component, OnInit } from ‘@angular/core’;
import { Observable } from ‘rxjs/Observable’;
import ‘rxjs/add/observable/of’;
@Component({
selector: ‘app-navbar’,
templateUrl: ‘./navbar.component.html’,
styleUrls: [‘./navbar.component.css’]
})
export class NavbarComponent implements OnInit {
login$: Observable<boolean>;
constructor() { }
ngOnInit() {
this.login$ = Observable.of(true);
}
logout() {
this.login$ = Observable.of(false);
}
}
login$ 是一個 Observable, 習慣上我們會加上 $ 在變數來作區別,這個變數以後會用來接 UserService 的登入狀態,我們暫時先擺著。
完成後的截圖如下
登入前

QQ截图20181009164342
登入後
QQ截图20181009164347
 首頁
接下來簡單做個首頁,壓個半透明的漂亮風景,圖片來源,加個勵志小語
第一步: 修改 home.component.html

<div class=”bg”>
<div class=”bg-title”>
<h1 i18n>享受人生</h1>
<h3 i18n>做一個決定,並不難,難的是付諸行動,並且堅持到底</h3>
</div>
</div>
第二步:修改 home.component.css

.bg {
height: 400px;
background: url(https://images.pexels.com/photos/731658/pexels-photo-731658.jpeg?w=940&h=650&auto=compress&cs=tinysrgb

) no-repeat center bottom;
background-position: cover;
background-size: cover;
position: relative;
overflow: hidden;
}
.bg::before {
content: “”;
display: block;
width: 100%;
background-color: rgba(0, 0, 0, .5);
height: 100vh;
}
.bg-title {
color: #fff;
text-align: center;
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
截圖如下

QQ截图20181009164441
 好了,簡單的首頁完成,接下來我們來做使用者登入的功能

转载请注明:XAMPP中文组官网 » Angular 網站實例之 – 首頁篇

您必须 登录 才能发表评论!