Angular
Angular 是一个应用设计框架与开发平台，旨在创建高效而精致的单页面应用。
什么是Angular？
Angular 是一个基于 TypeScript 构建的开发平台。它包括：
- 一个基于组件的框架，用于构建可伸缩的 Web 应用。
- 一组完美集成的库，涵盖各种功能，包括路由、表单管理、客户端-服务器通信等。
- 一套开发工具，可帮助你开发、构建、测试和更新代码
Angular 应用
1. 组件
组件是构成应用的砖块。组件包括三个部分：带有 @Component() 装饰器的 TypeScript 类、HTML 模板和样式文件。
1.1 @Component() 装饰器
@Component() 装饰器会指定如下 Angular 专属信息：
- 一个 CSS 选择器，用于定义如何在模板中使用组件。模板中与此选择器匹配的 HTML 元素将成为该组件的实例。
- 一个 HTML 模板，用于指示 Angular 如何渲染此组件。
- 一组可选的 CSS 样式，用于定义模板中 HTML 元素的外观。
通过 ng g component hello-world 命令可以自动生成组件，如下所示：
import { Component } from '@angular/core';
@Component({
selector: 'hello-world',
templateUrl: './hello-world.component.html',
styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent {
}
下面是一个最小化的 Angular 组件：
import { Component } from '@angular/core';
@Component({
selector: 'hello-world',
template: `
<h2>Hello World</h2>
<p>This is my first component!</p>
`
})
export class HelloWorldComponent {
// The code in this class drives the component's behavior.
}
要使用此组件，请在模板中编写以下内容：
<hello-world></hello-world>
当 Angular 渲染此组件时，生成的 DOM 如下所示：
<hello-world>
<h2>Hello World</h2>
<p>This is my first component!</p>
</hello-world>
Angular 的组件模型提供了强大的封装能力和直观的应用结构。组件还能让你的应用更容易进行单元测试，并可以提高代码的整体可读性。
2. 模板
每个组件都有一个 HTML 模板，用于声明该组件的渲染方式。你可以内联它或用文件路径定义此模板。
2.1 插值（interpolation）
Angular 添加了一些语法元素以扩展 HTML，让你可以从组件中插入动态值。当组件的状态更改时，Angular 会自动更新已渲染的 DOM。此功能的应用之一是插入动态文本，如下例子所示。
import { Component } from '@angular/core';
@Component ({
selector: 'hello-world-interpolation',
templateUrl: './hello-world-interpolation.component.html'
})
export class HelloWorldInterpolationComponent {
message = 'Hello, World!';
}
这里 message 的值来自上面的组件类：
<!--这里所用的双花括号，代表 Angular 对其中的内容进行插值。-->
<p>{{ message }}</p>
当应用加载组件及其模板时，用户将看到以下内容：
<p>Hello, World!</p>
2.2 属性绑定
Angular 还支持属性绑定，以帮助你设置 HTML 元素的 Property 和 Attribute 的值，并将这些值传给应用的展示逻辑。
假设有以下的组件类：
import { Component } from '@angular/core';
@Component ({
selector: 'hello-world-bindings',
templateUrl: './hello-world-bindings.component.html'
})
export class HelloWorldBindingsComponent {
fontColor = 'blue';
sayHelloId = 1;
canClick = false;
message = 'Hello, World';
sayMessage() {
alert(this.message);
}
}
在模板中编写如下内容：
<!--这里所用的方括号，该语法表明你正在将 Property 或 Attribute 绑定到组件类中的值。-->
<p [id]="sayHelloId" [style.color]="fontColor">My color is {{ fontColor }}</p>
当应用加载组件及其模板时，用户将看到以下内容：
<p id="1" style="color: blue;">My color is blue</p>
2.3 声明事件监听器
通过在圆括号中指定事件名称来声明一个事件监听器。该事件监听器可以来监听并响应用户的操作，比如按键、鼠标移动、单击和触摸等。
在模板中编写如下内容：
<button type="button" [disabled]="canClick" (click)="sayMessage()">Trigger alert message</button>
当用户点击按钮时，将会调用组件类中的sayMessage()方法，显示 Hello, World 。
2.4 指令
可以用指令来为模板添加额外功能。Angular 中最常用的指令是
*ngIf和*ngFor。你可以使用指令执行各种任务，比如动态修改 DOM 结构。
以下代码是 *ngIf 指令的例子:
import { Component } from '@angular/core';
@Component({
selector: 'hello-world-ngif',
templateUrl: './hello-world-ngif.component.html'
})
export class HelloWorldNgIfComponent {
message = "I'm read only!";
canEdit = false;
onEditClick() {
this.canEdit = !this.canEdit;
if (this.canEdit) {
this.message = 'You can edit me!';
} else {
this.message = "I'm read only!";
}
}
}
<h2>Hello World: ngIf!</h2>
<button type="button" (click)="onEditClick()">Make text editable!</button>
<div *ngIf="canEdit; else noEdit">
<p>You can edit the following paragraph.</p>
</div>
<ng-template #noEdit>
<p>The following paragraph is read only. Try clicking the button!</p>
</ng-template>
<p [contentEditable]="canEdit">{{ message }}</p>
Angular 的声明式模板可以将应用的逻辑和外观完全分开。模板基于标准 HTML，因此易于构建、维护和更新。
3. Angular CLI
Angular CLI 是开发 Angular 应用最快、最简单和推荐的方式。Angular CLI 能简化许多任务。
| 命令 | 详情 |
|---|---|
| ng build | 把 Angular 应用编译到一个输出目录中。 |
| ng serve | 构建你的应用并启动开发服务器，当有文件变化时就重新构建。 |
| ng generate | 基于原理图（schematic）生成或修改某些文件。 |
| ng test | 在指定的项目上运行单元测试。 |
| ng e2e | 构建一个 Angular 应用并启动开发服务器，然后运行端到端测试。 |
4. 自带库
你可以通过Angular平台，来引入 Angular 所提供的众多自带库，以扩展应用的功能。
| 库 | 详情 |
|---|---|
| Angular 路由器 | 高级的客户侧导航功能与基于 Angular 组件的路由机制。支持惰性加载、嵌套路由、自定义路径匹配规则等。 |
| Angular 表单 | 统一的表单填报与验证体系。 |
| Angular HttpClient | 健壮的 HTTP 客户端库，它可以支持更高级的客户端-服务器通讯。 |
| Angular 动画 | 丰富的动画体系，用于驱动基于应用状态的动画。 |
| Angular PWA | 一些用于构建渐进式 Web 应用（PWA）的工具，包括 Service Worker 和 Web 应用清单（Manifest）。 |
| Angular 原理图 | 一些搭建脚手架、重构和升级的自动化工具。用于简化大规模应用的开发。 |
搭建本地开发环境和工作区
1. 前提条件
要想在你的本地系统中安装 Angular，需要如下步骤：
| 需求 | 详情 |
|---|---|
| Node.js | Angular 需要 Node.js 的活跃 LTS 版或维护期 LTS 版。(参阅：https://nodejs.org/en) |
| npm 包管理器 | Angular、Angular CLI 以及 Angular 应用都要依赖 npm 包来实现很多特性和功能。要下载并安装 npm 包，你需要一个 npm 包管理器。本指南使用 npm 客户端命令行界面，该界面默认安装在 Node.js。要检查你是否安装了 npm 客户端，请在终端窗口中运行 npm -v。 |
2. 安装 Angular CLI
你可以使用 Angular CLI 来创建项目，生成应用和库代码，以及执行各种持续开发任务，比如测试、打包和部署。
要安装 Angular CLI，请打开终端/控制台窗口，并运行如下命令：
npm install -g @angular/cli
在 Windows 客户端计算机上，默认禁用 PowerShell 脚本的执行。要允许执行 npm 全局二进制文件所需的 PowerShell 脚本，你必须设置以下执行策略内容:
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
3. 创建工作区和初始化应用
我们是在 Angular 工作区的上下文中开发应用。要创建一个新的工作区和初始化应用：
- 运行 CLI 命令
ng new <project-name>，其中<project-name>是 Angular 应用的名称，如：
ng new my-app
-
ng new命令会提示你要把哪些特性包含在初始应用中。按 Enter 或 Return 键可以接受默认值。
Angular CLI 会安装必要的 Angular npm 包和其它依赖包。这可能要花几分钟的时间。
CLI 会创建一个新的工作区和一个简单的欢迎应用，随时可以运行它。
4. 运行应用
Angular CLI 中包含一个服务器，方便你在本地构建和提供应用。文章来源：https://www.toymoban.com/news/detail-827743.html
- 进入 workspace 文件夹，比如
my-app。 - 运行下列命令。
cd my-app
ng serve --open
ng serve 命令会启动开发服务器、监视文件，并在这些文件发生更改时重建应用。--open（或者只用 -o 缩写）选项会自动打开你的浏览器，并访问 http://localhost:4200/。文章来源地址https://www.toymoban.com/news/detail-827743.html
到了这里，关于１.什么是Angular的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
