第三讲：index3控制指令.html
来源：互联网 发布：无锡网络开发有限公司 编辑：程序博客网 时间：2024/05/20 20:20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>控制指令</title>
<!--
AngularJS的指令
指示，命令：指挥示意要做一件事情！
指令：就是扩展了HTML的基本功能，通过额外的标签、属性来增强HTML功能
Angular的指令在页面中体现出来就是一个标签\属性\class名称\注释等等
常见指令，按照指令的功能，划分为五大类
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可以进行无缝交互！
</html>
> ng-controller
模块中，可以给模块挂载一个或者多个控制器
挂载好的控制器在当前模块范围内，可以通过ng-controller指令来指定控制器的作用范围
目前常规控制器的做法：
先声明模块
模块下挂载控制器>>> 控制器的作用范围仅限于当前模块！>>>局部控制器
Angular1.2版本以前
控制器的定义，是直接通过全局函数来实现的
//控制器：全局控制器
function ctrl($scope) {
$scope.name = "tom";//挂载数据
}
全局控制器的意思，是可以在网页中任意地方通过ng-controller进行注册
全局控制器造成了全局数据污染~！所以Angular在1.2版本以后进行了彻底修改
废弃了全局控制器~ 而是提倡使用挂载在模块下的局部控制器！来更好的控制数据！
-->
<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>
<!--
AngularJS的指令
指示，命令：指挥示意要做一件事情！
指令：就是扩展了HTML的基本功能，通过额外的标签、属性来增强HTML功能
Angular的指令在页面中体现出来就是一个标签\属性\class名称\注释等等
常见指令，按照指令的功能，划分为五大类
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可以进行无缝交互！
</html>
> ng-controller
模块中，可以给模块挂载一个或者多个控制器
挂载好的控制器在当前模块范围内，可以通过ng-controller指令来指定控制器的作用范围
目前常规控制器的做法：
先声明模块
模块下挂载控制器>>> 控制器的作用范围仅限于当前模块！>>>局部控制器
Angular1.2版本以前
控制器的定义，是直接通过全局函数来实现的
//控制器：全局控制器
function ctrl($scope) {
$scope.name = "tom";//挂载数据
}
全局控制器的意思，是可以在网页中任意地方通过ng-controller进行注册
全局控制器造成了全局数据污染~！所以Angular在1.2版本以后进行了彻底修改
废弃了全局控制器~ 而是提倡使用挂载在模块下的局部控制器！来更好的控制数据！
-->
<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>
0 0
- 第三讲：index3控制指令.html
- index3
- HTML基础第三讲---字体
- 第二讲：index渲染指令.html
- 16位汇编第七讲汇编指令详解第第三讲
- 第三讲
- 第三讲
- 16位汇编第八讲----8086指令集（5）【控制转移类指令】
- 韩顺平 java 第三讲、第四讲 运算符 流程控制
- 第三讲：将CSS引用到HTML页面的4种方法
- 陈力：传智播客古代 珍宝币 泡泡龙游戏开发第三讲：html符号实体、超链接
- java 第三讲
- XML第三讲
- Java讲座第三讲
- Struts2技术第三讲
- Oracle数据库第三讲
- Spring框架第三讲
- QGIS二次开发第三讲
- boot-factory模式
- 安卓漫漫路之BitmapFactory高效加载Bitmap.
- ios 类别和类扩展
- WIFI 模块上传服务器显示曲线
- uva10791 唯一分解定理
- 第三讲：index3控制指令.html
- 2017河南工业大学校赛 I 小天使改名
- matlab矩阵
- Parcelable 序列化集合List，数组 Array,布尔值 boolean 先将就看这两篇文章，后期整理
- Android RTMP直播推流方案选择
- c缺陷与陷阱
- k-d tree算法
- 线程和线程池的故事
- python使用opencv将灰度图人脸图片转化为RGB
