常见内置指令
AngularJS的指令:
指示,命令:指挥示意要做一件事情!
指令:就是扩展了HTML的基本功能,通过额外的标签、属性来增强HTML功能
Angular的指令在页面中体现出来就是一个标签\属性\class名称\注释等等
指示,命令:指挥示意要做一件事情!
指令:就是扩展了HTML的基本功能,通过额外的标签、属性来增强HTML功能
Angular的指令在页面中体现出来就是一个标签\属性\class名称\注释等等
常见指令,按照指令的功能,划分为五大类:
1.控制指令,用于ANGULAR应用程序加载流程控制
2.渲染指令,用于ANGULAR将数据在网页中进行展示/隐藏处理
3.节点指令,用于ANGULAR对标签、属性、样式、内容进行处理的指令、
4.事件指令,用于处理常规事件操作的指令
5.其他指令....
1.控制指令,用于ANGULAR应用程序加载流程控制
2.渲染指令,用于ANGULAR将数据在网页中进行展示/隐藏处理
3.节点指令,用于ANGULAR对标签、属性、样式、内容进行处理的指令、
4.事件指令,用于处理常规事件操作的指令
5.其他指令....
控制指令:
> ng-app
用于定义Angular应用入口的指令,用于[自动引导]Angular程序的运行
在定义应用程序运行入口的同时,可以绑定一个DOM元素
DOM元素的开始标签和结束标签之间~就可以认为是模块的作用范围
Angular通过ng-app指令,实现自动引导程序运行,底层是通过
bootstrap()进行模块DOM元素加载,开始运行!
ng-app 没有模块,可以引导Angular运行吗?
<html ng-app>
// angular引用可以运行吗?可以运行
Angular会将页面中出现的支持的语法进行解释运行!
>>但是不能使用模块控制器中定义的/挂载的数据,超出了作用范围!
ng-app="模块名称"
该模块就会作为Angular的根模块出现,整个作用范围中,页面View和数据Model可以进行无缝交互!
> ng-controller
模块中,可以给模块挂载一个或者多个控制器
挂载好的控制器在当前模块范围内,可以通过ng-controller指令来指定控制器的作用范围
目前常规控制器的做法:
先声明模块
模块下挂载控制器>>> 控制器的作用范围仅限于当前模块!>>>局部控制器
Angular1.2版本以前
控制器的定义,是直接通过全局函数来实现的
//控制器:全局控制器
function ctrl($scope) {
$scope.name = "tom";//挂载数据
}
全局控制器的意思,是可以在网页中任意地方通过ng-controller进行注册
全局控制器造成了全局数据污染~!所以Angular在1.2版本以后进行了彻底修改
废弃了全局控制器~ 而是提倡使用挂载在模块下的局部控制器!来更好的控制数据!
> ng-app
用于定义Angular应用入口的指令,用于[自动引导]Angular程序的运行
在定义应用程序运行入口的同时,可以绑定一个DOM元素
DOM元素的开始标签和结束标签之间~就可以认为是模块的作用范围
Angular通过ng-app指令,实现自动引导程序运行,底层是通过
bootstrap()进行模块DOM元素加载,开始运行!
ng-app 没有模块,可以引导Angular运行吗?
<html ng-app>
// angular引用可以运行吗?可以运行
Angular会将页面中出现的支持的语法进行解释运行!
>>但是不能使用模块控制器中定义的/挂载的数据,超出了作用范围!
ng-app="模块名称"
该模块就会作为Angular的根模块出现,整个作用范围中,页面View和数据Model可以进行无缝交互!
> ng-controller
模块中,可以给模块挂载一个或者多个控制器
挂载好的控制器在当前模块范围内,可以通过ng-controller指令来指定控制器的作用范围
目前常规控制器的做法:
先声明模块
模块下挂载控制器>>> 控制器的作用范围仅限于当前模块!>>>局部控制器
Angular1.2版本以前
控制器的定义,是直接通过全局函数来实现的
//控制器:全局控制器
function ctrl($scope) {
$scope.name = "tom";//挂载数据
}
全局控制器的意思,是可以在网页中任意地方通过ng-controller进行注册
全局控制器造成了全局数据污染~!所以Angular在1.2版本以后进行了彻底修改
废弃了全局控制器~ 而是提倡使用挂载在模块下的局部控制器!来更好的控制数据!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>控制指令</title>
<script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<!-- name被Angular解释为变量,'tom'被解释为变量值 -->
<!-- name2被Angular解释为变量,n2被解释为变量-->
<div ng-init="name='tom';name2=n2">
{{name}}**{{name2}}
<div>greeting: <span ng-bind="greeting"></span></div>
</div>
<!-- 控制器 -->
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div>局部控制器范围:<span ng-bind="greeting"></span></div>
</div>
<div ng-controller="myCtrl2">
<div>局部控制器范围:<span ng-bind="greeting"></span></div>
</div>
</div>
<div id="myApp2">
<div ng-controller="myApp2Ctrl">
<div>局部控制器App2范围:<span ng-bind="hello"></span></div>
</div>
<div ng-controller="myCtrl2">
<div>局部控制器范围:<span ng-bind="greeting"></span></div>
</div>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl" , ["$scope", function($scope){
$scope.greeting = "hello ng-app!"
}]);
app.controller("myCtrl2" , ["$scope", function($scope){
$scope.greeting = "hello ng-app!"
}]);
var app2 = angular.module("myApp2", []);
app2.controller("myApp2Ctrl", ["$scope",function($scope) {
$scope.hello = "my app2 ctrl value!";
}]);
var _mp2 = document.getElementById("myApp2");
angular.bootstrap(_mp2, ["myApp2"]);
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>控制指令</title>
<script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<!-- name被Angular解释为变量,'tom'被解释为变量值 -->
<!-- name2被Angular解释为变量,n2被解释为变量-->
<div ng-init="name='tom';name2=n2">
{{name}}**{{name2}}
<div>greeting: <span ng-bind="greeting"></span></div>
</div>
<!-- 控制器 -->
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div>局部控制器范围:<span ng-bind="greeting"></span></div>
</div>
<div ng-controller="myCtrl2">
<div>局部控制器范围:<span ng-bind="greeting"></span></div>
</div>
</div>
<div id="myApp2">
<div ng-controller="myApp2Ctrl">
<div>局部控制器App2范围:<span ng-bind="hello"></span></div>
</div>
<div ng-controller="myCtrl2">
<div>局部控制器范围:<span ng-bind="greeting"></span></div>
</div>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl" , ["$scope", function($scope){
$scope.greeting = "hello ng-app!"
}]);
app.controller("myCtrl2" , ["$scope", function($scope){
$scope.greeting = "hello ng-app!"
}]);
var app2 = angular.module("myApp2", []);
app2.controller("myApp2Ctrl", ["$scope",function($scope) {
$scope.hello = "my app2 ctrl value!";
}]);
var _mp2 = document.getElementById("myApp2");
angular.bootstrap(_mp2, ["myApp2"]);
</script>
</body>
</html>
渲染指令:
指令的作用就是将数据,渲染展示到页面上【底层是封装了DOM操作】
* ng-repeat 循环渲染指令
* ng-bind 变量渲染指令,mustache语法的替代写法.
指令的作用就是将数据,渲染展示到页面上【底层是封装了DOM操作】
* ng-repeat 循环渲染指令
* ng-bind 变量渲染指令,mustache语法的替代写法.
ng-repeat循环渲染指令:
属性直接写在要循环的标签上!
u in users u和users就会被Angular解释成变量,获取变量中的值进行处理
Ctrl + Alt + L 代码格式化
Ctrl + D 快速复制一行[光标所在行]
Ctrl + X 删除光标所在行
扩展:实际项目开发中,对于用户编号、商品编号等等各种编号,通常使用字符串来进行编号
所以使用字符串来表示各种编号,并且编号能在程序中保证编号的唯一性。
属性直接写在要循环的标签上!
u in users u和users就会被Angular解释成变量,获取变量中的值进行处理
Ctrl + Alt + L 代码格式化
Ctrl + D 快速复制一行[光标所在行]
Ctrl + X 删除光标所在行
扩展:实际项目开发中,对于用户编号、商品编号等等各种编号,通常使用字符串来进行编号
所以使用字符串来表示各种编号,并且编号能在程序中保证编号的唯一性。
ng-bind-html:
这个指令,类似于原生JS的innerHTML
但是使用的时候一定要慎重,对于它修饰的内容,必须确保安全性
如果内容的来源不确定,不要使用编译html标签的属性或者函数>>>XSS攻击
这个指令,类似于原生JS的innerHTML
但是使用的时候一定要慎重,对于它修饰的内容,必须确保安全性
如果内容的来源不确定,不要使用编译html标签的属性或者函数>>>XSS攻击
ng-include 包含页面指令:
类似于JQuery 中的load()函数,用于加载其他页面.
类似于JQuery 中的load()函数,用于加载其他页面.
节点指令:
主要用于标签、样式、属性、内容的操作
ng-switch **> switch()
ng-switch-when **> case:
ng-switch-default **> default
ng-switch-when **> case:
ng-switch-default **> default
ng-show VS ng-hide :用于显示或者隐藏元素的指令
ng-if指令:用于判断输出; ng-if指令,会将DOM元素在DOM树上显示或者移除
ng-class指令: {样式名称:布尔类型}[使用做多:掌握]
通过flag为true/false来指定使用样式default/sky[使用不多:了解]
ng-style样式,主要用于自定义指令的时候进行样式的处理, 常规使用方式和行内样式没有什么大区别
ng-src:用于在Angular应用中替代img标签的src属性;
ng-href:用于在Angular应用中替代a标签的href属性;
事件指令:Angular封装的用于操作事件的指令
通常是ng-[event]来命名指令,如ng-click表示单击事件
Angular中的事件处理,需要将处理函数挂载到对应控制器的$scope上
通常是ng-[event]来命名指令,如ng-click表示单击事件
Angular中的事件处理,需要将处理函数挂载到对应控制器的$scope上
案列:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<button ng-click="fn1()">点击执行</button>
<button ng-click="fn2($event)">点击执行,附带事件对象$event</button>
<button ng-click="fn2($event, 'tom')">点击执行,多个参数</button>
</div>
<script>
var app = angular.module("myApp", [])
.controller("myCtrl", ["$scope", function($scope) {
$scope.fn1 = function() {
alert("事件执行");
}
$scope.fn2 = function(event,name) {
console.log("事件执行了.", event, name);
}
}]);
</script>
</body>
</html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<button ng-click="fn1()">点击执行</button>
<button ng-click="fn2($event)">点击执行,附带事件对象$event</button>
<button ng-click="fn2($event, 'tom')">点击执行,多个参数</button>
</div>
<script>
var app = angular.module("myApp", [])
.controller("myCtrl", ["$scope", function($scope) {
$scope.fn1 = function() {
alert("事件执行");
}
$scope.fn2 = function(event,name) {
console.log("事件执行了.", event, name);
}
}]);
</script>
</body>
</html>