Angular 6 注册登录示例项目教程
1. 项目的目录结构及介绍
angular-6-registration-login-example/
├── e2e/
│ ├── src/
│ │ ├── app.e2e-spec.ts
│ │ ├── app.po.ts
│ ├── protractor.conf.js
│ ├── tsconfig.e2e.json
├── src/
│ ├── app/
│ │ ├── _helpers/
│ │ ├── _models/
│ │ ├── _services/
│ │ ├── home/
│ │ ├── login/
│ │ ├── register/
│ │ ├── app.component.css
│ │ ├── app.component.html
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ ├── app.module.ts
│ │ ├── app-routing.module.ts
│ ├── assets/
│ ├── environments/
│ │ ├── environment.prod.ts
│ │ ├── environment.ts
│ ├── index.html
│ ├── main.ts
│ ├── styles.css
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ ├── tslint.json
├── angular.json
├── package.json
├── tsconfig.json
├── tslint.json
目录结构介绍
-
e2e/: 端到端测试目录。
- src/: 包含端到端测试的源文件。
- protractor.conf.js: Protractor 配置文件。
- tsconfig.e2e.json: 端到端测试的 TypeScript 配置文件。
-
src/: 项目源代码目录。
- app/: 应用程序的主要代码目录。
- _helpers/: 包含辅助函数和工具类。
- _models/: 包含数据模型定义。
- _services/: 包含服务类,如认证服务。
- home/: 主页组件。
- login/: 登录组件。
- register/: 注册组件。
- app.component.css: 根组件的样式文件。
- app.component.html: 根组件的模板文件。
- app.component.spec.ts: 根组件的测试文件。
- app.component.ts: 根组件的逻辑文件。
- app.module.ts: 应用程序的根模块。
- app-routing.module.ts: 应用程序的路由模块。
- assets/: 静态资源目录。
- environments/: 环境配置目录。
- environment.prod.ts: 生产环境配置。
- environment.ts: 开发环境配置。
- index.html: 应用程序的入口 HTML 文件。
- main.ts: 应用程序的入口 TypeScript 文件。
- styles.css: 全局样式文件。
- tsconfig.app.json: 应用程序的 TypeScript 配置文件。
- tsconfig.spec.json: 测试的 TypeScript 配置文件。
- tslint.json: TSLint 配置文件。
- app/: 应用程序的主要代码目录。
-
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));
- main.ts 是 Angular 应用程序的入口文件。
- 它负责启动应用程序并引导根模块
AppModule
。 - 在生产环境中,启用生产模式
enableProdMode()
。