angular读书笔记(二)


在某标签中
class='menu-disabled-{{isdisabled}}'
通过控制器可以设置isdisabled的属性
ng-class和ng-style:
都可以接受一个表达式的取值
比如:ng-class="{error:isError,warning:isWarning}"
点击该项时改变该项的css:
ng-lick="selectRestaurant($index)"
ng-class="{selected:$index==selectedRow}"
function selectRestaurant(row){
$scope.selectedRow=row;
}

src与 href:
使用ng-src与ng-href
在标签属性中可以使用表达式:
ng-class="{hignlight:$index%2==1}"实现交替样式的表格
但是应该将业务逻辑(也就是表达式)放在controller中进行

控制器的职责:
通过$scope为应用中的模型设置初始状态,把数据模型和函数暴露给视图
监控模型的变化,采取相应动作。
建议:为视图中的每一块功能区域创建一个控制器
嵌套的控制器可以通过继承树结构共享数据与函数
内部控制器可以访问外部的属性与函数

$scope内置的$watch函数:
$scope.$watch($scope.total,cal);
当total发生变化时就会调用cal函数。

监控多个值,触发一个函数:
(1)监控他们连接起来的值
$scope.$watch('thing.a+thing.b',cal)
(2)把他们放在数组或对象中,给deepwatch参数传个true.
$scope.$watch('things',cal,true)

利用model组织依赖关系

provider(name,object or constructor)
可配置的服务,如果传递了object的参数,
必须带名为$get的参数,这个函数返回服务的名称
否则,angular会认为你传递的是构造函数,返回服务实例对象。

factory(name,$get Function())调用函数的时候会返回服务的实例,即
provider(name,$get : {$get Function()})
service(name,constructor)

services:
factory的例子
angular.module('shop.services',[])
.factory('Item',function(){
var items = {};
items.getitems = function(){
//get items from service.....
}
return items;
});

controllers:
angular.module('shop.controllers',[])
.controller('thiscontrol',['$scope','Item',function($scope,Item){
//do something with $scope
$scope.items = Item.getitems();
}]);

the twig:
<html ng-app="shop">
<div ng-controller="thiscontrol"></div>
......
</html>


使用过滤器格式化数据:
内置过滤器:currency:货币,date日期,number数字。。。
自定义过滤器:
ng-module="expression | myfilter"

angular.module('shop.filter',[])
.filter('myfilter',function(){
var word = function(input){
//do something with input
};
return word;
});

现在是第40页

原文地址:https://www.cnblogs.com/youngercode/p/3878337.html