【ANGULAR网站开发】初始环境搭建

SpringBoot后端同步在angular SpringBoot初始化

1. 初始化angular项目

1.1 创建angular项目

需要安装npm和nodejs，这边不重新安装
直接安装最新版本的angular

npm install -g @angular/cli

安装指定大版本的angular

npm install -g @angular/cli@18

1.2 启动angular

使用idea启动

控制台启动

ng serve

启动成功后的情况

1.2.1 特殊情况，angular启动后localhost和ip都无法访问

在启动脚本里加–host 0.0.0.0后，就可以用ip访问，为啥localhost不行，没找到解决方案

1.3 清理自带的首页信息

<style>
</style>

<main class="main">

</main>
<router-outlet />

1.4 创建home和login

ng generate component admin/home
ng generate component admin/login

1.5 添加全局绝对路径

在tsconfig.json添加代码

   {
   
     "compilerOptions": {
   
       "baseUrl": "./",
       "paths": {
   
         "@app/*": ["src/app/*"],
         "@public/*": ["src/public/*"],
       }
     }
   }
   

可以直接用@app 前缀来引用服务

2. 使用ng-zorro

ng-zorro官网

2.1 引入ng-zorro

进入代码文件夹内

# 创建新的项目，也可以使用旧项目
ng new angular 
cd ./angular-web
# 下载ng-zorro
ng add ng-zorro-antd

✔ Choose your locale code: zh_CN
✔ Choose template to create project: sidemenu，这个是默认菜单，也可以不选择，后续更好操作
两个选择，其他的输入Y就行

重启项目后发现报错了

是缺少了ctrl/tinycolor的依赖包，安装依赖

npm install @ctrl/tinycolor --save

安装后再次重启，成功进入页面

2.2 下载登录页面

ng g ng-zorro-antd:form-normal-login

ng g ng-zorro-antd:form-normal-login pages/base/login

在官网下载了登录的model，在路由里添加页面，不需要权限即可

  {
    path: 'login', component: LoginComponent },

然后调整代码
login.component.css

/*优化样式，居中显示界面*/
.login-container {
   
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translateX(-50%)  translateY(-50%);
  width: 300px;
}

.login-form {
   
  max-width: 100%;
}

.login-form-margin {
   
  margin-bottom: 16px;
}

.login-form-forgot {
   
  float: right;
}

.login-form-button {
   
  width: 100%;
}

login.component.html

<div class="login-container">
  <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-control nzErrorTip="Please input your username!">
        <nz-input-group nzPrefixIcon="user">
          <input type="text" nz-input formControlName="username" placeholder="Username"/>
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control nzErrorTip="Please input your Password!">
        <nz-input-group nzPrefixIcon="lock">
          <input type="password" nz-input formControlName="password" placeholder="Password"/>
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>
    <div nz-row class="login-form-margin">
      <div nz-col [nzSpan]="12">
        <label nz-checkbox formControlName="remember">
          <span>Remember me</span>
        </label>
      </div>
      <div nz-col [nzSpan]="12">
        <a class="login-form-forgot">Forgot password</a>
      </div>
    </div>
    <button nz-button class="login-form-button login-form-margin" [nzType]="'primary'">Log in</button>
    Or
    <a routerLink="/register">register now!</a>
  </form>
</div>

login.component.ts

import {
    Component } from '@angular/core';
import {
    NonNullableFormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';

import {
    NzButtonModule } from 'ng-zorro-antd/button';
import {
    NzCheckboxModule } from 'ng-zorro-antd/checkbox';
import {
    NzFormModule } from 'ng-zorro-antd/form';
import {
    NzInputModule } from 'ng-zorro-antd/input';

@Component({
   
  selector: 'app-login',
  imports: [ReactiveFormsModule, NzButtonModule, NzCheckboxModule, NzFormModule, NzInputModule],
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
   
  validateForm = this.fb.group({
   
    username: this.fb.control('', [Validators.required]),
    password: this.fb.control('', [Validators.required]),
    remember: this.fb.control(true)
  });

  submitForm(): void {
   
    if (this.validateForm.valid) {
   
      console.log('submit', this.validateForm.value);
    } else {
   
      Object.values(this.validateForm.controls).forEach(control => {
   
        if (control.invalid) {
   
          control.markAsDirty();
          control.updateValueAndValidity({
    onlySelf: true });
        }
      });
    }
  }

  constructor(private fb: NonNullableFormBuilder) {
   }
}

代码会一直报错，提示 TS2729: Property ‘fb’ is used before its initialization，fb未初始化，解决方案如下：
1.非空断言操作符 !：
使用 validateForm!: FormGroup; 中的非空断言操作符 ! 告诉 TypeScript 编译器，validateForm 在运行时会被正确初始化，不会为 undefined。
2.ngOnInit 生命周期钩子：
在 ngOnInit 生命周期钩子中初始化 validateForm，确保 fb 已经被正确注入并初始化。

import {
    Component,OnInit } from '@angular/core';
import {
   FormGroup, NonNullableFormBuilder, ReactiveFormsModule, Validators} from '@angular/forms';

import {
    NzButtonModule } from 'ng-zorro-antd/button';
import {
    NzCheckboxModule } from 'ng-zorro-antd/checkbox';
import {
    NzFormModule } from 'ng-zorro-antd/form';
import {
    NzInputModule } from 'ng-zorro-antd/input';
import {
   Router} from '@angular/router';
@Component({
   
  selector: 'app-login',
  imports: [ReactiveFormsModule, NzButtonModule, NzCheckboxModule, NzFormModule, NzInputModule],
  templateUrl: './login.component.html',
  styleUrl: './login.component.css'
})
export class LoginComponent implements OnInit {
   
  validateForm!: FormGroup; // 使用非空断言操作符 !
  ngOnInit(): void {
   
    this.validateForm = this.fb.group({
   
      username: this.fb.control('', [Validators.required]),
      password: this.fb.control('', [Validators.required]),
      remember