1.什么是Angular?

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 命令可以自动生成组件,如下所示:

typescript 复制代码
import { Component } from '@angular/core';

@Component({
  selector: 'hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent {

}

下面是一个最小化的 Angular 组件:

typescript 复制代码
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.
}

要使用此组件,请在模板中编写以下内容:

typescript 复制代码
<hello-world></hello-world>

当 Angular 渲染此组件时,生成的 DOM 如下所示:

html 复制代码
<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。此功能的应用之一是插入动态文本,如下例子所示。

typescript 复制代码
import { Component } from '@angular/core';

@Component ({
  selector: 'hello-world-interpolation',
  templateUrl: './hello-world-interpolation.component.html'
})
export class HelloWorldInterpolationComponent {
    message = 'Hello, World!';
}

这里 message 的值来自上面的组件类:

html 复制代码
<!--这里所用的双花括号,代表 Angular 对其中的内容进行插值。-->
<p>{{ message }}</p>

当应用加载组件及其模板时,用户将看到以下内容:

html 复制代码
<p>Hello, World!</p>
2.2 属性绑定

Angular 还支持属性绑定,以帮助你设置 HTML 元素的 Property 和 Attribute 的值,并将这些值传给应用的展示逻辑。

假设有以下的组件类:

typescript 复制代码
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);
  }
}

在模板中编写如下内容:

html 复制代码
<!--这里所用的方括号,该语法表明你正在将 Property 或 Attribute 绑定到组件类中的值。-->
<p [id]="sayHelloId" [style.color]="fontColor">My color is {{ fontColor }}</p>

当应用加载组件及其模板时,用户将看到以下内容:

html 复制代码
<p id="1" style="color: blue;">My color is blue</p>
2.3 声明事件监听器

通过在圆括号中指定事件名称来声明一个事件监听器。该事件监听器可以来监听并响应用户的操作,比如按键、鼠标移动、单击和触摸等。

在模板中编写如下内容:

html 复制代码
<button type="button" [disabled]="canClick" (click)="sayMessage()">Trigger alert message</button>

当用户点击按钮时,将会调用组件类中的sayMessage()方法,显示 Hello, World

2.4 指令

可以用指令来为模板添加额外功能。Angular 中最常用的指令是 *ngIf*ngFor。你可以使用指令执行各种任务,比如动态修改 DOM 结构。

以下代码是 *ngIf 指令的例子:

typescript 复制代码
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!";
    }
  }
}
html 复制代码
<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,请打开终端/控制台窗口,并运行如下命令:

powershell 复制代码
npm install -g @angular/cli

在 Windows 客户端计算机上,默认禁用 PowerShell 脚本的执行。要允许执行 npm 全局二进制文件所需的 PowerShell 脚本,你必须设置以下执行策略内容:

powershell 复制代码
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

3. 创建工作区和初始化应用

我们是在 Angular 工作区的上下文中开发应用。要创建一个新的工作区和初始化应用:

  • 运行 CLI 命令 ng new <project-name>,其中<project-name>是 Angular 应用的名称,如:
powershell 复制代码
ng new my-app
  • ng new 命令会提示你要把哪些特性包含在初始应用中。按 Enter 或 Return 键可以接受默认值。

Angular CLI 会安装必要的 Angular npm 包和其它依赖包。这可能要花几分钟的时间。

CLI 会创建一个新的工作区和一个简单的欢迎应用,随时可以运行它。

4. 运行应用

Angular CLI 中包含一个服务器,方便你在本地构建和提供应用。

  • 进入 workspace 文件夹,比如 my-app
  • 运行下列命令。
powershell 复制代码
cd my-app
ng serve --open

ng serve 命令会启动开发服务器、监视文件,并在这些文件发生更改时重建应用。
--open(或者只用 -o 缩写)选项会自动打开你的浏览器,并访问 http://localhost:4200/。

相关推荐
Myli_ing24 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风26 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave33 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟35 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm2 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue