AngularJS API

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

<!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>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
</head>
<body>
<div ng-app="myApp">
<ul>
<li><a href="#/">首页</a></li>
<li><a href="#/computers">电脑</a></li>
<li><a href="#/printers">打印机</a></li>
<li><a href="#/others">其他</a></li>
</ul>
<div ng-view></div>
</div>
<script type="text/javascript">
var myApp=angular.module('myApp',['ngRoute']);
myApp.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/',{template:'这是首页'})
.when('/computers',{template:'电脑页面'})
.when('/printers',{template:'打印机页面'})
.otherwise({redirectTo:'/'});
}]);
</script>
</body>
</html>

路由简单例子

依赖angular-route.js脚本

初始化应用程序时,要导入ngRoute模块

AngularJS路由URL是通过#+标记实现的,在向服务端发送请求地址时,#符号后面的内容会被浏览器忽略掉

在HTML中#符号是超链接的锚点,如<a href="#top">置顶</a>,表示跳转到当前页面id或name为top的元素位置处,如果在浏览器地址栏中添加跳转到另一页面的锚点,那么另一页面元素要用id来指定锚点名称,如http://192.168.0.137:8080/anotherPage.html#bottom,会跳转到anotherPage.html页面id为bottom处。注意如果想传参数,要在#符号前传入

路由到的地址内容显示在ng-view指令标记的元素内

$routeProvider的两个函数(1)、when有两个参数,第一个是URL正则规则,第二个是路由配置对象(2)、otherwise有一个参数,是路由配置对象

路由设置对象:

$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});

template:ng-view内插入简单HTML内容

templateUrl:ng-view内插入HTML模板,如'/test/content.html',会从服务端获取到文件内容插入到ng-view内

controller:在当前模板上执行controller函数,生成新的$scope

controllerAs:为controller指定别名

redirectTo:重新定向到指定地址

resolve:指定当前controller所依赖的其他模块

angularjs笔记(三)的更多相关文章

  1. Mastering Web Application Development with AngularJS 读书笔记(三)

    第一章笔记 (三) 一.Factories factory 方法是创建对象的另一种方式,与service相比更灵活,因为可以注册可任何任意对象创造功能.例如: myMod.factory('notif ...

  2. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  3. Oracle学习笔记三 SQL命令

    SQL简介 SQL 支持下列类别的命令: 1.数据定义语言(DDL) 2.数据操纵语言(DML) 3.事务控制语言(TCL) 4.数据控制语言(DCL)  

  4. 《CMake实践》笔记三:构建静态库(.a) 与 动态库(.so) 及 如何使用外部共享库和头文件

    <CMake实践>笔记一:PROJECT/MESSAGE/ADD_EXECUTABLE <CMake实践>笔记二:INSTALL/CMAKE_INSTALL_PREFIX &l ...

  5. Python 学习笔记三

    笔记三:函数 笔记二已取消置顶链接地址:http://www.cnblogs.com/dzzy/p/5289186.html 函数的作用: 給代码段命名,就像变量給数字命名一样 可以接收参数,像arg ...

  6. 《MFC游戏开发》笔记三 游戏贴图与透明特效的实现

    本系列文章由七十一雾央编写,转载请注明出处. 313239 作者:七十一雾央 新浪微博:http://weibo.com/1689160943/profile?rightmod=1&wvr=5 ...

  7. [Firefly引擎][学习笔记三][已完结]所需模块封装

    原地址:http://www.9miao.com/question-15-54671.html 学习笔记一传送门学习笔记二传送门 学习笔记三导读:        笔记三主要就是各个模块的封装了,这里贴 ...

  8. JSP学习笔记(三):简单的Tomcat Web服务器

    注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...

  9. 构建高性能WEB站点笔记三

    构建高性能WEB站点笔记三 第10章 分布式缓存 10.1数据库的前端缓存区 文件系统内核缓冲区,位于物理内存的内核地址空间,除了使用O_DIRECT标记打开的文件以外,所有对磁盘文件的读写操作都要经 ...

随机推荐

  1. there is issue about change event of checkbox in the ie8 oe ie7

    some people said the change event of checkbox can not trigger in the ie7 or ie8,that's not true. thi ...

  2. SpringMVC学习--数据回显

    简介 表单提交失败需要再回到表单页面重新填写,原来提交的数据需要重新在页面上显示. 简单数据类型 对于简单数据类型,如:Integer.String.Float等使用Model将传入的参数再放到req ...

  3. oracle游标调试结果显示位置

    在SQL窗口输入内容,按F8后,可以在下图看到

  4. extjs基础 使用图标字体来美化按钮)

    下载 Font Awesome 1.拷贝css 和 fonts 到build同级目录 2.需要在index.html中引入css文件 3.在main.js文件中添加 initComponent : f ...

  5. AndroidStudio修改项目名称

    项目名称修改了,想修改Android Studio 中 project的名字 右键project 的名字,refactor - rename ,填写好新名字后修改,被提示 “can’t rename ...

  6. HoG

    实现步骤 先计算每一个像素点位置上x和y方向上的梯度. 这样在每一个像素点位置上得到一个二维向量, 计算它的方向和模长 将图片分为一个个的cell, 如\(8\times 8\). 计算它的HOG: ...

  7. html页面中meta的作用

    meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta 标签用于网页的<head>与</head>中,meta 标签的用处很多.meta 的属性有两种:name和 ...

  8. Android Studio构建系统基础

    基础知识 项目创建成功后会自动下载Gradle,这个过程特别慢,建议FQ.下载的Gradle在Windows平台会默认在 C:\Documents and Settings\<用户名>.g ...

  9. 【转】Handler学习笔记(一)

    一.Handler的定义: Handler主要接收子线程发送的数据, 并用此数据配合主线程更新UI,用来跟UI主线程交互用.比如可以用handler发送一个message,然后在handler的线程中 ...

  10. bzoj4381: [POI2015]Odwiedziny

    这题搞了我一下午……因为一些傻X的问题…… 对于步长大于sqrt(n)的询问,我们可以直接暴力求解 然后,我们可以事先预处理出d[u][step]表示u往上跳,每次跳step步,直到跳到不能跳为止,所 ...