Angular

[目标]

1. VSCode 撰写

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 { }

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 = "";    }  }}

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

.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

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