angularjs笔记(三)

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

时间： 2024-10-22 17:36:41

angularjs笔记(三)的相关文章

Caliburn.Micro学习笔记(三)----事件聚合IEventAggregator和 Ihandle<T>

Caliburn.Micro学习笔记(三)----事件聚合IEventAggregator和 Ihandle<T> 今天说一下Caliburn.Micro的IEventAggregator和IHandle<T>分成两篇去讲这一篇写一个简单的例子看一它的的实现和源码下一篇用它们做一个多语言的demo 这两个是事件的订阅和广播,很强大,但用的时候要小心发生不必要的冲突. 先看一下它的实现思想在Caliburn.Micro里EventAggregator要以单例的形式出现这样可以

构建之法阅读笔记三—结对编程

构建之法阅读笔记三——结对编程何谓结对编程,结对编程就是程序员肩并肩,平等的,互补的进行开发工作,他们使用同一台电脑,编写同样的程序,一起分析,一起设计,一块交流想法. 然而我以前却并不是这样做的,我以前喜欢在没人打扰的环境下写代码,我觉得有人在我身边看着,会影响我的思路,还有我个人自尊心比较强,不太喜欢被人指指点点,所以每次都是,我写完代码之后,自己先找自己的bug,每当自己实在找不到之后,才会请教大神,但是有时候可能由于自己的能力不足,往往一个很简单的问题,我自己发现就会花费很久的时间,让

3. 蛤蟆的计算机组成原理笔记三系统总线

3. 蛤蟆的计算机组成原理笔记三系统总线本篇名言:"公正,一定会打倒那些说假话和假作证的人. --赫拉克利特" 欢迎转载,转载请标明出处:http://blog.csdn.net/notbaron/article/details/47988545 1. 总线总线是连接各个部件的信息传输线,是各个部件共享的传输介质. 1.1 面向CPU 的双总线结构框图 1.2 单总线结构框图 1.3 以存储器为中心的双总线

OpenCV for Python 学习笔记三

给源图像增加边界 cv2.copyMakeBorder(src,top, bottom, left, right ,borderType,value) src:源图像 top,bottem,left,right: 分别表示四个方向上边界的长度 borderType: 边界的类型有以下几种: BORDER_REFLICATE # 直接用边界的颜色填充, aaaaaa | abcdefg | gggg BORDER_REFLECT # 倒映,abcdefg | gfedcbamn | nmabcd

NFC学习笔记——三（在windows操作系统上安装libnfc）

本篇翻译文章: 这篇文章主要是说明如何在windows操作系统上安装.配置和使用libnfc. 一.基本信息 1.操作系统: Windows Vista Home Premium SP 2 2.硬件信息: System: Dell Inspiron 1720 Processor: Intel Core 2 Duo CPU T9300 @ 2.5GHz 2.5GHz System type: 32-bit Operating System 3.所需软件: 在windows操作系统上安装软件需要下列

swift学习笔记(三)关于拷贝和引用

在swift提供的基本数据类型中,包括Int ,Float,Double,String,Enumeration,Structure,Dictionary都属于值拷贝类型. 闭包和函数同属引用类型捕获则为拷贝.捕获即定义这些常量和变量的原作用域已不存在,闭包仍然可以在闭包函数体内引用和修改这些值 class属于引用类型. Array的情况稍微复杂一些,下面主要对集合类型进行分析: 一.关于Dictionary:无论何时将一个字典实例赋给一个常量,或者传递给一个函数方法时,在赋值或调用发生时,都会

《你必须知道的.NET》读书笔记三：体验OO之美

一.依赖也是哲学 (1)本质诠释:"不要调用我们,我们会调用你" (2)依赖和耦合: ①无依赖,无耦合: ②单向依赖,耦合度不高: ③双向依赖,耦合度较高: (3)设计的目标:高内聚,低耦合. ①低耦合:实现最简单的依赖关系,尽可能地减少类与类.模块与模块.层次与层次.系统与系统之间的联系: ②高内聚:一方面代表了职责的统一管理,一方面又代表了关系的有效隔离: (4)控制反转(IoC):代码的控制器交由系统控制而不是在代码内部,消除组件或模块间的直接依赖: (5)依赖注入(DI): ①

老男孩培训视频听课笔记三（在51cto上听的）

SSH 连接Linux工具CRT SSH概念: 现在有两个版本的SSH1/SSH2,建议选择SSH2 查看服务端启动情况:$netstat -lntup | grep 22 自己加的:现在CRT工具很多:crt xshell putty ,现在我使用的是xshell 另外在在centos系统里可以安装lrzsz的软件包,可以实现在crt里利用rz/sz上传/下载小文件,大文件容易出错 CRT连接经常出现的问题: ·超时问题:利用p

加壳学习笔记(三)-简单的脱壳思路&调试思路

首先一些windows的常用API: GetWindowTextA:以ASCII的形式的输入框 GetWindowTextW:以Unicaode宽字符的输入框 GetDlgItemTextA:以ASCII的形式的输入框 GetDlgItemTextW:以Unicaode宽字符的输入框这些函数在使用的时候会有些参数提前入栈,如这函数要求的参数是字符串数目.还有大小写啦之类的东西,这些东西是要在调用该函数之前入栈,也就是依次push,就是说一般前面几个push接着一个call,那前面的push可能