AngularJS学习笔记

angularJs常用指令 http://blog.csdn.net/u010870890/article/details/49619141

1.Angular根据获取值不同给不同的样式

更改外观样式：

function ctrSettingtable($scope,$routeParams) {$scope.body_data = [
  { "pid":"1",
    "fname":"jason",
    "lname":"kilby",
    "active":"0 "},
  { "pid":"2",
    "fname":"jason",
    "lname":"kilby",
    "active":"1 "
  }  ];
}

　目标：根据active值来显示不同的样式

<i  ng-class="{1:'fa fa-check',0:' fa fa-times'}[{{x.active}}]"></i>

更改显示值

原始数据：

var person = {'name':'tom','age':'1'}

要求：age=0为男，age=1为女

html中：

<div>{{formatGender(person.age)}}</div>

controller中：

$scope.formatGender = function(gender) {
    if (gender == 0)
        return "女";

    if (gender == 1)
        return "男";
    }
};

　　2.angularJS的$watch服务

$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。

使用：$watch(expression, listener, objectEquality);

每个参数的说明如下：

expression：监听的对象，它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。
listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)
objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

例子：

var myApp = angular.module('myApp',['']);
myApp.controller('myController',function ($scope) {
	$scope.name = "task";

	var watch = $scope.$watch('name',function (newValue,oldValue) {
		console.log('newValue-->'+newValue);
		console.log('oldValue-->'+oldValue);
	});
	
});

3.常用函数工具

myApp.controller('myCtrl',function($scope){
	$scope.title = 'this is title';
	
	$scope.person = {"id" : 1001,"name" :"tom"};
	$scope.persons = [{"aaa" : "sdas"},{"bbb" : "asda"}];

　　　　angular.bootstrap();//手动启动 AngularJS
　　　　angular.element();//包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理
　　　　

	var name="WOLFY";
	//to lowwer / upper case 
	var lower = angular.lowercase(name);
	var upper = angular.uppercase(lower);
	console.log(lower);
	console.log(upper);
	
	console.log(angular.isString(lower));
	console.log(angular.isNumber(lower));
	console.log(angular.isUndefined(lower));
	console.log(angular.isDefined(lower));
	console.log(angular.isArray(lower));
	console.log(angular.isDate(lower));
	console.log(angular.isElement(lower));
	
	console.log(angular.isFunction(lower));
	console.log(angular.isObject(lower));
	console.log(angular.isPrototypeOf(lower));
	
	
	////////////////////
	var deepName = angular.copy(name);// deep copy
	var flag = angular.equals(name,deepName);// 正常比较和对象的深比较  return : boolean
	var extendName = angular.extend(name,deepName);//作用：对象的拓展-把一个或多个对象中的方法和属性扩展到一个目的对象中，使得这个对象拥有其他对象相同的方法和属性
	//后面可以传入一个或多个对象 return : desName
	
	angular.forEach($scope.person,function (value, key) {
		console.log(key+ ":" + value)
	});//作用：对象的遍历
	angular.forEach($scope.persons,function (item,index) {
		console.log(index + 'is' + item);
	});
	
	var obj = angular.fromJson("");//json --> String
	var ss = angular.toJson(Object);//object --> String	

	angular.identity(Obj);//return first paramnter of this obj

});

　　4. 服务

1、$scope

$scope 对象在 AngularJS 中充当数据模型的作用,也就是一般 MVC 框架中 Model 得角色.但又不完全与通常意义上的数据模型一样,因为 $scope 并不处理和操作数据,它只是建立了视图和 HTML 之间的桥梁,让视图和 Controller 之间可以友好的通讯。

2、$rootScope

$rootScope 是所有 $scope 的最上层对象,可以理解为一个 AngularJS 应用中得全局作用域对象。

3、$watch

当你的数据模型中某一部分发生变化时，$watch函数可以向你发出通知。你可以监控单个对象的属性，也可以监控需要经过计算的结果（函数）。它的函数签名为$watch(watchFn, watchAction, deepWatch)。

watchFn：该参数是一个带有Angular表达式或者函数的字符串，它会返回被监控的数据模型的当前值。

watchAction：这是一个函数或者表达式，当watchFn 发生变化时会被调用。

deepWatch：如果设置为true，这个可选的布尔型参数将会命令Angular去检查被监控对象的每个属性是否发生了变化。

4、$http

$http是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。可以使用get、post、patch、delete等请求。

5、$location

6、$window

7、$interval

$timeout(function(){  
    // 延迟1秒执行  
}, 1000);

8、$timeout

$timeout(function(){  
    // 延迟1秒执行  
}, 1000);

9、$routeParams

　　1. 通过route传递参数

.when('/platform/user/deatil/:params', {  
    templateUrl: 'V/user/user.detail.tpl.html',  
    controller: 'PlatformUserDetailController'  
})

　　2. 获取route的参数

var params = $routeParams.params

10、$compile

由$compile方法来执行DOM的编译

11. angular.element方法汇总以及AngularJS 动态添加元素和删除元素

addClass()-为每个匹配的元素添加指定的样式类名
after()-在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点
append()-在每个匹配元素里面的末尾处插入参数内容
attr() - 获取匹配的元素集合中的第一个元素的属性的值
bind() - 为一个元素绑定一个事件处理程序
children() - 获得匹配元素集合中每个元素的子元素，选择器选择性筛选
clone()-创建一个匹配的元素集合的深度拷贝副本
contents()-获得匹配元素集合中每个元素的子元素，包括文字和注释节点
css() - 获取匹配元素集合中的第一个元素的样式属性的值
data()-在匹配元素上存储任意相关数据
detach()-从DOM中去掉所有匹配的元素
empty()-从DOM中移除集合中匹配元素的所有子节点
eq()-减少匹配元素的集合为指定的索引的哪一个元素
find() - 通过一个选择器，jQuery对象，或元素过滤，得到当前匹配的元素集合中每个元素的后代
hasClass()-确定任何一个匹配元素是否有被分配给定的（样式）类
html()-获取集合中第一个匹配元素的HTML内容
next() - 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素
on() - 在选定的元素上绑定一个或多个事件处理函数
off() - 移除一个事件处理函数
one() - 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次
parent() - 取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器
prepend()-将参数内容插入到每个匹配元素的前面（元素内部）
prop()-获取匹配的元素集中第一个元素的属性（property）值
ready()-当DOM准备就绪时，指定一个函数来执行
remove()-将匹配元素集合从DOM中删除。（同时移除元素上的事件及 jQuery 数据。）
removeAttr()-为匹配的元素集合中的每个元素中移除一个属性（attribute）
removeClass()-移除集合中每个匹配元素上一个，多个或全部样式
removeData()-在元素上移除绑定的数据
replaceWith()-用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
text()-得到匹配元素集合中每个元素的合并文本，包括他们的后代
toggleClass()-在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类
triggerHandler() -为一个事件执行附加到元素的所有处理程序
unbind() - 从元素上删除一个以前附加事件处理程序
val()-获取匹配的元素集合中第一个元素的当前值
wrap()-在每个匹配的元素外层包上一个html元素

　　示例：

//通过$compile动态编译htmlvar html="<div ng-click='test()'>我是后添加的</div>";

var template = angular.element(html);
var mobileDialogElement = $compile(template)($scope);
angular.element("#"+id).append(mobileDialogElement); // remove移除创建的元素

var closeMobileDialog = function () {
if (mobileDialogElement) {  
mobileDialogElement.remove();
}

　　12. 使用$rootscope

　　两种使用方法：

　　1. 按照规范：在应用的run（）方法中使用来初始化全局数据

emmsMobile.run(function($rootScope, $state){
		$rootScope.icons = {
				numIcon: 'fa fa-book fa-fw'
		};
	});

　　2. 直接在controller中注入，并调用就行

emmsMobile.controller('IssueAddMobileCtrl', ['$scope',  '$rootScope', function($scope, $rootscope) {
        $rootScope.test = "vvv";
}

13. 关于angular.bind（）理解

　　angular.bind（self， fn， args）就是把第一个参数对象与函数fn绑定起来，可以传入args参数，返回一个能够调用self对象的函数fn

　　举个例子：

function sayHello(greetings) {
	return 'hi' + this.name + greetings;
}

var obj = {name: 'tom'};

var f = angular.bind(obj, sayHello); 
f();


function test3(age) {return 'hi' + this.name + age}
undefined
var f2 = angular.bind(obj, test3);
f2('18'); // 调用时传参

posted @ 2017-01-23 19:09 果感阅读(195) 评论(0) 编辑收藏举报

刷新页面返回顶部

果感