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