angularJS第三讲

来源：互联网发布：linux联网安装软件命令编辑：程序博客网时间：2024/04/29 15:33

今天要说的是AngularJS里面的指令

AngularJs第三讲

指令：就是扩展了HTML的基本功能，通过额外的标签、属性来增强HTML功能，按照常见的指令，可以把指令划分为五大类，分别是控制指令、渲染指令、节点指令、事件指令、其他指令。。。。

1、控制指令：用于ANGULAR应用程序加载流程控制

2、渲染指令：用于ANGULAR将数据在网页中进行展示或隐藏处理

3、节点指令：用于ANGULAR标签、属性、样式内容进行处理的指令

4、事件指令：用于ANGULAR处理常规事件操作的指令

分析各个指令的用法

1、控制指令

1、控制指令-ng-app：

ng-app用于ANGULAR应用程序入口的指令，用于【自动引导】ANGULAR程序的运行，在定义应用程序运行入口的同时，可以绑定一个DOM元素，而DOM元素的开始标签和结束标签之间就可以认定为模块的作用域范围。

Angular通过ng-app指令，实现自动引导运行，底层是通过Bootstrap()进行模块加载，开始运行。

在这里有个重要的问题要说，ng-app没有模块，Angular也是阔以运行哒！Angular会将页面上出现的支持的语法进行解释运行！但是。但是。但是。重要的问题说三遍，不能使用模块控制器中定义的或者挂载的数据，因为超出了范围。

ng-app="模块名称"，该模块作为模块控制器的根模块出现，整个作用范围中，页面View和数据Model可以进行无缝交互

1、控制指令-ng-controller：

ng-app模块中，可以有多个控制器,挂载好的控制器在当前模块范围内，可以通过ng-controller指令来控制指定控制器的作用范围。

ng-controller的做法为：

（1）首先要先声明模块

（2）模块下挂载控制器

（3）设置挂载控制器的数据

var app=angular.module("myApp",[])myApp为模块app.controller("myCtrl",function($scope){myCtrl为模块控制器$scope.name=""$scope.挂载数据})

以下为例子

<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>

2、渲染指令：指令的作用就是将数据，渲染展示到页面上【底层是封装了DOM操作】

1、渲染指令-ng-repeat：

循环渲染指令，属性直接写在循环的标签上

根据理解的需要，我例举了循环的几个例子供参考

<!DOCTYPE html><html ng-app="myApp"><head>    <meta charset="UTF-8">    <title>循环练习</title>    <script src="js/angular.min.js"></script>    <style>        a {            text-decoration: none;            color: darkred;        }    </style></head><body ng-controller="myCtrl"><ul>    字符串循环    <li ng-repeat="str in strs">        <span ng-bind="str"></span>    </li></ul><hr/><ul>    <li ng-repeat="obj in objs">        <span ng-bind="obj.name"></span>        <span ng-bind="obj.age"></span>    </li></ul><ul>    <li ng-repeat="goods in goodses">        <span ng-bind="goods.goodsID"></span>        <span ng-bind="goods.goodsName"></span>        <span ng-bind="goods.goodsPrice"></span>    </li></ul><hr/><ul>    <li ng-repeat="user in users">        <span ng-bind="user.userID"></span>        <span ng-bind="user.userName"></span>        <span ng-bind="user.address.native"></span>        <span ng-bind="user.address.province"></span>        <span ng-bind="user.address.country"></span>    </li></ul></body><script>    var app=angular.module("myApp",[]);    app.controller("myCtrl",function ($scope) {        $scope.strs=[            "a","b","c"        ]        $scope.objs=[            {name:"聂悦",age:15},            {name:"小花",age:12}        ]        $scope.goodses=[            {goodsID:1,goodsnName:"商品A",goodsPrice:122},            {goodsID:2,goodsnName:"商品B",goodsPrice:133},            {goodsID:3,goodsnName:"商品C",goodsPrice:144},        ]        $scope.users=[            {userID:1,userName:"nieyue",address:{native:"中国",province:"商丘",cuntry:"睢县"}},            {userID:1,userName:"yantao",address:{native:"中国",province:"商丘",cuntry:"民权"}}        ]    });</script></html>

2、渲染指令-ng-bind

ng-bind 变量渲染指令，mustache语法的替代写法

以下为ng-bind可以绑定内容的例子

<div ng-bind="content"></div>//为任何内容    <div ng-bind="12 * 12"></div>//为数字    <div ng-bind="true && false"></div>//为布尔值    <div ng-bind="12 > 10"></div>//判断大小<script>    var app = angular.module("myApp", ['ngSanitize']);    app.controller("myCtrl", ["$scope", function ($scope) {        $scope.content = "<p>这是一段内容</p>";          //会显示<p></p>标签    }]);</script>

2、渲染指令-ng-bind-html
 这个指令，类似于原生JS的innerHTML
 但是使用的时候一定要慎重，对于它修饰的内容，必须确保安全性
 如果内容的来源不确定，不要使用编译html标签的属性或者函数

以下为ng-bind-html可以绑定内容的例子

 <div ng-bind-html="content"></div>    <div ng-bind-html="12 * 12"></div>    <div ng-bind-html="true && false"></div>    <div ng-bind-html="12 > 10"></div><script>    var app = angular.module("myApp", ['ngSanitize']);    app.controller("myCtrl", ["$scope", function ($scope) {        $scope.content = "<p>这是一段内容</p>";              //不会显示<p></p>标签    }]);
</script>
2、渲染指令ng-bind-incloude
包含页面指令，类似于JQuery 中的load()函数，用于加载其他页面
 3、节点指令
3、节点指令ng-switch
ng-switch-指令，类似于JQuery 中的switch-case 
ng-switch===>switch();
ng-switch-when===>case;
ng-switch-default===>default;
以下为例
 <div>        <input type="text" ng-model="user"><!-- user变量 -->        <div ng-switch="user"><!-- user变量 -->            <div ng-switch-when="admin"><!-- admin字符串 -->                管理员用户登录            </div>            <div ng-switch-when="user"><!-- user字符串 -->                会员登录            </div>            <div ng-switch-default>                游客登录            </div>        </div>    </div>
3、节点指令ng-hide或ng-show

ng-hide或ng-show指令：用于显示隐藏或显示元素的指令。
以下为例
<div>        <input type="checkbox" ng-model="flagy">显示？{{flagy}}        <div ng-show="flagy">圆规为什么可以画圆，因为，脚在走，心不动</div>        <div ng-hide="flagy">你为什么不能圆梦，因为，心不定，脚不动！</div></div>

3、节点指令ng-if

ng-if指令：用于判断输出，会将DOM元素从DOM树上移除或显示。
以下为例

<div>        <input type="checkbox" ng-model="flagx">用户登录{{flagx}}        <div ng-if="flagx" ng-class="'sky'">        </div>    </div>
3、节点指令ng-class

ng-class指令：{{样式名称：布尔类型}}

以下为例

 <style>        .default{            font-size:16px;            color:#888;        }        .sky {            font-size:18px;            color:#2aabd2;        }    </style>

<div> <div ng-class="{default:def,sky:s}"> 天地不仁以万物为刍狗 </div> <input type="checkbox" ng-model="def">使用default样式修饰{{def}}<br /> <input type="checkbox" ng-model="s">使用sky样式修饰{{s}}<br /> </div> <div> <!-- [样式class名称] [使用较多：熟悉]--> <div ng-class="['sky']"> 圣人不仁以百姓为刍狗 </div> </div> <div> <!-- 通过flag为true/false来指定使用样式default/sky[使用不多：了解] --> <div ng-class="{true:default,false:sky}[flag]"> 道可道非常道，名可名非常名<br /> 无名天地之始有名万物之母 </div> <input type="checkbox" ng-model="flag">选中{{flag}} </div>
3、节点指令ng-class-even/odd

ng-even/odd指令：偶数或奇数来改变

以下为例

<style>        .default{            font-size:16px;            color:#888;        }        .sky {            font-size:18px;            color:#2aabd2;        }    </style>
 <div> <ul> <li ng-repeat="u in users"> <span ng-bind="u" ng-class-even="'default'" ng-class-odd="'sky'"></span> </li> </ul> </div>

3、节点指令ng-style

ng-style指令：主要用于自定义指令的时候进行样式处理，常规使用方式和行内使用方式没有太大区别。

以下为例

 <div>        <button ng-click="sty={color:'orange'}">点击</button>        <div ng-style="sty">        </div>        <!--<div ng-style="'{color:"red"}'">            测试        </div>-->    </div></div>

 ng-src:用于在Angular应用中替代img标签的src属性 ng-href:用于在Angular应用中替代a标签的href属性

3、事件指令ng-click

ng-click指令：用于操作事件的指令，通常ng-[event]来命名指令，如ng-click指令。Angular事件处理，需要将对应的函数挂载到对应的控制器$scope上

以下为例

<!DOCTYPE html><html ng-app="myApp"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="js/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>

0 0