如果您正在使用Angular，就知道Angular CLI有多有用。它簡化了創(chuàng)建和管理Angular項(xiàng)目的過程，憑借其直觀的命令行界面，它可以輕松處理復(fù)雜的任務(wù)，如生成組件、服務(wù)、管道、指令等。

但是您知道如何有效地使用Angular CLI嗎？在本文中，我們將分享10個(gè)超級棒的實(shí)戰(zhàn)應(yīng)用技巧，來幫助您掌握Angular CLI。它們涵蓋了配置、優(yōu)化、定制和調(diào)試等主題，無論您是初學(xué)者還是技術(shù)大牛，都會(huì)在這個(gè)列表中找到一些有用的東西。

P.S：Kendo UI是帶有jQuery、Angular、React和Vue庫的JavaScript UI組件的最終集合，無論選擇哪種JavaScript框架，都可以快速構(gòu)建高性能響應(yīng)式Web應(yīng)用程序。通過可自定義的UI組件，Kendo UI可以創(chuàng)建數(shù)據(jù)豐富的桌面、平板和移動(dòng)Web應(yīng)用程序。通過響應(yīng)式的布局、強(qiáng)大的數(shù)據(jù)綁定、跨瀏覽器兼容性和即時(shí)使用的主題，Kendo UI將開發(fā)時(shí)間加快了50%。

Kendo UI新版下載

1. 從基本要素開始

當(dāng)使用ng new命令啟動(dòng)一個(gè)新的Angular項(xiàng)目時(shí)，可以使用--minimal flag來創(chuàng)建一個(gè)最小的啟動(dòng)項(xiàng)目。如果您希望從頭開始，只包含項(xiàng)目所需的功能和依賴項(xiàng)，那么這將非常有用。

要使用這個(gè)標(biāo)志，只需運(yùn)行命令ng new my-project --minimal，其中my-project是新項(xiàng)目的名稱。這將創(chuàng)建一個(gè)新的Angular項(xiàng)目，只包含必要的文件和依賴項(xiàng)，讓您可以從頭開始構(gòu)建項(xiàng)目。

2. 保持代碼的整潔和一致

ng lint它根據(jù)tslint.json文件中指定的規(guī)則檢查代碼中的錯(cuò)誤和樣式問題，它可以幫助你保持代碼的整潔，并與Angular樣式指南保持一致。

例如，如果您有一個(gè)名為app.component.ts的文件，它的代碼如下：

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

@Component({
selector: 'app-root',
template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent {
name = 'Angular';
}

你可以在終端上運(yùn)行ng lint，得到如下輸出：

這意味著您需要修改組件的選擇器和模板，來遵循Angular的樣式指南，也可以使用ng lint --fix來自動(dòng)修復(fù)一些錯(cuò)誤。

3. 用Sass增強(qiáng)樣式表

Sass是一個(gè)CSS預(yù)處理器，它允許您編寫更簡潔和可維護(hù)的樣式表，它為純CSS添加了變量、混合、嵌套、繼承等特性。

要在Angular CLI中使用Sass，您需要：

• 使用--style=scss flag創(chuàng)建一個(gè)新項(xiàng)目，它告訴CLI生成.scss文件替代.css文件，例如：ng new my-sassy-app --style=scss。
• 把您的樣式寫在src文件夾中的.scss文件中，可以使用任何喜歡的Sass特性，比如變量、mixins、嵌套等。當(dāng)你運(yùn)行ng serve或ng build時(shí)，CLI會(huì)自動(dòng)將Sass文件編譯成CSS。
• 使用組件裝飾器中的styleUrls屬性將您的樣式導(dǎo)入到組件中，例如：@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] })，還可以使用styles屬性以Sass語法編寫內(nèi)聯(lián)樣式。

4. 為生產(chǎn)優(yōu)化代碼

ng build --prod是Angular CLI中用來為生產(chǎn)環(huán)境構(gòu)建Angular應(yīng)用的命令， --prod flag告訴CLI使用生產(chǎn)環(huán)境配置，并對構(gòu)建過程應(yīng)用各種優(yōu)化。

在為生產(chǎn)環(huán)境構(gòu)建時(shí)，重要的是要確保應(yīng)用程序針對性能和大小進(jìn)行了優(yōu)化。ng build --prod命令應(yīng)用一些優(yōu)化，比如最小化、tree shaking和AOT (Ahead-of-Time)編譯，來減小應(yīng)用程序的大小并提高其性能。

在將Angular應(yīng)用部署到生產(chǎn)環(huán)境時(shí)，使用ng build --prod是一種最佳實(shí)踐，它確保應(yīng)用程序經(jīng)過優(yōu)化并準(zhǔn)備好供最終用戶使用。

5. 使用ng generate來節(jié)省時(shí)間和避免錯(cuò)誤

ng generate是Angular CLI中用來為Angular應(yīng)用生成新文件和工件的命令，它可以用來生成各種不同的工件，比如組件、服務(wù)、指令等。

在為Angular應(yīng)用創(chuàng)建新工件時(shí)，使用ng generate是一種最佳實(shí)踐。它確保在正確的位置創(chuàng)建新文件，并遵循推薦的結(jié)構(gòu)和命名約定。

6. 使用ng add輕松增強(qiáng)您的應(yīng)用程序

ng add是Angular CLI中的一個(gè)命令，它允許您向Angular應(yīng)用中添加新的庫或包。它使安裝和配置過程自動(dòng)化，從而更容易將新特性集成到項(xiàng)目中。在向Angular應(yīng)用中添加新庫時(shí)，使用ng add是一種最佳實(shí)踐，因為它可以確保庫被正確安裝和配置。

7. 用快捷方式更快地工作

知道一些快捷鍵來加快您的工作流程總是很有幫助的，例如，您可以簡單地使用快捷鍵ng g c來快速生成一個(gè)新組件，替代輸入ng generate component。

下面是一些更有用的快捷方式：

• ng g s：ng generate service的快捷方式，用于生成新的服務(wù)。
• ng g m：ng generate module的快捷方式，用于生成新模塊。
• ng g d：ng generate directive的快捷方式，用于生成一個(gè)新指令。
• ng g p：ng generate pipe的快捷方式，用于生成新管道。

這些快捷方式可以節(jié)省時(shí)間，讓您更容易使用Angular CLI。

8. 跨項(xiàng)目共享代碼

當(dāng)使用Angular CLI時(shí)，您可能想要?jiǎng)?chuàng)建一個(gè)新的庫來在工作空間中的多個(gè)項(xiàng)目之間共享代碼。為此您可以使用ng generate library命令，該命令在工作區(qū)的projects/ folder中創(chuàng)建一個(gè)新項(xiàng)目，可以在其中開發(fā)和發(fā)布可重用庫。通過使用ng generate library，您可以確保正確設(shè)置新庫，并遵循推薦的結(jié)構(gòu)和約定。

9. 存儲(chǔ)有關(guān)構(gòu)建過程的信息，確保應(yīng)用順利運(yùn)行

您可以使用ng build --stats-json命令來創(chuàng)建一個(gè)名為stats.json的文件，這個(gè)文件有很多關(guān)于應(yīng)用構(gòu)建的有用信息，比如bundle有多大，里面有什么。您可以將此文件與webpack-bundle-analyzer等工具一起使用，來查看應(yīng)用中占用空間的內(nèi)容，并找到使其更小、更快的方法，這是保持應(yīng)用程序平穩(wěn)運(yùn)行的好方法！

10. 確保代碼按預(yù)期工作

Angular CLI提供了一個(gè)命令ng test來在項(xiàng)目中運(yùn)行單元測試，這個(gè)命令執(zhí)行Karma測試運(yùn)行器，它是用項(xiàng)目根目錄下的Karma .conf.js文件配置的。

例如，假設(shè)我們有一個(gè)顯示消息的簡單組件：

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

@Component({
selector: 'app-hello',
template: '<h1>Hello, {{name}}!</h1>'
})
export class HelloComponent {
name = 'World';
}

我們可以為這個(gè)組件寫一個(gè)單元測試來檢查它是否顯示了正確的消息:

import { TestBed } from '@angular/core/testing';
import { HelloComponent } from './hello.component';

describe('HelloComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [HelloComponent]
});
});

it('should display the correct message', () => {
const fixture = TestBed.createComponent(HelloComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Hello, World!');
});
});

輸出：

使用ng test是一種很好的方法，可以確保我們的代碼正常工作，并在開發(fā)早期發(fā)現(xiàn)任何問題。

總之，Angular CLI是一個(gè)強(qiáng)大的工具，可以幫助開發(fā)人員簡化工作流程，優(yōu)化Angular應(yīng)用程序。通過遵循本文中概述的最佳實(shí)踐和專業(yè)技巧，開發(fā)人員可以充分利用Angular CLI的特性和功能來創(chuàng)建高質(zhì)量、高性能的應(yīng)用程序。

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論