angularjs笔记(三)

时间：2016-05-07 18:01:35 阅读：198 评论：0 收藏：0 [点我收藏+]

标签：

7、其他一些常用指令，布尔类型的指令也可以用表达式

　　（1）、数组索引$index

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
   <p ng-repeat="x in names">{{$index+1}}_{{x}}</p>
</div>
<script>
    angular.module(‘myApp‘, []).controller(‘myController‘, function ($scope) {
        $scope.names=[‘Tom‘,‘Lily‘,‘John‘];
    });
</script>
</body>
</html>

$index指令

　　（2）、ng-disabled对应HTML元素disable属性

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
    <!--ng-model绑定的是checkbox的value值
           ng-disabled对应button的disabled属性
           -->
    <input type="checkbox" ng-model="mySwitch"/>
    <button ng-disabled="mySwitch">按钮</button>
</div>
</body>
</html>

ng-disabled

　　（3）、ng-show、ng-hide指令

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
    <input type="checkbox" ng-model="mySwitch"/>
    <button ng-show="mySwitch">按钮1</button>
    <button ng-hide="mySwitch">按钮2</button>
    <input type="text" ng-model="hour"/>
    <button ng-hide="hour>10">按钮3</button>
</div>
</body>
</html>

ng-show、ng-hide

　　(4)、ng-click

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
    <button ng-click="count=count+1">{{count}}</button>
    <input type="button" ng-click="toggle()" value="toggle"/>

    <div ng-show="switch" style="height: 20px;width: 20px;background-color: beige;border: 1px solid gray">

    </div>
</div>
<script type="text/javascript">
    angular.module(‘myApp‘, []).controller(‘myController‘, function ($scope) {
        $scope.count = 0;
        $scope.switch = true;
        $scope.toggle = function () {
            $scope.switch = !$scope.switch;
        };
    });
</script>
</body>
</html>

ng-click

　（5）、ng-include

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp4" ng-controller="myController4">
  <div ng-include="‘/test/angularjsInclude.html‘">
</div>
</div>
<script type="text/javascript">
angular.module(‘myApp4‘,[]).controller(‘myController4‘,function(){

});
</script>
</body>
</html>

ng-include

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
</head>
<body>
AngularJSInclude
</body>
</html>

/test/angularjsInclude.html页面

8、AngularJS依赖注入，value、factory、service、provider、constant五个核心组件作为依赖注入

　　（1）、value

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
    <input type="text" ng-model="initVal"/>
</div>
<script type="text/javascript">
    var myApp=angular.module(‘myApp‘,[]);
    myApp.value(‘initVal‘,5);
    myApp.controller(‘myController‘,function($scope,initVal){
        $scope.initVal=initVal;
    });
</script>
</body>
</html>

依赖注入value

　　（2）、factory

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
    initVal1:<input type="text" ng-model="initVal1"/>
    <br/>
    initVal2:<input type="text" ng-model="initVal2"/>
</div>
<script type="text/javascript">
    var myApp = angular.module(‘myApp‘, []);
    myApp.value(‘initVal‘, 5);
    myApp.factory(‘myFactory‘, function (initVal) {
        var factory = {};
        factory.multiply1 = function () {
            return initVal * initVal;
        };
        factory.multiply2=function(a,b){
            return a*b;
        };
        return factory;
    });
    myApp.controller(‘myController‘, function ($scope, myFactory) {
        $scope.initVal1 = myFactory.multiply1();
        $scope.initVal2=myFactory.multiply2(2,3);
    });
</script>
</body>
</html>

依赖注入factory

　　（3）、service

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
    initVal1:<input type="text" ng-model="initVal"/>
</div>
<script type="text/javascript">
    var myApp = angular.module(‘myApp‘, []);
    myApp.value(‘initVal‘, 5);
    myApp.factory(‘myFactory‘, function (initVal) {
        var factory = {};
        factory.multiply1 = function () {
            return initVal * initVal;
        };
        factory.multiply2 = function (a, b) {
            return a * b;
        };
        return factory;
    });
    myApp.service(‘myService‘, function (initVal, myFactory) {
        this.squre = function (a) {
            return myFactory.multiply2(a, a);
        };
    });
    myApp.controller(‘myController‘, function ($scope, myService) {
        console.log(myService);
        $scope.initVal = myService.squre(3);
    });
</script>
</body>
</html>

依赖注入service

　　（4）、provider

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
    initVal1:<input type="text" ng-model="initVal"/>
</div>
<script type="text/javascript">
    var myApp = angular.module(‘myApp‘, []);
    myApp.config(function ($provide) {
        $provide.provider(‘MyProvideService‘, function () {
            this.$get = function () {
                var factory = {};
                factory.multiply = function (a, b) {
                    return a * b;
                };
                return factory;
            };
        });
    });
    myApp.controller(‘myController‘, function ($scope, MyProvideService) {
        console.log(MyProvideService);
        $scope.initVal = MyProvideService.multiply(2,3);
    });
</script>
</body>
</html>

依赖注入provide

　　（5）、constant常量

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
    initVal1:<input type="text" ng-model="initVal"/>
</div>
<script type="text/javascript">
    var myApp = angular.module(‘myApp‘, []);
    myApp.constant(‘myConstant‘, 23);
    myApp.controller(‘myController‘, function ($scope, myConstant) {
        $scope.initVal = myConstant;
    });
</script>
</body>
</html>

依赖注入constant

9、AngularJS 路由

angularjs笔记(三)

标签：

原文地址：http://www.cnblogs.com/hujiapeng/p/5465189.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行