Todo Angular Firebase 项目教程

Todo Angular Firebase 项目教程

todo-angular-firebaseTodo app with Angular CLI • AngularFire2 • Firebase • OAuth • SW-Precache项目地址:https://gitcode.com/gh_mirrors/to/todo-angular-firebase

1. 项目的目录结构及介绍

todo-angular-firebase/
├── src/
│   ├── app/
│   ├── assets/
│   ├── environments/
│   ├── index.html
│   ├── main.ts
│   ├── styles.scss
│   └── ...
├── .firebaserc
├── .gitignore
├── angular-cli.json
├── firebase.json
├── firebase.rules.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── README.md
├── tsconfig.json
└── tslint.json

• src/: 包含项目的源代码文件。
  • app/: 包含Angular应用的主要代码。
  • assets/: 存放静态资源文件，如图片等。
  • environments/: 包含不同环境的配置文件。
  • index.html: 项目的入口HTML文件。
  • main.ts: 项目的入口TypeScript文件。
  • styles.scss: 全局样式文件。
• .firebaserc: Firebase项目配置文件。
• .gitignore: Git忽略文件配置。
• angular-cli.json: Angular CLI配置文件。
• firebase.json: Firebase部署配置文件。
• firebase.rules.json: Firebase安全规则配置文件。
• karma.conf.js: Karma测试配置文件。
• package.json: 项目依赖和脚本配置文件。
• protractor.conf.js: Protractor端到端测试配置文件。
• README.md: 项目说明文档。
• tsconfig.json: TypeScript编译配置文件。
• tslint.json: TSLint代码风格检查配置文件。

2. 项目的启动文件介绍

• main.ts: 这是Angular应用的入口文件，负责启动Angular应用。

  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.log(err));
  

3. 项目的配置文件介绍

• angular-cli.json: Angular CLI的配置文件，包含项目的基本配置信息。

  {
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
      "name": "todo-angular-firebase"
    },
    "apps": [
      {
        "root": "src",
        "outDir": "dist",
        "assets": [
          "assets",
          "favicon.ico"
        ],
        "index": "index.html",
        "main": "main.ts",
        "polyfills": "polyfills.ts",
        "test": "test.ts",
        "tsconfig": "tsconfig.app.json",
        "testTsconfig": "tsconfig.spec.json",
        "prefix": "app",
        "styles": [
          "styles.scss"
        ],
        "scripts": [],
        "environmentSource": "environments/environment.ts",
        "environments": {
          "dev": "environments/environment.ts",
          "prod": "environments/environment.prod.ts"
        }
      }
    ],
    "e2e": {
      "protractor": {
        "config": "./protractor.conf.js"
      }
    },
    "lint": [
      {
        "project": "src/tsconfig.app.json"
      },
      {
        "project": "src/tsconfig.spec.json"
      },
      {
        "project": "e2e/tsconfig.e2e.json"
      }
    ],
    "test": {
      "karma": {
        "config": "./karma.conf.js"
      }
    },
    "defaults": {
      "styleExt": "scss",
      "component": {}
    }
  }
  

• firebase.json: Firebase部署

todo-angular-firebaseTodo app with Angular CLI • AngularFire2 • Firebase • OAuth • SW-Precache项目地址:https://gitcode.com/gh_mirrors/to/todo-angular-firebase