angular:框架,库!-----必须放在服务器下
mvc的库!
m model数据
v view视图
c controller控制器
------------------------------------------------------------------------------------
基本功能:
angular.bind(this指向,函数名,参数...);
angular.copy(克隆谁,克隆到哪里);
angular.element(元素)//有点像小jq
angular.equals(a,b) 比较俩个数的大小!
forEach 循环
isArray 判断是否是数组
isDate 判断是否是时间对象
lowercase 转小写
module 模块化开发!
展示数据的方法:
1.{{a}}-----数据
2.ng-bind="a";
ng-app 开启angular应用模式 管辖范围!
*一个页面里面,只能出现一次!
*建议大家把它加在html标签里!
---------------------------------------------------------------------------------
指令(directive):扩展html语法*属性!
*属性!------<p ng-bind="a">显示a的数据</p>
*标签!-------<ng-bind>显示数据</ng-bind>
咋现在写过的:
ng-model="" 定义一个数据
ng-bind="" 绑定数据展示
ng-app
ng-init="" 初始数据
ng-show/hide="ture/false"
ng-click="" 点击
ng-mouseover=""
ng-repaet="" 循环
-----------------------------------------------------------------------
angular的特色:
双向数据绑定、 依赖注入!
依赖注入:函数参数固定的!和顺序没有关系!
angular控制器:
1.版本1.2.x之前
function show($scope){
//里面定义的数据
}
<div ng-controller="show"></div>
2.版本版本1.2.x之后
先创建一个模块:
var app=angular.module('app',[]);
**要把app放在ng-app="app";
在模块里面创建控制器:
app.controller(控制器名称,函数)
调用:
<div ng-controller="show"></div>
----------------------------------------------------------------------------------------------
给大家看一个列子:
<div ng-controller="show">
{{a}}
<div ng-controller="aaa">
{{a}}
</div>
</div>
结论:
控制器,它可以继承!,继承关系基于dom关系(但是数据名要一样);
--------------------------------------------------------------------------------
父级和子级之间的取数据?
所谓继承,可以认为是子级从父级取数据!
***父级从子级取数据(子级可以给父级传递数据)
方法:
1.发送
$scope.$emit('data',$scope.asd);//把数据发送给(父级)的控制器
$scope.$broadcast('new-data',data);
//把数据发送给(子级)的控制器
2.接受
$scope.$on('data',function(event,data){//接受发送来的数据
//console.log(data);
$scope.a=data;
})
-----------------------------------------------------------------------------------
angular小问题:
数据改了,视图没有改过来!
$scope.$apply()-----------------脏检查(强制更新数据)
------------------------------------------------------------------------------------
过滤器:filter
应用在模板里面的!
写法:{{sum()|过滤器的名称}}
{{sum()|currency}}
currency---货币单位!
***默认是美元!
在空滤器里面可以写参数:
{{sum()|currency:'¥'}}
这是人民币!
时间:
{{a|date}} ---默认是国外的时间!
{{data|filter:'关键字'}}
----查找关键字!
{{arr|limitTo}}
1.默认什么都没有
2.限制位数{{arr|limitTo:2}}
作用:一般来说
{{a|lowercase}}--转小
{{a|uppercase}}--转大
数字转化(千分位)
12345
12345.00
12,345.00
1,212,345.00
number
--------------------------------------------
上面都是自带的指令,下面我们来自己写一个
自定义一个指令!
app.directive('ngRed',function(){
return function(scope,element,attr){
element.css('background','red');
}
})
自定义指令-深入
return {
restrict:'ECMA',--包含用法的地方
template:'<h1>我是h1</h1>',---模板
replace:true,---严格替换,直接把标签替换过来!
templateUrl:'a.html',模板地址
link:function(scope,element,attr){
element.css('background','red');
}
}
link里面是唯一可以操作dom的地方!
E element--元素
C css 样式
M comment 注释
A attr 属性