Angular#5 专案:路由 登入系统>>首页

Angular

[目标]

  • 进入系统>>登入>>首页
    https://ithelp.ithome.com.tw/upload/images/20210501/20137134BstMdWuxNl.png

1. VSCode 撰写

  • app
    app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { AppRoutingModule } from './app-routing/app-routing.module';

// 引用的模组、元件
import {FormsModule} from '@angular/forms';
// 模组设定
@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule, 
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  • login
    https://ithelp.ithome.com.tw/upload/images/20210502/20137134NKwzMdOzcH.jpg
  1. login.component.ts
import { Component, OnInit } from '@angular/core';
// 引用的模组
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit(): void {

  }
  //宣告acct,pwd去接html[(ngModel)]的value
  public acct: string | undefined;
  public pwd: string | undefined;
  
  public login() {
  
  //回传资料给後端做确认
  //我们先做个假资料,可以判断 登入成功 或 登入失败
    let username="joor";
    let userpwd="55688";
  
    if (this.acct == username && this.pwd == userpwd ) {
      this.router.navigate(['home']);
    } else {
      alert("登入失败");
      this.acct = "";
      this.pwd = "";
    }
  }
}
  1. login.component.html
<div style="text-align:center;margin:0px auto;width:300px;height:250px;">
    <div style=" text-align:center ">
        <h3>LOGIN</h3>
    </div>
    <div style="width:100%;text-align:center;margin-bottom:30px;margin-top:10px">
        <div><input class="input" type='text' [(ngModel)]="acct" placeholder="Username"></div>
        <div><input class="input" type='text' [(ngModel)]="pwd" placeholder="Password"></div>
        <div><button class="loginbtn" (click)="login()">LOGIN</button></div>
    </div>
</div>
  1. login.component.css
.input{
    text-align: left;
    width: 70%;
    margin-bottom:5px;
    margin-top:5px;
}

.loginbtn{
    width: 72%;
    margin-bottom:5px;
    margin-top:5px;
}

3. 启动专案

ng serve --open --port [XXXX]

范例ng serve --open --port 9985


4. 完成

帐号joor
密码55688
https://ithelp.ithome.com.tw/upload/images/20210501/20137134kZjC70KXjd.png

https://ithelp.ithome.com.tw/upload/images/20210501/20137134Y0xyTHx9Fd.png


上一篇
[下一篇]待续。。。


<<:  Angular#4 专案:路由 建置

>>:  学习资源

Day10 Android - Toast快显元件

今天讲的内容属於简单的元件使用,而我在前面几天已经先有拿来用几次来观察结果,但我一直没有好好提到,今...

【後转前要多久】# Day19 BootStrap - 排版切版 Layout (Row、Col?)

row是指什麽、col是指什麽? 常见的翻译是 row代表列、col代表栏 但用google翻译来翻...

Day6 我承认我是视觉动物

Chart 表格可以看出资料中的细节,所以一开始从表格开始搭建,而进一步,图表可以更直觉的看出整体...

D28 第十五周 (回忆篇)

持续跟第十一周作业奋斗 周一先把相对简单的 week11 hw3 简答题完成,中间因为穿插其他大活动...

Day28 JQuery应用

JQuery的应用有非常多种,概念就是当触发条件达成时,我要做些甚麽,例如:滑鼠单击一下,隐藏的选单...