AngularJS入门

news/2024/4/24 13:45:37/文章来源:https://blog.csdn.net/ab15176142633/article/details/136234525

1. AngularJS简介

AngularJS是一个JavaScript框架,用js编写的库

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<!-- 放在<body> 元素的底部。提高网页加载速度 -->

1.1. AngularJS 扩展了 HTML

AngularJS 通过 ng-directives扩展了HTML

ng-app 指令定义一个 AngularJS 应用程序。 若不声明,将直接显示表达式。

ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。一般使用 **{ { ng-model 的值 }}**获取数据

<div ng-app=""><p>名字 : <input type="text" ng-model="name"></p><h1>Hello {{name}}</h1>    <!-- 常用方式 --><p ng-bind="name"></p>
</div>

当网页加载完毕,AngularJS 自动开启。

2. AngularJS表达式

AngularJS 使用 表达式 把数据绑定到 HTML

使用{ { 表达式 }}进行数据的输出

表达式可以包含字符,操作符,变量

表达式可以写在HTML中

不支持条件判断,循环及异常

支持过滤器

<div ng-app=""><p>我的第一个表达式: {{ 5 + 5 }}</p>
</div>

2.1. AngularJS数字

类似于JavaScript的数字

<div ng-app="" ng-init="quantity=1;cost=5">  <!-- ng-init用来初始化数据,不常用 --><p> 总价: {{ quantity * cost }} </p>
</div>

2.2. AngularJS字符串

类似于JavaScript的字符串

<div ng-app="" ng-init="firstName='Tom';lastName='Jack'"><p> 姓名: {{ firstName + " " + lastName }} </p>
</div>

2.3. AngularJS 对象

类似于JavaScript的对象

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"><p> 姓为 {{ person.lastName }} </p>
</div>

2.4. AngularJS 数组

类似于JavaScript的数组

<div ng-app="" ng-init="points=[1,12,9,3,40]"><p> 第三个值为 {{ points[2] }} </p>
</div>

3. AngularJS指令

通过 指令 来扩展HTML。通过内置的指令来为应用添加功能,可以自定义指令。

指令带有前缀 ng- ng-app指令用来初始化一个 AngularJS应用程序

3.1. 数据绑定

表达式**{{ firstName }}** 通过 ng-model=“firstName” 进行同步。

<div ng-app="" ng-init="firstName='Tom'"><input type="text" ng-model="firstName"><!-- 默认为Tom,输入值时 下方的表达式值会改变 -->{ { firstName }}
</div>

3.2. 重复HTML元素

ng-repeat指令:重复一个HTML元素,用作循环

<div ng-app="" ng-init="names=['Tom','Jack','Hege']"><ul><li ng-repeat="i in names"> {{ i }} </li></ul>
</div>

用在一个对象数组上

<div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"><ul><li ng-repeat="i in names"> {{ i.name + "," + i.country }} </li></ul>
</div>

3.3. ng-app指令

在网页加载完毕时自动初始化一个 AngularJS应用程序

通过一个值**(ng-app=“myCode”)**连接到代码模块

3.4. ng-init指令

为 AngularJS 应用程序定义了 初始值。一般不使用

3.5. ng-model 指令

/// ng-model="name" 声明一个name变量/// $scope.name 使用name变量
  1. 绑定应用程序数据到 HTML 控制器(input, select, textarea)的值
  2. 为应用程序数据提供类型验证(number、email、required)
  3. 为应用程序数据提供状态(invalid、dirty、touched、error)
  4. 为 HTML 元素提供 CSS 类
  5. 绑定 HTML 元素到 HTML 表单
  6. 将输入域的值($scope)与 AngularJS 创建的变量绑定
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
</div><script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "John Doe"; }); </script>

双向绑定,在修改输入域的值时, AngularJS 属性的值也将修改

<div ng-app="myApp" ng-controller="myCtrl"><input ng-model="name"/>      <!-- 默认显示Tom --><p> 你输入了: {{ name }} </p>  <!-- 修改输入框的值,此处名字也会相应修改 -->
</div><script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope){ $scope.name = 'Tom' }) </script>

验证用户输入 ng-show

<form ng-app="" name="myForm">Email: <input type="email" name="myAddr" ng-model="text"><span ng-show="myForm.myAddr.$error.email">不是一个合法的邮箱地址</span>
</form>

为应用数据提供状态值 (invalid, dirty, touched, error)

<form ng-app="" name="myForm" ng-init="myText = 'test@lwclick.com'">Email:<input type="email" name="myAddr" ng-model="myText" required><h1>状态</h1>{ { myForm.myAddr.$valid }}         如果输入的值是合法的则为 true{ { myForm.myAddr.$dirty }}         如果值改变则为 true{{ myForm.myAddr.$touched }}       如果通过触屏点击则为 true{{ myForm.myAddr.$error.email }}   如果输入的Email的值非法则为 true
</form>

CSS类,基于它们的状态为 HTML 元素提供了 CSS 类

<!-- 输入框有required属性,必须输入数据,若不输入则为非法的,触发input.ng-invalid -->
<style> input.ng-invalid { background-color: lightblue; } 
</style><form ng-app="" name="myForm">输入你的名字: <input name="myAddress" ng-model="text" required>
</form>

ng-empty 为空的时候
ng-not-empty 不为空的时候
ng-touched 控件已失去焦点
ng-untouched 控件未失去焦点
ng-valid 验证通过
ng-invalid 验证失败
ng-dirty 值改变的时候
ng-pending 任何为满足 $asyncValidators 的情况
ng-pristine 控件为初始状态

3.6. ng-repeat指令

对于集合中(数组中)的每个项会 克隆一次 HTML 元素。用于循环输出

3.7. 创建自定义指令

声明:使用 .directive 函数来添加自定义的指令,声明时使用 驼峰命名法

<body ng-app="myApp"><!-- 使用 --><lw-click></lw-click><!-- 声明 --><script> var app = angular.module("myApp", []); app.directive("lwClick", function(){ return { template: "<h1>自定义指令~</h1>" } }); </script>
</body>

调用:调用时使用 – 分割

元素名: <lw-click> </lw-click>

属性: <div lw-click> </div>

类名: <div class="lw-click"> </div>

必须设置 restrict 的值为 “C” 才能通过类名来调用指令。

<script> app.directive("lwClick", function(){ return { restrict: "C", template: "<h1>自定义指令~</h1>" } }); 
</script>

注释:<!-- directive: lw-click -->

添加 replace 属性,使注释可见

设置 restrict 的值为 “M”

<script> app.directive("lwClick", function(){ return { restrict: "M", replace: true, template: "<h1>自定义指令~</h1>" } }); 
</script>

4. AngularJS Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

4.1. 使用Scope

在AngularJS创建控制器时,可以将$scope对象当作一个参数传递

<div ng-app="myApp" ng-controller="myCtrl"><h1> { { carName }} </h1>                         <!-- 获取变量的值 -->
</div><script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope){ // scope作为参数传递 $scope.carName = "Volvo"; // 声明一个变量 })
</script>

4.2. Scope概述

AngularJS应用组成如下:

View(视图),即HTML scope的属性和方法
Model(模型),当前HTML中可用的数据 scope
Controller(控制器),JavaScript函数,可以添加或修改属性 scope的属性和方法

<div ng-app="myApp" ng-controller="myCtrl"><input ng-model="name">       <!-- 数据绑定 --><h2> {{ greeting }} </h2><button ng-click="sayHello()"> 点我 </button>
</div><script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope){ $scope.name = "lwclick"; // 声明name // 创建方法,响应点击事件 $scope.sayHello =  function(){ $scope.greeting = 'hello' + $scope.name + '!'; } }) 
</script>

4.3. Scope作用范围

根作用域:$rootScope

作用在 ng-app 指令包含的所有HTML元素中
用 $rootScope 定义的值,可以在各个controller中使用

<div ng-app="myApp" ng-controller="myCtrl"><h1>{{ lastName }} 家族成员:</h1> <ul><li

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

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

相关文章

Ubuntu20.04: UE4.27 中 Source Code 的编辑器下拉框没有 Rider选项

问题描述 最近想用 Rider 作为 UE4 开发的 IDE&#xff0c;但安装好 Rider 后&#xff0c;发现编辑器下拉框中没有 Rider 的选项&#xff0c;我检查了 UE4 的插件&#xff0c;发现 Rider Integration 插件已经安装且启用的。 环境&#xff1a;Ubuntu 20.04 UE4.27 Rider2023…

redis 性能优化一

目录 前言 尾延迟 前言 说到redis 性能优化&#xff0c;优化的目的是什么&#xff1f;提高响应&#xff0c;减少延迟。就要关注两点&#xff0c;一是尾延迟&#xff0c;二是Redis 的基线性能。只有指标&#xff0c;我们的优化&#xff0c;才有意义&#xff0c;才能做监控以及…

【总结】补码在运算中溢出的情况(单符号位补码+双符号位补码)

总结补码在运算中溢出的情况 在此默认补码为有符号数 A.单符号位补码 【规律通用】不同则溢出 &#xff08;一&#xff09;移位运算 补码右移不会溢出&#xff0c;仅左移时可能溢出 【实操方法】看补码的高2位直接出结果&#xff1a;若高2位数&#xff08;即符号位和最高数位&a…

从 Language Model 到 Chat Application:对话接口的设计与实现

作者&#xff1a;网隐 RTP-LLM 是阿里巴巴大模型预测团队开发的大模型推理加速引擎&#xff0c;作为一个高性能的大模型推理解决方案&#xff0c;它已被广泛应用于阿里内部。本文从对话接口的设计出发&#xff0c;介绍了业界常见方案&#xff0c;并分享了 RTP-LLM 团队在此场景…

bug_java

文章目录 1.创建Maven时&#xff1a; idea报错为&#xff1a;java&#xff1a;错误&#xff1a;不支持发行版本52. Springbot启动报错-类文件具有错误的版本 61.0, 应为 52.0 1.创建Maven时&#xff1a; idea报错为&#xff1a;java&#xff1a;错误&#xff1a;不支持发行版本…

golang中go build 后读取配置文件

golang打包后读取配置文件 在用go写代码的时候&#xff0c;为了好用经常使用go build 打包&#xff0c;如果我们用到了配置文件&#xff0c;就总是导致不能找到文件所在位置了出现bug&#xff0c;所以以下代码就解决了这个问题。 核心代码&#xff1a; file, err : exec.Look…

Android使用Sensor.TYPE_STEP_COUNTER计步器传感器进行步数统计

1、首先&#xff0c;申请权限 必须声明 ACTIVITY_RECOGNITION 权限&#xff0c;以便您的应用在运行 Android 10 (API 级别 29) 或更高版本的设备上使用此传感器。 Manifest.xml也记得声明 if (Build.VERSION.SDK_INT > Build.VERSION_CODES.P) {Log.d(TAG, "[权限]&quo…

Nodejs 第五十章(lua的基本使用)

lua基本使用 全局变量局部变量 全局变量是在全局作用域中定义的变量&#xff0c;可以在脚本的任何地方访问。全局变量在定义时不需要使用关键字&#xff0c;直接赋值即可。 xiaoman xmzsprint(xiaoman)局部变量是在特定作用域内定义的变量&#xff0c;只能在其所属的作用域…

UVa11595 Crossing Streets EXTREME

题目链接 UVa11595 - Crossing Streets EXTREME 题意 平面上有 n&#xff08;n≤35&#xff09;条直线&#xff0c;各代表一条街道。街道相互交叉&#xff0c;形成一些路段&#xff08;对应于几何上的线段&#xff09;。你的任务是设计一条从A到B的路线&#xff0c;使得穿过路…

VS code下载与使用方法(包含远程调试)

Visual Studio Code(简称 VSCode)是由微软开发的一款免费、开源、跨平台的现代化轻量级代码编辑器。它具有丰富的功能和强大的扩展性,适用于多种编程语言和开发环境。以下是 VSCode 的一些主要特点和功能: 跨平台支持: 可在 Windows、macOS 和 Linux 等多种操作系…

解决MySQL 5.7在Redhat 9中启动报错:libncurses.so.5和libtinfo.so.5缺失问题

在使用Linux系统搭建MySQL数据库的过程中&#xff0c;我们往往会遇到各种依赖库的问题&#xff0c;尤其是在安装较旧版本的MySQL时。最近&#xff0c;在RedHat 9&#xff08;rocky linux 9&#xff09;系统上安装MySQL 5.7版本时&#xff0c;我遇到了一个典型的依赖库缺失错误&…

[项目设计] 从零实现的高并发内存池(四)

&#x1f308; 博客个人主页&#xff1a;Chris在Coding &#x1f3a5; 本文所属专栏&#xff1a;[高并发内存池] ❤️ 前置学习专栏&#xff1a;[Linux学习] ⏰ 我们仍在旅途 ​ 目录 6.内存回收 6.1 ThreadCache回收内存 6.2 CentralCache回收内存 Rele…

CVE-2024-25600 WordPress Bricks Builder RCE-漏洞分析研究

本次代码审计项目为PHP语言&#xff0c;我将继续以漏洞挖掘者的视角来分析漏洞的产生&#xff0c;调用与利用..... 前方高能&#xff0c;小伙伴们要真正仔细看咯..... 漏洞简介 CVE-2024-25600 是一个严重的&#xff08;CVSS 评分 9.8&#xff09;远程代码执行 (RCE) 漏洞&am…

AXI4总线解析

一、读地址 AWVALID和AWREADY同时为高时&#xff0c;在这个上升沿&#xff0c;图中黄线&#xff0c;将接下来的数据写入地址40000000中。 在

FPGA 的 DSP:Verilog 中的简单 FIR 滤波器

本项目介绍如何用 Verilog 实现一个带有预生成系数的简单 FIR 滤波器。 Things used in this project 、 Story 简陋的 FIR 滤波器是 FPGA 数字信号处理中最基本的构建模块之一&#xff0c;因此了解如何利用给定的抽头数和相应的系数值组装一个基本模块非常重要。因此&#xf…

CCF-A推荐会议 安全界顶会ACM CCS‘24 4月29日第二轮投稿!共建更安全的数字世界!

会议之眼 快讯 第31届ACM CCS (ACM Conference on Computer and Communications Security)即计算机和通信安全会议将于 2024 年 10月14日-18日在美国盐湖城举行&#xff01;CCS是美国计算机协会(ACM)安全、审计与控制特别兴趣小组(SIGSAC)主办的一年一度的重要会议。是SIGSAC的…

java在cmd中乱码的问题解决

本文深入探讨了在使用 Java 命令行&#xff08;cmd&#xff09;时可能出现的中文乱码问题&#xff0c;并提供了两种解决方案。首先&#xff0c;通过临时的方式&#xff0c;用户可以执行命令 chcp 936 选择字符集&#xff0c;然后再运行 Java 命令&#xff0c;确保在选择字符集过…

Kakarot:当今以太坊的未来

1. 引言 前序博客&#xff1a; Kakarot&#xff1a;部署在Starknet上的ZK-EVM type 3 随着 Kakarot zkEVM 即将发布测试网&#xff0c;想重申下 Kakarot zkEVM 的愿景为&#xff1a; 为什么在rollup空间中还需要另一个 zkEVM&#xff1f; 开源代码见&#xff1a; https:/…

现代分布式系统架构的权衡分析

介绍 现代软件系统&#xff0c;特别是遵循分布式架构的系统&#xff0c;以其复杂性和可变性而闻名。这些系统由许多元素组成&#xff0c;每个元素都引入潜在的权衡&#xff0c;可能影响成本、性能、可伸缩性和可靠性等因素。对于导航软件现代化和转型领域的IT架构师、业务分析师…

MyBatis3源码深度解析(四)Statement

文章目录 前言2.4 Statement2.4.1 java.sql.Statement2.4.1.1 创建Statement对象2.4.1.2 执行查询SQL语句2.4.1.3 执行更新SQL语句2.4.1.4 执行不确定类型的SQL语句2.4.1.5 批量执行SQL语句 2.4.2 java.sql.PreparedStatement2.4.2.1 创建PreparedStatement对象2.4.2.2 占位符的…