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

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.jsAngular 需要 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 中包含一个服务器,方便你在本地构建和提供应用。

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/150981.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解决ubuntu23.10 wifi不能使用的问题

解决ubuntu23.10 wifi不能使用的问题 今天升级到了ubuntu23.10之后&#xff0c;wifi不能使用。 参考此视频解决了问题&#xff1a; https://www.youtube.com/watch?appdesktop&vn92O8rNKVb0 sudo lshw -class networkcd /etc/pm/sleep.dlssudo touch configsudo gedit co…

odoo16 一个比较复杂的domain

一个比较复杂的domain 今天在做项目管理的二开&#xff0c;碰到一个比较复杂的domain domain"[(user_ids, in, uid),(state, in, (已发布,进行中,待审核))]"domain"[&amp;,|,(user_ids, in, uid),(last_task_user_ids, in, uid),(state, , 待审核)]"需…

Java制作俄罗斯方块

Java俄罗斯方块小游戏 import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.KeyEvent; import java.awt.event.KeyListener; import java.util.ArrayList; import java.util.List; imp…

【Java并发编程八】synchronized原理

synchronized的基本使用 可以在代码中加入synchronized代码块&#xff0c;也可以在方法的返回值前面加上synchronized声明。一把锁只能同时被一个线程获取&#xff0c;没有获得锁的线程只能等待。每个实例都对应有自己的一把锁&#xff0c;不同实例之间互不影响。synchronized修…

C#,怎么修改(VS)Visual Studio 2022支持的C#版本

一些文字来自于 Microsoft . &#xff08;只需要读下面的红色文字即可&#xff01;&#xff09; 1 C# 语言版本控制 最新的 C# 编译器根据项目的一个或多个目标框架确定默认语言版本。 Visual Studio 不提供用于更改值的 UI&#xff0c;但可以通过编辑 .csproj 文件来更改值。…

1688阿里巴巴官方开放平台API接口获取商品详情、商品规格信息列表、价格、宝贝详情数据调用示例说明

商品详情API接口在电商平台和购物应用中的作用非常重要。它提供了获取商品详细信息的能力&#xff0c;帮助用户了解和选择合适的商品&#xff0c;同时也支持开发者进行竞品分析、市场研究和推广营销等工作&#xff0c;以提高用户体验和促进销售增长。 1688.item_get-获得1688商…

SpringBoot 注解开发

利用自定义注解&#xff0c;解决问题 例1 自定义注解限制请求 场景&#xff1a;前端发起的频繁的请求&#xff0c;导致服务器压力过大。需要对后端接口进行限流处理&#xff0c;每个接口都需要做限流处理的话就会导致代码冗余&#xff0c;此时就可以利用注解进行解决 非注解形…

单链表的实现(Single Linked List)---直接拿下!

单链表的实现&#xff08;Single Linked List&#xff09;—直接拿下&#xff01; 文章目录 单链表的实现&#xff08;Single Linked List&#xff09;---直接拿下&#xff01;一、单链表的模型二、代码实现&#xff0c;接口函数实现①初始化②打印链表③创建一个结点④尾插⑤尾…

2023年网络安全竞赛—内存取证解析

内存取证 目录 内存取证 解析如下: 任务:内存取证 *任务说明:仅能获取win20230306的IP地址 FTP用户名:user,密码:123456 在服务器中下载内存片段,在内存片段中获取主机信息&

Unity 场景烘培 ——unity Post-Processing后处理1(四)

提示&#xff1a;文章有错误的地方&#xff0c;还望诸位大神不吝指教&#xff01; 文章目录 前言一、Post-Processing是什么&#xff1f;二、安装使用Post-Processing1.安装Post-Processing2.使用Post-Processing&#xff08;1&#xff09;.添加Post-process Volume&#xff08…

malloc 和 new的区别

在 C 中&#xff0c;malloc 和 new 都是用于动态分配内存的方法&#xff0c;但它们有一些重要的区别。以下是关于 malloc 和 new 的常见面试内容及答案的总结&#xff1a; 1. 区别&#xff1a; malloc 是 C 语言的函数&#xff0c;而 new 是 C 中的运算符。malloc 只分配内存…

Flutter 3.16 中带来的更新

Flutter 3.16 中带来的更新 目 录 1. 概述2. 框架更新2.1 Material 3 成为新默认2.2 支持 Material 3 动画2.3 TextScaler2.4 SelectionArea 更新2.5 MatrixTransition 动画2.6 滚动更新2.7 在编辑菜单中添加附加选项2.8 PaintPattern 添加到 flutter_test 3. 引擎更新&#xf…

文件隐藏 [极客大挑战 2019]Secret File1

打开题目 查看源代码发现有一个可疑的php 访问一下看看 点一下secret 得到如下页面 响应时间太短我们根本看不清什么东西&#xff0c;那我们尝试bp抓包一下看看 提示有个secr3t.php 访问一下 得到 我们看见了flag.php 访问一下可是什么都没有 那我们就进行代码审计 $file$_…

Servlet---上传文件

文章目录 上传文件的方法上传文件的示例前端代码示例后端代码示例 上传文件的方法 上传文件的示例 前端代码示例 <body><form action"upload" method"post" enctype"multipart/form-data"><input type"file" name&qu…

2023年中国地产SaaS分类、产业链及市场规模分析[图]

SaaS是一种基于云计算技术&#xff0c;通过订阅的方式向互联网向客户提供访问权限以获取计算资源的一项软件即服务。地产SaaS则是SaaS的具体应用&#xff0c;提供了一个线上平台&#xff0c;用于协助房地产供应商与购房者、建筑承建商、材料供应商及房地产资产管理公司之间的协…

【Linux网络】详解使用http和ftp搭建yum仓库,以及yum网络源优化

目录 一、回顾yum的原理 1.1yum简介 yum安装的底层原理&#xff1a; yum的好处&#xff1a; 二、学习yum的配置文件及命令 1、yum的配置文件 2、yum的相关命令详解 3、yum的命令相关案例 三、搭建yum仓库的方式 1、本地yum仓库建立 2、通过http搭建内网的yum仓库 3、…

Sentinel 热点规则 (ParamFlowRule)

Sentinel 是面向分布式、多语言异构化服务架构的流量治理组件&#xff0c;主要以流量为切入点&#xff0c;从流量路由、流量控制、流量整形、熔断降级、系统自适应过载保护、热点流量防护等多个维度来帮助开发者保障微服务的稳定性。 SpringbootDubboNacos 集成 Sentinel&…

Navicat for mysql 无法连接到虚拟机的linux系统下的mysql

原创/朱季谦 最近在linux Centos7版本的虚拟机上安装了一个MySql数据库&#xff0c;发现本地可以正常ping通虚拟机&#xff0c;但Navicat则无法正常连接到虚拟机里的MySql数据库&#xff0c;经过一番琢磨&#xff0c;发现解决这个问题的方式&#xff0c;很简单&#xff0c;总共…

ffmpeg知识点整理

使用FFmepg进行视频转码、视频格式转换、图片提取等&#xff01;_ffmepg -c:v-CSDN博客 中文文档&#xff1a; ffmpeg 中文手册 (beandrewang.github.io) 笔记&#xff1a; 通用规则是&#xff0c;所有选项作用于其后边的第一个文件。因此&#xff0c;顺序是非常重要的&…

Appium移动自动化测试--安装Appium

Appium 自动化测试是很早之前就想学习和研究的技术了&#xff0c;可是一直抽不出一块完整的时间来做这件事儿。现在终于有了。 反观各种互联网的招聘移动测试成了主流&#xff0c;如果再不去学习移动自动化测试技术将会被淘汰。 web自动化测试的路线是这样的&#xff1a;编程语…