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 路由
<!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笔记(三)的更多相关文章
- Mastering Web Application Development with AngularJS 读书笔记(三)
第一章笔记 (三) 一.Factories factory 方法是创建对象的另一种方式,与service相比更灵活,因为可以注册可任何任意对象创造功能.例如: myMod.factory('notif ...
- angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
- Oracle学习笔记三 SQL命令
SQL简介 SQL 支持下列类别的命令: 1.数据定义语言(DDL) 2.数据操纵语言(DML) 3.事务控制语言(TCL) 4.数据控制语言(DCL)
- 《CMake实践》笔记三:构建静态库(.a) 与 动态库(.so) 及 如何使用外部共享库和头文件
<CMake实践>笔记一:PROJECT/MESSAGE/ADD_EXECUTABLE <CMake实践>笔记二:INSTALL/CMAKE_INSTALL_PREFIX &l ...
- Python 学习笔记三
笔记三:函数 笔记二已取消置顶链接地址:http://www.cnblogs.com/dzzy/p/5289186.html 函数的作用: 給代码段命名,就像变量給数字命名一样 可以接收参数,像arg ...
- 《MFC游戏开发》笔记三 游戏贴图与透明特效的实现
本系列文章由七十一雾央编写,转载请注明出处. 313239 作者:七十一雾央 新浪微博:http://weibo.com/1689160943/profile?rightmod=1&wvr=5 ...
- [Firefly引擎][学习笔记三][已完结]所需模块封装
原地址:http://www.9miao.com/question-15-54671.html 学习笔记一传送门学习笔记二传送门 学习笔记三导读: 笔记三主要就是各个模块的封装了,这里贴 ...
- JSP学习笔记(三):简单的Tomcat Web服务器
注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...
- 构建高性能WEB站点笔记三
构建高性能WEB站点笔记三 第10章 分布式缓存 10.1数据库的前端缓存区 文件系统内核缓冲区,位于物理内存的内核地址空间,除了使用O_DIRECT标记打开的文件以外,所有对磁盘文件的读写操作都要经 ...
随机推荐
- 用自己的话描述wcf中的传输安全与消息安全的区别(三)
消息交换安全模式 PS:很多书上把transfer security和transport security都翻译成“传输安全”,这样易混淆.我这里把transfer说成消息交换安全. 安全的含义分为验 ...
- linux基础-第十六单元 yum管理RPM包
第十六单元 yum管理RPM包 yum的功能 本地yum配置 光盘挂载和镜像挂载 本地yum配置 网络yum配置 网络yum配置 Yum命令的使用 使用yum安装软件 使用yum删除软件 安装组件 删 ...
- ASP.NET MVC 5 入门教程 (4) View和ViewBag
文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-get-started-view.html 上一节:ASP.NET MVC 5 入门教 ...
- AndroidStudio修改项目名称
项目名称修改了,想修改Android Studio 中 project的名字 右键project 的名字,refactor - rename ,填写好新名字后修改,被提示 “can’t rename ...
- iOS开发遇到的错误 -- Label显示多行文字导致宽度和高度的问题
Label的宽度问题 注意:UILabel下面需要设置preferredMaxLayoutWidth ,设置了autolayout和numberofline的UIlabel才显示多行 label宽度的 ...
- Notes on 'Selective Search For Object Recognition'
UijlingsIJCV2013, Selective Search For Object Recognition code 算法思想 利用分割算法将图片细分成很多region, 或超像素. 在这个基 ...
- JavaScript写一个连连看的游戏
天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果 ...
- mysql-函数CASE WHEN 语句使用说明
mysql数据库中CASE WHEN语句. case when语句,用于计算条件列表并返回多个可能结果表达式之一. CASE 具有两种格式: 简单 CASE 函数将某个表达式与一组简单表达式进行比较以 ...
- highstock-处理时间需要处理世界时间偏移量
highstock的数据格式采用的是[[时间,数据],[时间,数据],[时间,数据],[时间,数据]],而时间采用的是13位的毫秒值,如[1133136000000,69.66],采用的时间格式为UT ...
- Win7下如何设置护眼的电脑豆沙绿界面?保护眼睛的颜色设置教程
关爱心灵的窗户——眼睛! 随着科技发展,使用电脑的人越来越多,由于使用电脑时间过长,我们的眼睛也越发容易疲劳,干燥.如何才能使电脑对人眼的伤害减小到最 小. 小编建议大家可以把窗口背景色设置成护眼色. ...