Angular 7 用户注册与登录示例教程
angular-7-registration-login-exampleAngular 7 User Registration and Login Example项目地址:https://gitcode.com/gh_mirrors/an/angular-7-registration-login-example
1. 项目的目录结构及介绍
angular-7-registration-login-example/
├── src/
│ ├── app/
│ │ ├── auth/
│ │ ├── home/
│ │ ├── _helpers/
│ │ ├── _services/
│ │ ├── app.component.css
│ │ ├── app.component.html
│ │ ├── app.component.ts
│ │ ├── app.module.ts
│ │ ├── app-routing.module.ts
│ ├── assets/
│ ├── environments/
│ ├── index.html
│ ├── main.ts
│ ├── styles.css
├── .gitignore
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── tsconfig.json
├── webpack.config.js
目录结构介绍
- src/: 项目源代码目录。
- app/: 包含应用程序的主要代码。
- auth/: 包含用户认证相关的组件和代码。
- home/: 包含主页相关的组件和代码。
- _helpers/: 包含辅助函数和工具类。
- _services/: 包含服务类,如用户服务、认证服务等。
- app.component.*: 应用程序的根组件。
- app.module.ts: 应用程序的根模块。
- app-routing.module.ts: 应用程序的路由配置。
- assets/: 静态资源文件,如图片等。
- environments/: 环境配置文件。
- index.html: 应用程序的入口HTML文件。
- main.ts: 应用程序的入口文件。
- styles.css: 全局样式文件。
- .gitignore: Git忽略文件配置。
- LICENSE: 项目许可证。
- README.md: 项目说明文档。
- package-lock.json: 依赖包锁定文件。
- package.json: 项目依赖和脚本配置。
- tsconfig.json: TypeScript配置文件。
- webpack.config.js: Webpack配置文件。
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应用程序的入口文件。
- 它负责启动Angular应用,并根据环境配置启用生产模式。
platformBrowserDynamic().bootstrapModule(AppModule)
用于引导应用程序的根模块 AppModule
。
3. 项目的配置文件介绍
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
}
}
- tsconfig.json 是TypeScript的配置文件。
- 它定义了TypeScript编译器的选项,如模块解析、目标ES版本、类型定义等。
webpack.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/main.ts',
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
angular-7-registration-login-exampleAngular 7 User Registration and Login Example项目地址:https://gitcode.com/gh_mirrors/an/angular-7-registration-login-example