使用 CLI 生成组件

2019-12-20 08:00:00 · 飞浪

ng generate component 是一个简单的单行命令，它创建不同的文件和文件夹，并将新创建的组件引用到模块文件。

介绍

“组件”是当今非常流行的一个词，也是前端 Web 开发领域使用最广泛的术语之一。每个基于 Javascript 的框架或库都必须包含一个名为“组件”的文件，无论是 Angular、React 还是 Vue.js，因为它是任何遵循基于组件的架构的应用程序的构建块之一。让我们快速介绍一下 Angular 中的组件并了解 CLI。

Angular 中的组件是什么？

Angular 是一个流行的 Javascript 框架，用于开发基于 MVC 架构的 Web、桌面和移动应用程序。组件是 Angular 的重要组成部分，因为即使是一个简单的应用程序也应该至少有一个组件来运行该应用程序，称为应用程序组件。当我们使用 CLI 命令创建新的 Angular 应用程序时，它会自动创建。Angular 中的组件是直接与模板交互并在浏览器上呈现不同 HTML 元素的类。

什么是 Angular CLI

？

Angular CLI 代表命令行界面，用于快速启动 Angular 应用程序，只需最少的设置，无需自定义配置。Angular CLI 有一组命令，可以从头开始创建文件、更新文件、创建应用程序配置等。CLI 最重要的功能是它启动本地 Web 服务器，因此一旦应用程序的文件被编译，我们就可以在默认的 Angular URL“localhost:4000”上查看输出。要开始使用 Angular CLI，我们需要使用下面的命令来安装它。

      npm install -g @angular/cli

您可以将此命令放入命令提示符或终端中。执行该命令后，使用另一个命令检查版本，该命令如下所示。

      Ng –v

或者

      Ng version

这里-v代表机器上安装的Angular CLI的版本，所以运行上述命令后，我们就可以看到这些信息。

      @angular/cli: 9.x.x

node: 10.x.x

os: your o/s name

为什么要使用 Angular CLI

Angular CLI 是一个有效且方便的命令行界面，它带有大量命令，允许我们快速设置我们的 Angular 应用程序并以最少的应用程序结构开始使用。

它包含一个命令列表，允许我们根据不同的用户生成不同的文件，如下所示。

成分
模块
指示
枚举
管道
服务

这是一个在 Angular 中生成新服务的简单示例。

      Ng generate service mydataservice

所以执行完上面的命令之后你就会看见服务新添加的文件被自动引用到了模块之中。

如何使用 Angular CLI 创建新组件

要创建组件，我们可以使用下面的 ng 命令后跟合适的名称。

      Ng generate component component_name

或者

      Ng g c component_name

These are the two main ways to generate a new component in Angular: using ng g c <component_name>, and using ng generate component <component_name>. Using either of these two commands, the new component can be generated pretty easily and followed by the suitable component name of your choice.

Isn’t it really simple?

Yes, it’s just a one-line command which creates different files and a folder, and most importantly it also references the newly created component to the module file so that we don’t need to configure it on our own.

Let’s create a new component called ‘test’ using the below command.

      Ng generate component test

After running the above command, we can see the file structure looks like this.

As we can see, we have four different files for different usage.

test.component.ts (Class with @Component decorator)
test.component.spec.ts (For test case specification)
test.component.html (For the template)
test.component.css (For stylesheets)

If you notice the last line, there is one file which is updated called app.module.ts, just because we have to reference the newly created component to our root module file so that the Angular CLI automatically does the job while generating the component.

Let’s see the default content of the newly created files, which are described below.

test.component.ts

      import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})

export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
    

test.component.spec.ts

      import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TestComponent } from './test.component';

describe('TestComponent', () => {
  let component: TestComponent;
  let fixture: ComponentFixture<TestComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ TestComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

});
    

test.component.html

      <p>test works!</p>

test.component.css

In this file, we do not have any classes generated for our test component so the file is empty.

Apart from this file, there is one crucial change, which is to update the reference of the newly created component in the root module. The file will look like this:

App.module.ts

      import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
// Newly added component
import { TestComponent } from './test/test.component';

@NgModule({

  declarations: [
    AppComponent,
    // Reference
    TestComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]

})

export class AppModule { }
    

As you can see, the test component is auto-imported from the location where it is created and referenced in the same component in the imports: [] section automatically.

This is how to generate a component from scratch using the CLI command along with a suitable name. In the same way, we can also create other types of files using the CLI, such as service, directive, pipes, enum, and so on.

Using CLI in Other Ways

The Angular CLI is not only available to create the component or files, but it is also useful for many other purposes, such as deployment, adding new third party libraries into the project, creating a new Angular app, updating existing dependencies, testing the use cases, multilingual support, and so on.

Below is the list of commands we can use with the installation of the Angular CLI:

Ng update
Ng add
Ng help
Ng deploy
Ng build
Ng serve
Ng version
Ng test
Ng run
Ng doc
Ng e2e

There are the few other commands which are supported by the Angular CLI based on the different usage. For example Ng deploy which is specifically used to create build and deploy application into the server, hence we have options of plenty of commands to avail third-party libraries and so on.

For example, if we want to add any third-party library, we can use the below command.

      Npm Install angular-ui-bootstrap

上述命令将为我们带来完整的引导用户界面包，现在可以在我们的 Angular 应用程序中使用。

这就是我们如何根据业务需求使用不同的 Angular CLI 命令执行特定操作。

结论

在本指南中，我们了解了什么是 Angular CLI 以及为什么需要使用它。事实上，它可以为开发人员节省大量时间，因为它具有灵活性，并且只需使用简单的命令即可快速生成文件。

Angular CLI 还有大量其他选项，可以帮助开发人员加快产品开发时间和降低成本。

希望你喜欢本指南。如果您对此主题有任何疑问，请随时通过CodeAlphabet与我联系。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

使用 CLI 生成组件

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.css'] }) export class TestComponent implements OnInit { constructor() { } ngOnInit() { } }

import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { TestComponent } from './test.component'; describe('TestComponent', () => { let component: TestComponent; let fixture: ComponentFixture<TestComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ TestComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(TestComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); });

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HttpClientModule } from '@angular/common/http'; // Newly added component import { TestComponent } from './test/test.component'; @NgModule({ declarations: [ AppComponent, // Reference TestComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }