Angular 速查表

Angular是一个基于 TypeScript 的开源 Web 应用程序框架，用于构建 Web 和移动应用程序。本文将通过讲解一些核心 API 来介绍 Angular 的一些特性。您可以参考这份 Angular 速查表，并在您的项目中使用。

Angular CLI

Angular 的 CLI 功能非常强大，让我们能够轻松完成许多操作。您只需使用 CLI 即可配置整个应用程序。以下是一些常用的命令：

• npm install -g @angular/cli：此命令将使用 npm 将 Angular CLI 安装到我们的本地机器中。
• ng new <application name>：这将使用命令设置一个新的 Angular 应用程序ng new。
• ng new <application name> --prefix best：这将创建一个新项目并将项目前缀设置为 new。
• ng new --help：这将返回所有可用的 Angular 命令列表。
• ng lint my-app：此命令检查我们的整个应用程序是否存在任何 linting 警告。
• ng lint my-app --fix：如果有任何形式的 linting 错误，此命令将修复它。
• ng lint my-app --format stylish：这会格式化我们的整个代码库。
• ng lint my-app --help：此命令返回所有可用的 linting 命令列表。
• ng add <package name>：此命令将使用您的包管理器下载新的依赖项并使用配置更改更新项目。
• ng generate component <name>：这将在我们的应用程序上创建一个新组件。我们也可以使用ng g c <name>简写来实现这一点。
• ng g d <directive name>：此命令为角度指令。
• ng g s <service name>：创建一个新的基于 Javascript 类的服务。
• ng g p <pipe name>：生成新管道
• ng g cl <destination>：这将在指定目录中创建一个新类。
• ng build：构建用于生产的应用程序并将其存储在dist目录中。
• ng serve -o：通过使用任何端口 4200 或任何可用端口在浏览器中打开应用程序来为应用程序提供服务。
• ng serve -ssl：使用 SSL 为应用程序提供服务

Angular 生命周期钩子

Angular 中的组件具有生命周期，从诞生到消亡要经历许多不同的阶段。我们可以挂钩这些不同的阶段来对我们的应用程序进行非常细粒度的控制。以下是一些挂钩：

• ngOnChanges：每当输入属性之一发生变化时就会调用此方法。
• ngOnInitngOnChanges：完成后立即调用，并且只调用一次。
• ngOnDestroy：在 Angular 销毁目录或组件之前调用
• ngDoCheck：每当运行变化检测时，就会调用此函数。
• ngAfterContentInit：在Angular 将任何内容投影到组件视图后调用。
• ngAfterContentChecked:每次通过 Angular 的变化检测机制检查给定组件的内容时都会调用此方法。
• ngAfterViewInit当组件的视图已完全初始化时调用此方法。
• ngAfterViewChecked：每次通过 Angular 的变化检测机制检查给定组件的视图时调用。

如何使用 Angular Hooks

永远记住钩子在组件或目录中工作，因此在我们的组件中使用它们，我们可以这样做：

`class ComponentName {
    @Input('data') data: Data;
    constructor() {
        console.log(`new - data is ${this.data}`);
    }
    ngOnChanges() {
        console.log(`ngOnChanges - data is ${this.data}`);
    }
    ngOnInit() {
        console.log(`ngOnInit  - data is ${this.data}`);
    }
    ngDoCheck() {
        console.log("ngDoCheck")
    }
    ngAfterContentInit() {
        console.log("ngAfterContentInit");
    }
    ngAfterContentChecked() {
        console.log("ngAfterContentChecked");
    }
    ngAfterViewInit() {
        console.log("ngAfterViewInit");
    }
    ngAfterViewChecked() {
        console.log("ngAfterViewChecked");
    }
    ngOnDestroy() {
        console.log("ngOnDestroy");
    }
}

组件 DOM

Angular 自带 DOM 功能，你可以用它来做很多事情，比如绑定数据、定义动态样式等。我们先来看看一些功能：
在深入研究这些功能之前，先看一下一个简单的 component.ts 文件，如下所示：

import { Component } from '@angular/core';
@Component({
    // component attributes
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.less']
})
export class AppComponent {
    name: 'Sunil';
}

让我们看一些模板语法：

• Interpolation：使用{{data to be displayed}}将显示来自 ts 文件的动态内容。
• <button (click)="callMethod()" ... />：向按钮添加 Click 事件以调用 ts 文件中定义的方法
• <button *ngIf="loading" ... />：向元素添加条件语句。条件语句必须遵循真值或假值。
• *ngFor="let item of items"：遍历定义的项目列表。将其描绘为 for 循环。
• <div [ngClass]="{green: isTrue(), bold: itTrue()}"/>：根据条件添加动态类。
• <div [ngStyle]="{'color': isTrue() ? '#bbb' : '#ccc'}"/>：根据条件向模板添加动态样式

组件通信

在 Angular 中，将数据从一个组件传递到另一个组件可能有点棘手。你可以将数据从子组件传递到父组件，从父组件传递到父组件，以及在两个不相关的组件之间传递：

• input()：此方法有助于将值传递到子组件。

`
export class SampleComponent {
@Input() value: 'Some Data should go in here';
}
`
子组件在父组件中注册如下：

<child-component [value]="data"></child-component>

• output()：此方法向父组件发出事件。可以将一组数据传递到发出的事件中，使其成为从子组件向父组件传递数据的媒介：

从子组件发出事件：

@Output() myEvent: EventEmitter < MyModel > = new EventEmitter();
calledEvt(item: MyModel) {
    this.myEvent.emit(item);
}

然后父组件监听该事件：

<parent-component 
(myEvent)="callMethod()"></parent-component>

角度路由

路由是 Angular 的另一个很酷的功能，通过 Angular 路由系统我们可以浏览页面，甚至添加路由保护。

• 组件路由：我们可以通过定义路径和要渲染的组件来在应用程序中定义路由：` const routes: Routes = [ { path: 'home', component:HomeComponent }, { path: 'blog/:id', component: BlogPostCompoent }, { path: '**', component: PageNotFoundComponent } ]; `

为了使路由正常工作，请将此添加到您的angular.module.ts文件中：

RouterModule.forRoot(routes)

在某些情况下，您想要跟踪路线中发生的事情，您可以添加此项以在您的角度项目中启用跟踪：

RouterModule.forRoot(routes,{enableTracking:true})

为了在 Angular 中浏览页面，我们可以使用routerLink包含我们要路由到的组件名称的属性：

<a routerLink="/home" routerLinkActive="active"> Crisis Center</a>

当激活时，将向routerLinkActive="active"链接添加一个活动类。

编写路由守卫

我们可以定义守卫来进行路由认证。我们可以使用该类CanActivate来做到这一点：

class AlwaysAuthGuard implements CanActivate {        
        canActivate() {
                return true;
        }
}

为了在我们的路线中使用这个固定的守卫，我们可以在这里定义它：

const routes: Routes = [
  { path: 'home', component:HomeComponent },
  { path: 'blog/:id', component: BlogPostCompoent,canActivate: [AlwaysAuthGuard],  },
    { path: '**', component: PageNotFoundComponent }
];

Angular 服务

当您可以执行诸如处理 http 请求和在应用程序上播种数据之类的操作时，Angular 服务会非常方便。它们专注于呈现数据并将数据访问委托给服务。

@Injectable()
export class MyService {
    public users: Users[];
    constructor() { }
    getAllUsers() {
        // some implementation
    }
}

要在组件中使用此服务，请使用 import 语句导入它，然后在构造函数中注册它

import MyService from '<path>'
constructor(private UserService: MyService) 

为了简化操作，我们可以使用此命令在 Angular 中生成服务

ng g s <service name>

Http 服务

Angular 自带 http 服务，用于发起 http 请求。要使用它，首先需要将其导入到根模块中：

import { HttpClientModule} from "@angular/common/http";

导入之后，我们现在可以在我们的服务中使用它来发出 http 请求：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
    providedIn: 'root'
})
export class UserService {
    constructor(private http: HttpClient) { }
    getAllUsers() {
        return this.http.get(`${baseURL}admin/list-users`);
    }
}

Http拦截器

拦截器是一段代码，它会在你的应用程序收到每个HTTP请求时被激活。你可以将拦截器想象成 Node.js 中的一个中间件，所有发出的 HTTP 请求都会经过这段代码。

要定义拦截器，请http-interceptor.ts在 src 目录中创建一个文件并添加以下内容：

import { Injectable } from '@angular/core';
import {
    HttpEvent,
    HttpInterceptor,
    HttpHandler,
    HttpRequest,
    HttpErrorResponse,
    HttpResponse
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
@Injectable({
    providedIn: 'root'
})
export class HttpConfigInterceptor implements HttpInterceptor {
    constructor() { }
    intercept(req: HttpRequest<any>, next: HttpHandler) {
        // Get the auth token from  localstorage.
        const authToken = localStorage.getItem('token');
        // Clone the request and replace the original headers with
        // cloned headers, updated with the authorization.
        const authReq = req.clone({
            headers: req.headers.set('Authorization', authToken)
        });
        // send cloned request with header to the next handler.
        return next.handle(authReq);
    }
}

这是一个简单的拦截器，用于检查用户设备本地存储中是否有 token。如果存在，它会将 token 传递到所有 http 头中。

管道

Angular 中的管道使我们能够将数据转换为任何特定格式。例如，您可以编写一个简单的管道，将整数格式化为货币格式，或将日期格式化为任何格式。Angular
附带一些内置管道，例如日期管道和货币管道。

我们也可以按照如下方式定义我们自己的自定义管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'exponentialStrength' })
export class ExponentialStrengthPipe implements PipeTransform {
    transform(value: number, exponent?: number): number {
        return Math.pow(value, isNaN(exponent) ? 1 : exponent);
    }
}

要在我们的组件中使用管道，我们可以这样做：


{{power | exponentialStrength: factor}}


赞助：

WrapPixel 提供的免费 Angular 模板

希望您喜欢我们的 Angular 速查表，它能帮助您进行 Angular 开发。同样，Angular 模板也能为您的项目提供帮助。它们拥有精美设计的界面和随时可用的组件，可以节省您的时间和金钱。此外，您还可以找到 WraPixel 提供的最佳免费 Angular 模板。您可以零投资下载，并将其用于您的个人和商业项目。