angularjs学习笔记--service、scope、angularjs指令、事件、api
1 2 3 4 5 | <span ng-bind="name"></span><span ng:bind="name"></span><span ng_bind="name"></span><span data-ng-bind="name"></span><span x-ng-bind="name"></span> |
Ps：上述绑定方法等价
1 2 3 4 | ng-app=”模块名” 定义angularjs的使用范围；ng-init=”变量=值”，初始化变量的值，当有多个变量时，中间用分号隔开；ng-model=”变量” 定义变量名；ng-bind=”变量” 绑定变量名，获取该变量的数据。这里的变量即是前一条的变量名。但一般用双重花括号来获取变量的值。 |
1 2 3 4 | <div ng-app=""> <p>名字：<input type="text" ng-model="name" /></p> <h1>hello{{name}}</h1> </div> |
ng-app指令告诉angularjs，<div>元素是angularjs应用程序的所有者；ng-model指令把输入域的值绑定到应用程序变量name；ng-bind指令把应用程序变量name绑定到某个段落的innerHTML。
Angularjs对于开发单一页面应用程序变得更易：angularjs把应用程序数据绑定到HTML元素；可以克隆和充分HTML代码；可以隐藏和显示HTML元素；可以在HTML元素背后添加代码；支持输入验证。
1 2 3 | <div ng-app="" ng-init="firstName='jonh'"> <p>姓名为：<span ng-bind="firstName"></span></p> </div> |
H5允许扩展的属性，以data-开头，angularjs属性以ng-开头，但可以使用data-ng-让网页对h5有效。
1 2 3 4 | <div ng-app="" data-ng-init="firstName='jonh'"> <p>姓名为：<span data-ng-bind="firstName"></span></p> </div> |
Angularjs表达式：
Angularjs表达式写在双大括号内；angularjs表达式把数据绑定到HTML，类似于ng-bind指令；angularjs将在表达式书写的位置输出数据。
Angularjs模块定义了angularjs的应用；angularjs控制器用于控制angularjs应用；ng-app指令了应用，与ng-controller定义了控制器。
8-20
Angularjs指令是扩展的HTML属性，带有前缀ng-。Angularjs通过指令扩展HTML；其中内置指令可以为应用添加功能，也可自定义指令。
Angularjs指令：
ng-app指令：初始化一个angularjs应用；
ng-init指令：初始化应用程序数据；通常情况下不使用，而是选择控制器或模块来实现相同的功能。
ng-model指令：把元素元素值绑定到应用程序；
ng-bind指令：绑定HTML元素到应用程序数据；
ng-bind-html指令：绑定HTML元素的innerHTML到应用程序数据，并移除HTML字符串中危险字符；
ng-bind-template指令：规定要使用模板替换的文本内容；
ng-blur指令：规定blur事件的行为；
ng-change指令：规定在内容改变时要执行的表达式；
ng-checked指令：规定元素是否被选中；
ng-class指令：指令HTML元素要使用的css类；
ng-class-odd指令：类似ng-class，但只在奇数行起作用；
ng-class-even指令：但只在偶数行起作用
ng-click指令：定义元素被点击时的行为；
ng-cloak指令：在应用正要加载时防止其闪烁；
ng-controller指令：定义应用的控制器对象；
ng-copy指令：规定拷贝事件的行为；
ng-csp指令：修改内容的安全策略；
ng-cut指令：规定剪切事件的行为；
ng-dbclick指令：规定双击事件的行为；
ng-disabled指令：规定一个元素是否被禁用；
ng-focus指令：规定聚焦事件的行为；
ng-form指令：指定HTML表单继承控制器表单；
ng-hide指令：隐藏或显示HTML元素；
ng-href指令：为a元素指令连接
ng-if指令：条件为false移除HTML元素；
ng-include指令：在应用中包含HTML文件
ng-jq指令：定义应用必须使用到的库，如jQuery
ng-keydown指令：规定按下按键事件的行为
ng-keyup指令：规定松开按键事件的行为
ng-keypress指令：规定按下按键事件的行为，其包括keydown与keyup两阶段
ng-list指令：将文本转换为列表
ng-model指令：绑定HTML控制器（input、select、textarea）的值到应用数据；
ng-model-options指令：规定如何更新模型
ng-mousedown指令：规定按下鼠标按键时的行为；
ng-mouseenter指令：规定鼠标指针穿过元素时的行为
ng-mouseleave指令：规定鼠标指针离开元素时的行为
ng-mousemove指令：规定鼠标指针在指定的元素中移动的行为
ng-mouseover指令：规定鼠标指针位于元素上方时的行为
ng-mouseup指令：规定当在元素上松开鼠标按钮时的行为
ng-non-bindable指令：规定元素或子元素不能绑定数据
ng-open指令：指定元素的open属性
ng-options指令：在<select>列表中指定<options>
ng-paste指令：规定粘贴事件的行为
ng-pluralize指令：根据本地化规则显示信息
ng-readonly指令：指定元素的readonly属性
ng-repeat指令：定义集合中每项数据的模板
ng-selected指令：指定元素的selected的属性
ng-show指令：显示或隐藏HTML元素
ng-src指令：指定img元素的src属性
ng-srcset指令：指定img元素的srcset属性
ng-style指令：指定元素的style属性
ng-submit指令：规定onsubmit事件发生时执行的表达式
ng-switch指令：规定显示或隐藏子元素的条件
ng-transclude指令：规定填充的目标位置
ng-value指令：规定input元素的值
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../angular/angular.js"></script></head><body> <div ng-controller="personCtrl"> <button ng-click="toggle()">隐藏/显示</button> <p ng-hide="myVar"> 名：<input type="text" ng-model="firstName"><br /> 姓：<input type="text" ng-model="lastName"><br /> 姓名：{{firstName + "" + lastName}} </p> </div> <script> var app = angular.module('myApp',[]); app.controller('personCtrl',function($scope){ $scope.firstName = 'john'; $scope.lastName = 'js'; $scope.myVal = false; $scope.toggle = function(){ $scope.myVar = !$scope.myVar; } }); </script></body></html> |
Ps：这里的ng-app = “myApp”,而不是ng-app = “app” ！ng-hide = “true”是让元素不可见。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../angular/angular.js"></script></head><body><div ng-controller="personCtrl"> <button ng-click="toggle()">隐藏/显示</button> <p ng-show="myVar"> 名：<input type="text" ng-model="person.firstName"><br /> 姓：<input type="text" ng-model="person.lastName"><br /> 姓名：{{person.firstName + " " + person.lastName}} </p></div><script> var app = angular.module('myApp',[]); app.controller('personCtrl',function($scope){ $scope.person ={ firstName:'jonh', lastName:'kds' } $scope.myVar = true; $scope.toggle = function(){ $scope.myVar = !$scope.myVar; } });</script></body></html> |
Ps：ng-show = “true” 设置元素可见
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../angular/angular.js"></script></head><body> <div ng-app="" ng-init="firstName='jonkk'"> <p>在输入框中尝试输入：</p> <p>姓名：<input type="text" ng-model="firstName"></p> <p>你的输入为：{{firstName}}</p> </div></body></html> |
Ps：ng-app初始化一个angularjs应用程序；ng-init初始化应用程序数据；ng-model把元素值绑定到应用程序
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../angular/angular.js"></script></head><body> <div ng-app="" ng-init="names=[ {name:'sda',country:'d'}, {name:'df',country:'dd'}, {name:'fgs',country:'sd'} ]"> <p>循环对象：</p> <ul> <li ng-repeat="x in names"> {{x.name + ',' + x.country}} </li> </ul> </div></body></html> |
Ps：ng-repeat指令用在一个对象数组上，也可以用于重复一个HTML元素
Ps：ng-app指令定义了angularjs应用程序的根元素，ng-app指令在网页加载完毕时会自动引导应用程序。
Ps：.directive函数可以添加自定义指令，要调用自定义指令，需要在HTML元素上添加自定义指令名。指令名可以以驼峰法进行命名，但使用时需要使用 – 形式名字！！
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="../angular/angular.js"></script></head><body ng-app="myApp"> <runoob-directive></runoob-directive><script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { template : "<h1>自定义指令!</h1>" }; });</script></body></html> |
Ps：可以通过元素名、属性、类名及注释进行指令调用：
（1） 元素名：上面方法即是通过元素名进行指令调用的
（2） 属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="../angular/angular.js"></script></head><body ng-app="myApp"> <div runoob-directive></div><script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { template : "<h1>自定义指令!</h1>" }; });</script></body></html> |
（3） 类名
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="../angular/angular.js"></script></head><body ng-app="myApp"> <div class="runoob-directive"></div><script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { restrict : "C", template : "<h1>自定义指令!</h1>" }; });</script><p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "C" 才能通过类名来调用指令。</p></body></html> |
（4） 注释
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="../angular/angular.js"></script></head><body ng-app="myApp"><!-- directive: runoob-directive --><script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { restrict : "M", replace : true, template : "<h1>自定义指令!</h1>" }; });</script><p><strong>注意：</strong> 我们需要在该实例添加 <strong>replace</strong> 属性， 否则评论是不可见的。</p><p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "M" 才能通过注释来调用指令。</p></body></html> |
Ps：限制使用：通过restrict属性，限制你的指令只能通过特定的方式来调用，restrict的值可以是一下几种：A：作为属性使用； E：作为元素名使用； C作为类名使用； M作为注释使用； ps：restrict默认值为EA，即可以通过元素名和属性名进行指令调用。
angularjs事件：
ng-click：angularjs点击事件
ng-dbl-click：
ng-mousedown：
ng-mouseenter：
ng-mouseleave：
ng-mousemove：
ng-keydown：
ng-keyup：
ng-keypress：
ng-change：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../angular/angular.js"></script></head><body> <div ng-app="app" ng-controller="myCtrl"> <button ng-click="count = count + 1">点我</button> <p>{{count}}</p> </div> <script> angular.module('app',[]).controller('myCtrl',function($scope){ $scope.count = 0; }); </script></body></html> |
angularjs验证属性：
$dirty：
$invalid：
$error：
Angularjs全局API（Application Programming Interface）：
（1） 转换
angular.lowercase()：将字符串转换为小写
angular.uppercase()：将字符串转换为大写
angular.copy()：数组或对象深度拷贝
angular.forEach()：对象或数组的迭代函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../angular/angular.js"></script></head><body> <div ng-app="myApp" ng-controller="myCtrl"> <p>{{x1}}</p> <p>{{x2}}</p> </div> <script> var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope){ $scope.x1 = 'JSON'; $scope.x2 = angular.lowercase($scope.x1); }); </script></body></html> |
（2） 比较
angular.isArray()：如果引用的是数组返回true
angular.isDate()：
angular.isDefined()：
angular.isElement()：
angular.isFunction()：
angular.isNumber()：
angular.isObject()：
angular.isString()：
angular.isUndefined()：
angular.equals()：
（3） JSON
angular.fromJson()：反序列化JSON字符串
angular.toJson()：序列化JSON字符串
（4） 基础
angular.bootstrap()：手动启动angularjs
angular.element()：包裹着一部分DOM element或是HTML字符串，把其作为一个jQuery元素来处理
angular.module()：创建、注册或检索angularjs模块
scope对对象当作一个参数传递。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="../angular/angular.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"> <h1>{{carname}}</h1></div><script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.carname = "Volvo"; });</script><p>控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。</p></body></html> |
当在控制器中添加scope前缀，直接添加属性名即可。
Angularjs应用组成包括：View（视图），即HTML； Model（模型），当前视图中可用的数据； Controller（控制器），即JavaScript函数，可以添加或修改属性。
scope是模型。Scope是一个JavaScript对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="../angular/angular.js"></script></head><body<div ng-app="myApp" ng-controller="myCtrl"> <input ng-model="name"> <h1>{{greeting}}</h1> <button ng-click='sayHello()'>点我</button></div><script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "Runoob"; $scope.sayHello = function() { $scope.greeting = 'Hello ' + $scope.name + '!'; }; });</script><p>当你修改输入框中的值时，会影响到模型(model),当然也会影响到控制器对应的属性值。</p></body></html> |
service：
angularjs中，服务是一个函数或对象，可在angularjs应用中使用。有个$location服务，可以返回当前页面的URL地址。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../angular/angular.js"></script></head><body> <div ng-app="myApp" ng-controller="myCtrl"> <p>当前页面的URL：</p> <h3>{{myUrl}}</h3> </div> <p>该实例使用了内建的$location服务获取当前页面的URL</p> <script> var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope,$location){ $scope.myUrl = $location.absUrl(); }); </script></body></html> |
Ps：$location服务作为一个参数传递到controller中。若使用它，则需要在controller中定义。
$location服务，可以使用DOM中存在的对象。
$http服务：服务向服务器发送请求，应用响应服务器传过来的数据。
$timeout服务：对应了js里的window.setTimeout函数
$interval服务对应了js中的window.setInterval。
参考 & 感谢：http://www.runoob.com/angularjs
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义