AngularJS入门

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.mzph.cn/news/712481.shtml

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

相关文章

Freesia项目目录结构

目录结构 前端目录&#xff1a; &#xff08;目录结构来自layui-vue-admin&#xff09; src文件下 api&#xff08;前端请求后端服务的路由&#xff09;assert&#xff08;一些内置或必要的资源文件&#xff09;layouts&#xff08;全局框架样式组件&#xff09;router&…

Unity(第十九部)射线

在Unity中&#xff0c;射线检测通常用于碰撞检测&#xff0c;比如&#xff1a;在游戏中&#xff0c;开枪射击时&#xff0c;需要判断击中的物体、子弹击中的位置&#xff1b;用鼠标来控制物体的移动&#xff1b;用鼠标拾取某个物体。 射线&#xff0c;顾名思义&#xff0c;在数…

【转载】深度学习笔记——详解损失函数

原文链接: https://blog.csdn.net/weixin_53765658/article/details/136360033 CSDN账号: Purepisces github账号: purepisces 希望大家可以Star Machine Learning Blog https://github.com/purepisces/Wenqing-Machine_Learning_Blog 损失函数 根据您使用的神经网络类型和数…

第四十七回 一丈青单捉王矮虎 宋公明二打祝家庄-强大而灵活的python装饰器

四面全是埋伏&#xff0c;宋江和众人一直绕圈跑不出去。正在慌乱之时&#xff0c;石秀及时赶到&#xff0c;教大家碰到白杨树就转弯走。走了一段时间&#xff0c;发现围的人越来越多&#xff0c;原来祝家庄以灯笼指挥号令。花荣一箭射下来红灯龙&#xff0c;伏兵自己就乱起来了…

Northwestern University-844计算机科学与技术/软件工程-复试注意事项【考研复习】

本文提到的西北大学是位于密歇根湖泊畔的西北大学。西北大学&#xff08;英语&#xff1a;Northwestern University&#xff0c;简称&#xff1a;NU&#xff09;是美国的一所著名私立研究型大学。它由九人于1851年创立&#xff0c;目标是建立一所为西北领地地区的人服务的大学。…

【力扣白嫖日记】550.游戏玩法分析IV

前言 练习sql语句&#xff0c;所有题目来自于力扣&#xff08;https://leetcode.cn/problemset/database/&#xff09;的免费数据库练习题。 今日题目&#xff1a; 550.游戏玩法分析IV 表&#xff1a;Activity 列名类型player_idintdevice_idintevent_datedategames_played…

从 iOS 设备恢复数据的 20 个iOS 数据恢复工具

作为 iPhone、iPad 或 iPod 用户&#xff0c;您可能普遍担心自己可能会丢失存储在珍贵 iOS 设备中的所有宝贵数据。数据丢失的原因多种多样&#xff0c;这里列出了一些常见原因&#xff1a; 1. iOS 软件更新 2. 恢复出厂设置 3. 越狱 4. 误操作删除数据 5. iOS 设备崩溃 …

C++笔记(五)--- 虚函数(virtual)

目录 虚函数介绍 虚函数、覆盖和重载区别 虚函数介绍 C的虚函数是多态性的表现 1.构造函数不能为虚函数2.子类继承时虚函数仍为虚函数3.虚函数类外实现时&#xff0c;不需要加virtual4.有虚函数的类&#xff0c;析构函数一定要写成虚函数&#xff08;否则可能会造成内存泄漏&…

【代码随想录python笔记整理】第十六课 · 出现频率最高的字母

前言:本笔记仅仅只是对内容的整理和自行消化,并不是完整内容,如有侵权,联系立删。 一、哈希表初步 在之前的学习中,我们使用数组、字符串、链表等等,假如需要找到某个节点,则都要从头开始,逐一比较,直到找到为止。为了能够直接通过要查找的记录找到其存储位置,我们选…

设备像素、css像素、设备独立像素、dpr、ppi 之间的区别

设备像素、CSS 像素、设备独立像素 (DIP)、设备像素比 (DPR) 和每英寸像素密度 (PPI) 是与屏幕分辨率和显示质量相关的概念。它们之间的区别如下&#xff1a; 设备像素&#xff1a;设备像素是物理屏幕上的最小可见单元&#xff0c;用于实际渲染图像或文本。它表示硬件像素点的数…

、JMETER与它的组件们

os进程取样器 这个取样器可以让jmeter直接调用python写的测试数据 这样就可以调用python写的测试数据给到jmeter进行调用 注意&#xff1a;1建议python返回转json格式dumps一下&#xff1b;2py文件中需要把结果打印出来&#xff0c;可以不用函数直接编写 传到jmeter之后可以用…

你真的了解C语言中的【柔性数组】吗~

柔性数组 1. 什么是柔性数组2. 柔性数组的特点3. 柔性数组的使用4. 柔性数组的优势 1. 什么是柔性数组 也许你从来没有听说过柔性数组这个概念&#xff0c;但是它确实是存在的。 C99中&#xff0c;结构体中的最后⼀个元素允许是未知大小的数组&#xff0c;这就叫做柔性数组成员…

MyBatis 学习(五)之 高级映射

目录 1 association 和 collection 介绍 2 案例分析 3 一对一关联和一对多关联 4 参考文档 1 association 和 collection 介绍 在之前的 SQL 映射文件中提及了 resultMap 元素的 association 和 collection 标签&#xff0c;这两个标签是用来关联查询的&#xff0c;它们的属…

算法--时空复杂度分析以及各个数据量对应的可使用的算法(C++;1s内)

这里写目录标题 由数据范围反推算法时间复杂度以及算法内容分析时间复杂度看循环实例1实例2 固定时间复杂度快排和归并排序二分高精度算法双指针算法单链表插入删除操作栈和队列的操作单调栈和单调队列KMPTire并查集堆哈希表BFS、DFS图的深度优先、宽度优先遍历dijkstra算法朴素…

题目 1037: [编程入门]宏定义的练习

问题描述&#xff1a; 输入两个整数&#xff0c;求他们相除的余数。用带参的宏来实现&#xff0c;编程序。 样例输入&#xff1a; 3 2 样例输出&#xff1a; 1 代码分析&#xff1a; 这段代码实现了输入两个整数&#xff0c;然后使用带参数的宏计算它们相除的余数&…

「MySQL」深入理解MySQL中常用的SQL函数

「MySQL」深入理解MySQL中常用的SQL函数 窗口函数参考文章1. COALESCE 函数2. USING 函数3. LEAD 函数4. interval 函数5. INSTR 函数6. substring_index 函数7. LENGTH 函数和 CHAR_LENGTH 函数 窗口函数参考文章 SQL窗口函数 1. COALESCE 函数 COALESCE 函数的作用是从一…

瑞_Redis_Redis的Java客户端

文章目录 1 Redis的Java客户端1.1 Jedis快速入门1.1.1 入门案例1.1.1.1 项目构建1.1.1.2 引入依赖1.1.1.3 建立连接1.1.1.4 释放资源1.1.1.5 测试1.1.1.6 完整测试类代码 1.1.2 Jedis连接池1.1.2.1 连接池工具类1.1.2.2 改造原始代码 &#x1f64a; 前言&#xff1a;本文章为瑞…

基于单片机的声光控制节能灯设计

摘 要:在当今社会,节约用电是低碳生活的基本行为之一,但是一些公众场所电力浪费现象依然存在,特别是长明灯、常亮屏等屡见不鲜,造成了严重的电力浪费。针对这种电力浪费现象,该文基于STC89C52单片机设计了一种声光控制节能灯,利用光敏电阻、光信息及语音信号控制电路收集…

常用sql语句及其优化

文章目录 介绍常用sql语句1. 数据查询1.1 SELECT 语句1.2 DISTINCT 关键字1.3 WHERE 子句1.4 ORDER BY 子句1.5 LIMIT 关键字 2. 数据更新2.1 INSERT INTO 语句2.2 UPDATE 语句2.3 DELETE FROM 语句 3. 数据管理3.1 CREATE TABLE 语句3.2 ALTER TABLE 语句3.3 DROP TABLE 语句 …

蓝桥辅导之管道

蓝桥辅导之管道 核心思想&#xff1a;二分 二分时间 若t时刻成立 则之后也一定成立将mid时刻时每个阀门的水的流动区间加入对组 合并区间 最终判断是否覆盖全管道l1 && r m; #include <iostream>#include <cstring>#include <algorithm>#define…