[Angular] 笔记1:开发设置 , 双向绑定

1 设置开发环境

1.1 安装 node

下载 node,因为要使用 npm 工具,教程中使用 Angualr 14, 最新版 node 20 用不了,安装 node 16 就可以。

1.2 安装 Angular CLI

Angular CLI 是用于创建 Angular 工程的工具集,使用如下命令:
npm i @angular/cli@14 --global ,

--global 选项使 ng 命令随处可用。

使用如下命令查看已经安装的 npm global module: npm list -global --depth 0.

查看 cli 版本使用 ng version,命令格式的写法参考 help 命令输出。

1.3 新建工程

使用 ng new 创建工程,例如:
ng new my-app

1.4 运行

在项目文件夹内,运行 ng serve:

PS D:\Angular\my-app> ng serve
✔ Browser application bundle generation complete.Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   2.41 MB | 
polyfills.js          | polyfills     | 318.60 kB | 
styles.css, styles.js | styles        | 210.63 kB | 
main.js               | main          |   9.11 kB | 
runtime.js            | runtime       |   6.51 kB | | Initial Total |   2.94 MBBuild at: 2023-12-12T15:12:29.084Z - Hash: 885651a8efc046d5 - Time: 5530ms** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

在路径 http://localhost:4200/ 即可看到项目运行界面。

3. 双向绑定

Angular 使用 ngModel指令实现双向绑定,双向绑定应用于 form 。ngModel 只适用于 input, textarea, 以及 radio button.
实现双向绑定有两步:

  1. 代码中设属性
  2. 监听 DOM 元素的变化,

[()] 的写法称为 banana box (香蕉盒)。
举例:
app.component.ts:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'],
})
export class AppComponent {favoriteAnimal: string = "turtle";constructor() {}
}

app.component.html:

<router-outlet></router-outlet>
<h2>Two-way Binding Example</h2>
<input [(ngModel)]="favoriteAnimal" />
<p>{{ favoriteAnimal }}</p>

{{ favoriteAnimal }} 是字符串插值,Angular 使用双大括号。
要使用 ngModel,还需要引入 FormsModule 模块:
app.module.ts:

 imports: [BrowserModule, AppRoutingModule, FormsModule],

app.components.ts:

import { FormsModule } from '@angular/forms';

页面显示:

在这里插入图片描述

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

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

相关文章

(第61天)多租户架构(CDB/PDB)

背景介绍 Oracle 的 CDB 和 PDB 是 Oracle 12C 及以上版本中引入的新概念,用于管理多租户数据库环境。 Oracle 数据库是商业数据库领域中的翘楚,其强大的功能和高可靠性备受企业用户追捧。而随着云计算和大数据时代的到来,Oracle 也不断推出新的技术以适应这些变化。CDB 技…

我为什么要当程序员?

阿七毕业于上海一所大学的管理学院&#xff0c;在读期间没写过一行 Java 代码。 管理学院&#xff0c;你出来能干啥呀&#xff1f;什么公司&#xff0c;会让你一个刚毕业的学生当管理呢&#xff1f;所有我们学院的同学&#xff0c;很多都跨科目考研、出国、创业。 家里没钱的…

【leetcode】链表总结

说明&#xff1a;本文内容来自于代码随想录 链表基本操作 https://leetcode.cn/problems/design-linked-list/ 删除节点 https://leetcode.cn/problems/remove-linked-list-elements/description/&#xff0c;删除节点&#xff0c;虚拟头节点。定义两个节点&#xff0c;分别…

『OPEN3D』1.5.2 动手实现点云栅格/体素最近邻

本专栏地址: https://blog.csdn.net/qq_41366026/category_12186023.html?spm=1001.2014.3001.5482 NEARBY6实现的voxel可视化 一种NEARBY14实现的可视化voxel

【LeetCode每日一题】152. 乘积最大子数组

题目&#xff1a; 给你一个整数数组 nums &#xff0c;请你找出数组中乘积最大的非空连续子数组&#xff08;该子数组中至少包含一个数字&#xff09;&#xff0c;并返回该子数组所对应的乘积。 思路 由于做了53. 最大子数组和 下意识觉得求出所有元素的以该元素结尾的连续…

QuPath学习 ② HE scripts

文献中详细介绍了处理H&E scripts的详细过程&#xff0c;计算H&E染色的全切片中的肿瘤基质百分比。 步骤&#xff1a; 1.将相关幻灯片添加到QuPath项目中。 2.对于项目中的每张幻灯片&#xff0c;围绕一个有代表性的肿瘤区域绘制一个注释。 3.运行“Estimate _ bac…

LeetCode190. Reverse Bits

文章目录 一、题目二、题解 一、题目 Reverse bits of a given 32 bits unsigned integer. Note: Note that in some languages, such as Java, there is no unsigned integer type. In this case, both input and output will be given as a signed integer type. They sho…

【Flink-Sql-Kafka-To-ClickHouse】使用 FlinkSql 将 Kafka 数据写入 ClickHouse

【Flink-Sql-Kafka-To-ClickHouse】使用 FlinkSql 将 Kafka 数据写入 ClickHouse 1&#xff09;需求分析2&#xff09;功能实现3&#xff09;准备工作3.1.Kafka3.2.ClickHouse 4&#xff09;Flink-Sql5&#xff09;验证 1&#xff09;需求分析 1、数据源为 Kafka&#xff0c;定…

每日一博 - Cache Miss Attack

文章目录 概述解决思路缓存空值键并设置短期 TTL&#xff08;生存时间&#xff09;使用布隆过滤器 伪代码1. 缓存空值键并设置短期 TTLa. 缓存空值键b. 设置短期 TTL 2. 使用布隆过滤器a. 集成布隆过滤器b. 查询布隆过滤器 进一步优化系统性能的建议 概述 在缓存管理中&#x…

基于VGG-16+Android+Python的智能车辆驾驶行为分析—深度学习算法应用(含全部工程源码)+数据集+模型(三)

目录 前言总体设计系统整体结构图系统流程图 运行环境模块实现1. 数据预处理2. 模型构建3. 模型训练及保存1&#xff09;模型训练2&#xff09;模型保存 4. 模型生成1&#xff09;模型导入及调用2&#xff09;相关代码&#xff08;1&#xff09;布局文件&#xff08;2&#xff…

bug-ku--计算器

F12 maxlength"1" 限制的是你能输入几位数 改成3就行 来那个数相相加就能输入了 flag{464f5f406e7e182014500fc49f7aedfc}

Mysql和Oracle的区别

MySQL 和 Oracle 是两种常用的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;它们有许多相似之处&#xff0c;也有一些显著的不同点。 相同点&#xff1a; 关系型数据库&#xff1a; MySQL 和 Oracle 都是关系型数据库&#xff0c;采用表&#xff08;table&a…

Vue3+Ts项目——登录页面跳转到首页

前言&#xff1a;根据我上篇所实现的左边菜单栏之后&#xff0c;需要登录成功跳转home页面。主要分为三步。 第一步&#xff1a;创建三个ts文件结合pinia缓存登录信息和token src\api\userTypes.ts 就是个接口类方便页面和另一个ts文件数据传递&#xff0c;其实也可以不用 …

【异步绘制】UIView刷新原理 与 异步绘制

快捷目录 壹、 iOS界面刷新机制贰、浅谈UIView的刷新与绘制概述一.UIView 与 CALayer1. UIView 与 CALayer的关系2. CALayer的一些常用属性contents属性contentGravity属性contentsScale属性maskToBounds属性contentsRect属性 二.View的布局与显示1.图像显示原理2.布局layoutSu…

【UE】在蓝图中修改材质实例的参数的两种方式

目录 方式一、通过“在材质上设置标量/向量参数值”节点实现 方式二、通过“设置标量/向量参数值”节点实现 方式一、通过“在材质上设置标量/向量参数值”节点实现 1. 在材质中设置了两个参数 2. 创建材质实例 3. 创建一个蓝图&#xff0c;对静态网格体赋予材质实例 在事件…

【C++初阶】类与对象(上)

类与对象&#xff08;上&#xff09; 1.面向过程和面向对象初步认识2.类的引入3.类的定义4.类的访问限定符及封装4.1 访问限定符4.2 封装 5.类的作用域6.类的实例化7.类对象模型7.1 如何计算类对象的大小7.2 结构体内存对齐规则 8.this指针8.1 this指针的引出8.2 this指针的特性…

C语言——高精度减法

相较于高精度加法&#xff0c;高精度减法会有一些不同&#xff0c;如果是num1 - num2的话&#xff0c;如果num1 > num2时&#xff0c;也就是结果为正时&#xff0c;只需要对每一位进行按位相减&#xff0c;如果不够就向下一位借位&#xff1b;但是如果是num1 < num2时&am…

【算法与数据结构】53、LeetCode最大子数组和

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;程序一共两个变量&#xff0c;一个result一个count。result用来记录最终的结果&#xff0c;count记录当…

LAMP平台——构建PHP运行环境

在构建LAMP平台时&#xff0c;各组件的安装顺序依次为Linux、Apache、MySQL、PHP。其中Apache和 MySQL的安装并没有严格的顺序&#xff1b;而PHP环境的安装一般放到最后&#xff0c;负责沟通Web服务器和数据库 系统以协同工作。 PHP 即 Hypertext Preprocessor&#xff08;超级…

数据结构 之map/set练习

文章目录 1. 只出现一次的数字算法原理&#xff1a;代码&#xff1a; 2. 随机链表的复制算法原理&#xff1a;代码&#xff1a; 3. 宝石与石头算法原理&#xff1a;代码&#xff1a; 4. 坏键盘打字算法原理&#xff1a;代码&#xff1a; 5. 前K个高频单词算法原理&#xff1a;代…