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

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/*"]
       }
     }
   }
   

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

2. 创建身份验证服务

2.1 身份验证服务

在根目录下执行创建身份验证服务的代码

用来保存用户登录状态

ng generate service base/authService/auth

修改auth.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private isLoggedIn = false;

  constructor() { }

  login() {
    this.isLoggedIn = true;
  }

  logout() {
    this.isLoggedIn = false;
  }

  isAuthenticated(): boolean {
    return this.isLoggedIn;
  }
}

2.2 路由守卫服务

在根目录下执行创建路由守卫服务的代码

用于检查用户是否已登录。如果用户未登录，则重定向到登录页面。

ng generate service base/authService/authGuard

修改authGuard.service.ts

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) { }

  canActivate(): boolean {
    if (this.authService.isAuthenticated()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

2.3 配置路由app.routes.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './admin/home/home.component';
import { LoginComponent } from './admin/login/login.component';
import {AuthGuard} from './base/authService/auth-guard.service';
export const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: '**', redirectTo: '', pathMatch: 'full' } ,// 添加通配符路由,访问不存在的路径时重定向到主页
];

2.4 更新 app.config.server.ts （如果有的话，18不需要添加）

import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { appConfig } from './app.config';
import {AuthGuard} from './base/authService/auth-guard.service';

const serverConfig: ApplicationConfig = {
  providers: [
    provideServerRendering(),
    AuthGuard
  ]
};

export const config = mergeApplicationConfig(appConfig, serverConfig);

2.5 在login里添加登录事件

编辑login.component.ts文件

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '@app/base/authService/auth.service';
@Component({
  selector: 'app-login',
  imports: [],
  templateUrl: './login.component.html',
  styleUrl: './login.component.css'
})
export class LoginComponent {
  constructor(private authService: AuthService, private router: Router) { }

  login() {
    this.authService.login();
    this.router.navigate(['/']);
  }
}

在login.component.html添加登录按钮

<button (click)="login()">Login</button>

点击登录后直接跳转到指定页面

3.