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. 用自己的话描述wcf中的传输安全与消息安全的区别(三)

    消息交换安全模式 PS:很多书上把transfer security和transport security都翻译成“传输安全”,这样易混淆.我这里把transfer说成消息交换安全. 安全的含义分为验 ...

  2. linux基础-第十六单元 yum管理RPM包

    第十六单元 yum管理RPM包 yum的功能 本地yum配置 光盘挂载和镜像挂载 本地yum配置 网络yum配置 网络yum配置 Yum命令的使用 使用yum安装软件 使用yum删除软件 安装组件 删 ...

  3. 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 入门教 ...

  4. AndroidStudio修改项目名称

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

  5. iOS开发遇到的错误 -- Label显示多行文字导致宽度和高度的问题

    Label的宽度问题 注意:UILabel下面需要设置preferredMaxLayoutWidth ,设置了autolayout和numberofline的UIlabel才显示多行 label宽度的 ...

  6. Notes on 'Selective Search For Object Recognition'

    UijlingsIJCV2013, Selective Search For Object Recognition code 算法思想 利用分割算法将图片细分成很多region, 或超像素. 在这个基 ...

  7. JavaScript写一个连连看的游戏

    天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果 ...

  8. mysql-函数CASE WHEN 语句使用说明

    mysql数据库中CASE WHEN语句. case when语句,用于计算条件列表并返回多个可能结果表达式之一. CASE 具有两种格式: 简单 CASE 函数将某个表达式与一组简单表达式进行比较以 ...

  9. highstock-处理时间需要处理世界时间偏移量

    highstock的数据格式采用的是[[时间,数据],[时间,数据],[时间,数据],[时间,数据]],而时间采用的是13位的毫秒值,如[1133136000000,69.66],采用的时间格式为UT ...

  10. Win7下如何设置护眼的电脑豆沙绿界面?保护眼睛的颜色设置教程

    关爱心灵的窗户——眼睛! 随着科技发展,使用电脑的人越来越多,由于使用电脑时间过长,我们的眼睛也越发容易疲劳,干燥.如何才能使电脑对人眼的伤害减小到最 小. 小编建议大家可以把窗口背景色设置成护眼色. ...