Angular开发经验总结

1. 安装@angular-devkit/core，用命令生成组件和服务：

ng g c componentName(默认创建子目录和组件)
ng g s serviceName（当前目录下创建服务）
ng g m moduleName（创建子目录和路由）

注意，如果你创建了两个Module，比如routing module，上述命令会提示：

Error: More than one module matches. Use skip-import option to skip importing the component into the closest module.

这时候，要指定目标module，自动将dealer.component.ts加入到app.module.ts的declare节点内。比如：

ng g c componentName --module app  标记主module 为app.module.ts，并自动追加组件到module中

2. 当发生不存在的.angular-cli.json时，直接创建：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "mars-werb"
  },
  "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.css"
      ],
      "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",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

3. 下载完成代码运行（npm 根据package.json安装依赖库）：

npm install

4. 如果基于ant.design开发，需要安装：

npm install ng-zorro-antd --save

5. 增加.gitignore文件，保证过滤掉依赖包

.idea
.idea/*.xml
node_modules

6. Intellij idea的Terminal是用来做什么的？当发现没有安装 @angular-devkit/core，可以直接通过Terminal完成，目标直接定位到当前项目目录，非常方便。

7. 当编辑代码过程中出现for语句解析错误提示，直接修改：tslint.json的forin选项：

statements must be filtered with an if statement

tslint.json: true to false

...
"forin": false                        //不检验forin语句中变量合法性
"no-trailing-whitespace": false,      //不检查缩进空格
"max-line-length": [false,140],       //行字符不越界检查
"prefer-const": ["error", {
        "destructuring": "any",
        "ignoreReadBeforeAssign": false
    }]                                //忽略is never reassigned. use 'const' instead检查
...

8. 应用系统少不了Cookie的应用，比较不错的Cookie service，基于ng2-cookies，应用比较广泛，兼容性好：

npm install ngx-cookie-service --save

9. 提示 [formGroup]不是form的属性错误的时候，要在app.module.ts中import ReactiveFormsModule。

10. Angular 5在使用HTTP服务的时候，最好使用HttpClient，给个粟子：

import {Injectable} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Center} from '../model/center.model';

const httpOptions = {
    headers: new HttpHeaders({'Content-Type': 'application/json'})
};

@Injectable()
export class MarsService {
    constructor(private httpClient: HttpClient) {}

    centers() {
        return this.httpClient.get<Center[]>('./assets/data/center.json', httpOptions);
    }
}

Angular开发经验总结

猜你喜欢