[Angular通过指令创建在指定文件夹下] Angular CLI Command - ng alias

npm install -g @angular/cli

ng help

ng build Compiles an Angular app into an output directory.
ng serve Builds and serves your application, rebuilding on file changes.
ng generate Generates or modifies files based on a schematic.
ng test Runs unit tests on a given project.
ng e2e Builds and serves an Angular application, then runs end-to-end tests.

| Angular CLI 命令

Command	Alias	Purpose
ng new		创建一个新的Angular 应用
ng serve		Builds 和 runs Augular 应用
ng eject		2 < Angular版本< 6, webpack config 文件可编辑
ng generate component [name]	ng g c [name]	创建组件
ng generate directive [name]	ng g d [name]	创建指令
ng generate module [name]	ng g m [name]	创建模块
ng generate pipe [name]	ng g p [name]	创建管道
ng generate service [name]	ng g s [name]	创建服务类
ng generate guard [name]	ng g g [name]	创建守卫，用于控制访问
ng generate enum [name]	ng g e [name]	创建枚举
ng generate interface [name]	ng g i [name]	创建接口
ng generate class [name]	ng g class [name]	创建类
ng generate interceptor [name]	ng g interceptor [name]	创建拦截器

eg:
  创建登录组件 ng g c login

$ ng g c login
CREATE src/app/login/login.component.css (0 bytes)
CREATE src/app/login/login.component.html (20 bytes)
CREATE src/app/login/login.component.spec.ts (619 bytes)
CREATE src/app/login/login.component.ts (271 bytes)

  如果想在登录文件夹下再创建注册组件则为 ng g c login/register

$ ng g c login/register
CREATE src/app/login/register/register.component.css (0 bytes)
CREATE src/app/login/register/register.component.html (23 bytes)
CREATE src/app/login/register/register.component.spec.ts (640 bytes)
CREATE src/app/login/register/register.component.ts (283 bytes)

这里创建的register组件如果我们不想要register目录（在login目录下的）应该怎么做呢用 --flat，我们继续往下看

  如果想创建单个login模块文件则使用 --flat

$ ng g module login --flat
CREATE src/app/login.module.ts (191 bytes)

$ ng g module login
CREATE src/app/login/login.module.ts (191 bytes)

我们删掉之前创建的login component重新创建

$ ng g c login
CREATE src/app/login/login.component.css (0 bytes)
CREATE src/app/login/login.component.html (20 bytes)
CREATE src/app/login/login.component.spec.ts (619 bytes)
CREATE src/app/login/login.component.ts (271 bytes)
UPDATE src/app/login/login.module.ts (257 bytes)

新创建的组件会自动追加的同名的模块下
UPDATE src/app/login/login.module.ts (257 bytes)
我们重新创建register组件并且在login目录下不再有register目录

$ ng g c /login/rigister --flat
CREATE src/app/login/rigister.component.css (0 bytes)
CREATE src/app/login/rigister.component.html (23 bytes)
CREATE src/app/login/rigister.component.spec.ts (640 bytes)
CREATE src/app/login/rigister.component.ts (283 bytes)
UPDATE src/app/login/login.module.ts (402 bytes)

有些模块中的组件如果其他模块需要使用必须export我们如何让此组件在创建的时候导出呢，用--export 可以帮助我们很容易做到这一点

$ ng g c login/login-button --flat --module=login --export 
CREATE src/app/login/login-button.component.css (0 bytes)
CREATE src/app/login/login-button.component.html (27 bytes)
CREATE src/app/login/login-button.component.spec.ts (662 bytes)
CREATE src/app/login/login-button.component.ts (298 bytes)

@NgModule({
  declarations: [RigisterComponent, LoginComponent, LoginButtonComponent],
  imports: [
    CommonModule
  ],
  exports: [LoginButtonComponent]
})
export class LoginModule { }

模块中如果想包含模块也是一样的

$ ng g m login/logout --flat --module=login
CREATE src/app/login/logout.module.ts (192 bytes)
UPDATE src/app/login/login.module.ts (522 bytes)

如果在创建项目的时候希望有routing模块我们可以像下面这样创建项目

$ ng new angular-app --routing