Angular Style Guide提到导入行距:
纵观包括Angular本身在内的许多Angular项目,惯例是先导入Angular(@angular
)模块,然后再导入第三方模块(例如AngularFire2),然后再导入我们自己的模块(服务,组件等)./some-service.ts
。
再次看起来,导入服务,然后是模型,然后是组件是惯例。
但是接口和管道等呢?导入“无名”或通配符模块(例如Firebase SDK或RxJs运算符)的约定是什么?
例如:
import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import {
AngularFireDatabase,
FirebaseListObservable
} from 'angularfire2/database';
import * as firebase from 'firebase/app';
import 'rxjs/add/operator/take';
...
import { Injectable } from '@angular/core';
import {
AngularFireDatabase,
FirebaseListObservable
} from 'angularfire2/database';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Observable';
import { AuthService } from './auth.service';
// `GridMetadata` is an Interface
import { GridMetadata } from './grid-metadata';
...
实际上,查看Angular代码库并更好地理解指南,就可以找到答案。
这仅需要一个示例来解释它:
// Core imports
import { TestBed, async, inject } from '@angular/core/testing';
// Third party imports
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/of';
// Application imports
import { AuthService } from './auth.service';
import { environment } from '../environments/environment';
将“模块”视为“来自”之后的部分。模块包含要导入的符号。
import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/catch';
符号是什么都没有关系。重要的是,导入行必须按模块的字母顺序排列。例如
在Angular代码库中,很明显小写字母在大写字母或大写字母之后列出,因此:'rxjs / Rx'在'rxjs / add / observable / of'和'rxjs / add / operator / catch'之前列出
import { TestBed, async, inject } from '@angular/core/testing';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/of';
将“解构的导入符号”视为从其父模块中提取的导出符号。在此示例中,AngularFireAuth,Observable,TestBed,async和inject都是已解构的导入符号。
同样,顺序按字母顺序排列;先大写,然后大写,再小写。这是Angular代码库中的一个很好的例子:
import {CUSTOM_ELEMENTS_SCHEMA, Compiler, Component, Directive, Inject, Injectable, Injector, Input, NgModule, Optional, Pipe, SkipSelf, ɵstringify as stringify} from '@angular/core';
导入服务,管道,模型,指令或组件等似乎没有特定的顺序。查看Angular代码库
注意,父目录中的模块是在距离它们更近的模块导入之后才导入的。
import { AuthService } from './auth.service';
import { environment } from '../environments/environment';
import { abc } from '.../abc';
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句