Angular 2 认证示例项目教程
angular2-authentication-sample This is a sample that shows how to add authentication to an Angular 2 (ng2) app 项目地址:https://gitcode.com/gh_mirrors/an/angular2-authentication-sample
1. 项目的目录结构及介绍
angular2-authentication-sample/
├── e2e/
│ ├── app.e2e-spec.ts
│ ├── app.po.ts
│ └── tsconfig.e2e.json
├── src/
│ ├── app/
│ │ ├── app.component.css
│ │ ├── app.component.html
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ ├── app.module.ts
│ │ ├── auth-guard.service.ts
│ │ ├── auth.service.ts
│ │ ├── callback.component.ts
│ │ ├── home.component.ts
│ │ ├── login.component.ts
│ │ ├── profile.component.ts
│ │ └── tsconfig.app.json
│ ├── assets/
│ ├── environments/
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
│ ├── tsconfig.app.json
│ └── tsconfig.spec.json
├── angular.json
├── package.json
├── tsconfig.json
└── tslint.json
目录结构介绍
e2e/
: 包含端到端测试的文件。src/
: 项目的主要源代码文件夹。
app/
: 包含应用程序的主要组件和模块。
app.component.*
: 主组件的文件(CSS、HTML、测试和TypeScript)。app.module.ts
: 应用程序的根模块。auth-guard.service.ts
: 认证守卫服务。auth.service.ts
: 认证服务。callback.component.ts
: 回调组件。home.component.ts
: 主页组件。login.component.ts
: 登录组件。profile.component.ts
: 用户资料组件。 assets/
: 静态资源文件夹。environments/
: 环境配置文件。index.html
: 应用程序的主HTML文件。main.ts
: 应用程序的入口文件。polyfills.ts
: 用于填充浏览器兼容性的脚本。styles.css
: 全局样式文件。test.ts
: 测试配置文件。 angular.json
: Angular CLI的配置文件。package.json
: 项目的依赖和脚本配置文件。tsconfig.json
: TypeScript的配置文件。tslint.json
: TSLint的配置文件。
2. 项目的启动文件介绍
main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
enableProdMode()
: 启用生产模式。platformBrowserDynamic()
: 使用JIT编译器启动Angular应用程序。bootstrapModule(AppModule)
: 引导启动AppModule
。
3. 项目的配置文件介绍
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angular2-authentication-sample": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/
angular2-authentication-sample This is a sample that shows how to add authentication to an Angular 2 (ng2) app 项目地址:https://gitcode.com/gh_mirrors/an/angular2-authentication-sample