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

server/2024/12/29 2:22:40/

angular_0">1. 初始化angular项目

angular_1">1.1 创建angular项目

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

npm install -g @angular/cli

安装指定大版本的angular

npm install -g @angular/cli@18

在这里插入图片描述

angular_14">1.2 启动angular

使用idea启动
在这里插入图片描述
控制台启动

ng serve

启动成功后的情况
在这里插入图片描述

angularlocalhostip_24">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.


http://www.ppmy.cn/server/154072.html

相关文章

计算机网络习题(第5章 网络层 第6章 传输层)

第5章 网络层 一、单选题 1、下列关于 IPv4 地址的说法中&#xff0c;错误的是( )。 A、 IP 地址是逻辑地址 B、 IP 地址一般用点分十进制表示 C、 205.106.286.36 是一个合法的 IP 地址 D、 同一个网络中不能有两台计算机的 IP 地址相同 正确答案&#xff1a; C 2、…

JavaScript(三):数组

目录 创建数组 访问数组元素 修改数组元素 数组的常用方法 创建数组 创建数组可以直接使用字面量语法创建&#xff0c;例如&#xff1a; let arr [1, 2, 3, 4, 5]; 使用方括号将元素写在其中&#xff0c;用逗号分隔 也可以使用new Array()创建 let arr new Array(5); …

PL/SQL语言的并发编程

标题&#xff1a;深入探讨PL/SQL语言中的并发编程 一、引言 在数据库应用程序开发中&#xff0c;多用户同时访问和操作数据的情况非常常见&#xff0c;这就要求数据库系统具备处理并发操作的能力。而Oracle数据库的PL/SQL语言&#xff0c;以其强大的并发处理能力&#xff0c;…

使用FreeNAS软件部署ISCSI的SAN架构存储(IP-SAN)练习题

一&#xff0c;实验用到工具分别为&#xff1a; VMware虚拟机&#xff0c;安装教程&#xff1a;VMware Workstation Pro 17 安装图文教程 FreeNAS系统&#xff0c;安装教程&#xff1a;FreeNAS-11.2-U4.1安装教程2024&#xff08;图文教程&#xff09; 二&#xff0c;新建虚…

git 设置.gitignore文件屏蔽文件夹,但远程仓库文件夹未删除

git 设置.gitignore文件屏蔽文件夹&#xff0c;但远程仓库文件夹未删除 项目场景&#xff1a;问题描述 原因分析&#xff1a;解决方案&#xff1a;1、执行git rm清除暂存区的特定文件或文件夹2、提交并编辑分支提交注释3、提交完成后向远程推送代码4、检查被屏蔽文件&#xff0…

《战神:诸神黄昏》游戏运行时提示找不到emp.dll怎么办?emp.dll丢失如何修复?

《战神&#xff1a;诸神黄昏》游戏运行时提示找不到emp.dll怎么办&#xff1f;emp.dll丢失的修复方法 在畅游《战神&#xff1a;诸神黄昏》这款史诗级游戏的过程中&#xff0c;如果突然遭遇“找不到emp.dll”的错误提示&#xff0c;无疑会打断你的冒险之旅。作为一名深耕软件开…

Java设计模式 —— 【结构型模式】外观模式详解

文章目录 概述结构案例实现优缺点 概述 外观模式又名门面模式&#xff0c;是一种通过为多个复杂的子系统提供一个一致的接口&#xff0c;而使这些子系统更加容易被访问的模式。该模式对外有一个统一接口&#xff0c;外部应用程序不用关心内部子系统的具体的细节&#xff0c;这…

hhdb客户端介绍(57)

技术选型 选择 MySQL 数据库的原因 开源免费&#xff1a; MySQL 作为一款开源数据库&#xff0c;不仅免费提供给用户&#xff0c;还具备强大的功能和灵活性&#xff0c;有效降低了企业的软件许可成本。 卓越的性能&#xff1a; 在处理大规模数据集和高并发访问时&#xff0c;…