AngularJS(二)
来源:互联网 发布:淘宝海外全球站注册 编辑:程序博客网 时间:2024/06/05 02:15
作用域
通常AngularJS中应用(App)是由若干个视图(View)组合成而成的,而视图(View)又都是HTML元素,并且HTML元素是可以互相嵌套的,另一方面视图都隶属于某个控制器(Controller),进而控制器之间也必然会产生嵌套关系。
每个控制器(Controller)又都对应一个模型(Model)也就是
1.根作用域
一个AngularJS的应用(App)在启动时会自动创建一个根作用域$rootScope,这个根作用域在整个应用范围(ng-app所在标签以内)都是可以被访问到的。
2.子作用域
通过ng-controller指令可以创建一个子作用域,新建的作用域可以访问其父作用域的数据。
过滤器
在AngularJS中使用过滤器格式化展示数据,在“{{}}”中使用“|”来调用过滤器,使用“:”传递参数。
1.内置过滤器
1、currency将数值格式化为货币格式
<p>单价 = {{price| currency }}</p>
2、date日期格式化,年(y)、月(M)、日(d)、星期(EEEE/EEE)、时(H/h)、分(m)、秒(s)、毫秒(.sss),也可以组合到一起使用。
<li>{{now| date:"yyyy-MM-dd HH:mm:ss"}}<li>
3、filter在给定数组中选择满足条件的一个子集,并返回一个新数组,其条件可以是一个字符串、对象、函数
<li>{{['html', 'css', 'js']|filter:'s'}}</li> 将返回['css','js']
4、json将Javascrip对象转成JSON字符串。
<li>{{[ {name: '小红', age: 16}, {name: '小米', age: 10} ]|json}}</li>//结果为[ { "name": "小红", "age": 16 }, { "name": "小米", "age": 10 } ]
5、limitTo取出字符串或数组的前(正数)几位或后(负数)几位
{{"1234567890" | limitTo :6}} // 从前面开始截取6位{{"1234567890" | limitTo:-4}} // 从后面开始截取4位
6、lowercase将文本转换成小写格式
{{ "TANK is GOOD" | lowercase }} // 结果:tank is good
7、uppercase将文本转换成大写格式
{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRING
8、number数字格式化,可控制小位位数
<li>{{num|number:2}}</li>
9、orderBy对数组进行排序,第2个参数可控制方向,默认为false,升序排列。
<li>{{['html', 'css', 'js']|orderBy: '':true}}</li>//结果为["js","html","css"] 降序排列<li>{{[{name: '小红', age: 16}, {name: '小明', age: 16}, {name: '小米', age: 10} ]|orderBy: 'age': false}}</li> //结果为[{"name":"小米","age":10},{"name":"小红","age":16},{"name":"小明","age":16}]
2.自定义过滤器
除了使用AngularJS内建过滤器外,还可以根业务需要自定义过滤器,通过模块对象实例提供的filter方法自定义过滤器。
<div ng-controller="demoController"> {{content|capitalize}}</div><script src="angular.min.js"></script><script> var app = angular.module('app',[]); app.controller("demoController",["$scope",function($scope){ $scope.contemt = "my name is itcast"; }]); //自定义过滤器 app.filter("capitalize",function(){ return function(input){ return input[0].toUpperCase()+input.slice(1); } }); //结果为My name is itcast </script>
依赖注入
AngularJS采用模块化的方式组织代码,将一些通用逻辑封装成一个对象或函数,实现最大程度的复用,这导致了使用者和被使用者之间存在依赖关系。
所谓依赖注入是指在运行时自动查找依赖关系,然后将查找到依赖传递给使用者的一种机制。
常见的AngularJS内置服务有
1.推断式注入
没有明确声明依赖,AngularJS会将函数参数名称当成是依赖的名称。
app.controller('demoController',function($http,$rootScope){ $http({ url:'example.php', method:'get', params: { // get 参数 name: 'itcast', sex: '男' }, });});
这种方式会带来一个问题,当代码经过压缩后函数的参数被压缩,这样便会造成依赖无法找到。
2.行内注入
以数组形式明确声明依赖,数组元素都是包含依赖名称的字符串,数组最后一个元素是依赖注入的目标函数。推荐使用这种方式声明依赖
app.controller('demoController',['$http','rootScope',function($http,$rootScope){ $http({ url:'example.php', method:'POST', data:{} });}]);
- AngularJS入门(二)
- AngularJS 教程(二)
- AngularJS学习(二)
- AngularJS学习(二)
- AngularJs教程(二)
- AngularJS入门(二)
- AngularJS实例教程(二)
- AngularJS动画(二)
- AngularJS 初探(二)
- AngularJS 教程(二)
- AngularJS(二)
- AngularJS(二)
- angularJS学习笔记(二)
- AngularJS学习笔记(二)
- AngularJS学习笔记(二)
- angularJs学习笔记(二)
- AngularJS(二)创建模块
- AngularJS(二)Deployd搭建
- 在Windows8.1下安装ubuntu双系统
- 机器学习开源算法库
- 高性能Mysql主从架构的复制原理及配置详解
- Linux Crontab 安装使用详细说明
- js event事件
- AngularJS(二)
- 经验总结-谈谈我对LayoutInflater中inflate方法的认识
- Salesforce-在代码调用审批流
- 实例解析iptables在防火墙的应用
- 为你详解Linux安装GCC方法
- configure.ac和makefile.am
- 高并发高负载系统架构-php篇
- poj1064(二分搜索)
- Linux中设置服务自启动的三种方式