angualrjs 总结 随记(一)
$apply方法的作用
$apply方法是用来触发脏检查，它在控制器里监听一个变量，每当这个变量的值改变的时候，它会去与最初的值做一次比较，然后HTML页面就会及时更新该变量的值(将最新的值赋值到html页面的view层或Model层(表单));
var fristController = function($scope){ $scope.date = new Date(); setInterval(function(){ $scope.$apply(function(){ $scope.date=new Date(); }) },1000) }
HTML页面里的{{date}}就会每隔一秒更新
$watch方法
监听一个model(表单),当一个model每次改变时，都会触发第二个参数函数
$scope.$watch('name',function(){});//name是model名<input type='text' value='' ng-model='name'/>
$watch也可以监听一个json对象，当第三个参数设为true时，它监听对象里的每个属性，如果没有第三个参数，只监听对象本身，只有整个对象发生变化时，才会触发第二个参数函数，比如当这个对象变为数组的时候
服务
factory方法返回的是对象，json或数组,也可以返回字符串类型的数据，但service方法只能返回数据或对象
创建服务有3种方法
$provide.provider('服务名',function(){this.$get=function(){return obj}});
$provide.factory('服务名',fn);
$provide.service('服务名',fn);
服务的作用是用来在多个控制器内共享数据
angular.module('myApp',[])
.factory('服务名',function(){
return {uname:'kevin',pwd:'123'}
})
.controller('ctrlname',function('服务名',$scope){
// ...
})
.directive('myDirective', function(){
return {
template: '<button>Click me</button>'
}
})
fireworks将图片变为透明色
如果是新建的图片，只要把画布背景设置成透明，图片完成后保存为GIF格式即可；
如果是已经存在的图片，用Fireworks将图片打开，然后按Ctrl+Shift+X，在弹出界面中格式选择为GIF。在右边预览图中，把它放大。然后在你要变透明的区域按鼠标右键，选“透明”，这样就可以了.
自定义指令
自定义指令有两种方法：
第一种:
angular.module('myapp',[],['$compileProvider',function($compileProvider){
$complieProvider.directive(''指令名',function(){
return {
restrict: 'ACEM',
replace: true,
transclude: true,
template: '<div>content<span ng-transclude></span></div>'
}
})
}]);
第二种:
angular.module('myapp',[]).directive('指令名',function(){
return {
restrict: 'ACEM',
replace:true,
transclude:true,
template:'<div>content<span ng-transclude></span></div>',
templateUrl:'demo/index.html' //这里的路径是相对angular下的index.html的,模板里的内容可以获取控制器里定义的属性变量
}
})
指令常用配置属性
priority //设定指令的优先级，值越大优先级越高
terminal：true //这个属性必须和priority共用，过滤所有比priority值低的指令
transclude //这个属性可以保留被替换的内容,如在新模板里加上这个就会将原始数据加载到这个div里<div ng-transclude></div>
link
compile
还有一种在当前视图里加载另一个模板的方式
<script type="text/ng-template" id="customTag2"> // 在这里写内容，也可以用控制器里的变量,如{{name}} </script> <my-tag></my-tag> //这里将用customTag2模板里的内容来替换,必须用分号隔开
angular.module('myapp',[]).directive('指令名:mytag',function(){ return { restrict: 'ACEM', replace:true, transclude:true, templateUrl:'customTag2' //这里的路径是相对angular下的index.html的,模板里的内容可以获取控制器里定义的属性变量 } })
创建应用和模型和控制器
1、创建应用
Myapp = Ember.Application.create({ name:'kevin', age:18, ready:function(){ alert('加载应用时自动调用该初始化方法,属性通过Myapp.name访问，这里的对象可有可无') } })；
2、创建模型models
Myapp.Song = Ember.Object.extend({ title: null,
artist: null,
genre: null,
listens: 0 })
实例化模型对象
var mySongs = Song.create({
title: 'Son of the Morning',
artist: 'Oh, Sleeper',
genre: 'Screamo'
})
3、创建控制器
Myapp.songsController = Ember.ArrayController.create({ content: [], init: function(){ var song = Myapp.Song.create({
title: 'Son of the Morning',
artist: 'Oh, Sleeper',
genre: 'Screamo'
}); this.pushObject(song); } });
注：init 函数不是必需的，但它很方便，因为 songsController 一旦就绪，就会触发 init 函数。 它可以用来将现有数据填充到控制器。
配置路由
AngularJS路由功能是一个纯前端的解决方案，与我们熟悉的后台路由不太一样。
后台路由: 通过不同的URL会路由到不同的控制器上(controller)，再渲染(render)到页面(HTML)。
AngularJS的前端路由: 需求提前对指定的(ng-app)，定义路由规则(routeProvider)，然后通过不同的URL，告诉(ng-app)加载哪个页面(HTML)，再渲染到(ng-app)视图(ng-view)中。
通过$routeProvider('url',Object)配置路由;第一个参数是路由路径，第二个参数是可配置对象。
配置对象中可以进行设置的属性包括：controller、 template、 templateURL、 resolve、 redirectTo和reloadOnSearch。
url中的参数可以在通过$routeParams对象获取，比如$routeParams.name,要注意的是$routeParams必须在控制器里传入这个参数对象
配置一个比较复杂的路由
ngular.module('myApp', [])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.when('/login', {
templateUrl: 'views/login.html',
controller: 'LoginController'
})
.when('/dashboard', {
templateUrl: 'views/dashboard.html',
controller: 'DashboardController',
resolve: {
user: function(SessionService) {
return SessionService.getCurrentUser();
}
}
})
.otherwise({
redirectTo: '/'
});
}]);
自定义过滤器
自定义过滤器有两种方法
第一种
$filterProvider.register('filterName',function(){
return function(obj){
var newObj =[];
angular.forEach(obj,function(o){
if(o.age>20)
newObj.push(o);
})
return newObj
}
})
第二种
angular.module('myapp',[]).filter('filterName',function(){
return function(){}//和上面的一样
})
视图代码
<ul> <li ng-repeat="user in data | filterName">//将每个user对象依次传给上面函数的参数obj user.name user.age </li> </ul>
自定义控制器
$controllerProvider.register('ctrlName',function($scope,serviceName){
// ...
})
控制器的显示注入
第一种显示注入
function demoController(a){} demoController.$inject=['$scope']
第二种显示注入
angular.module('myApp',[]).controller('demoController',['$scope',function(a){
// ...
}])
内置指令和内置事件
<div ng-include="'other.html'"></div> <div ng-include src="'other.html'"></div> <button ng-click='changeStaus($event)'>点击</button>
$scope.changeStaus=function(event){ angular.element(event.target).html('点击改变按钮文字'); angular.element() //方法可以把dom对象转换为jquery对象 }
<上图为一个元素上有2个指令的情况>
把指令标签转换为dom结构，执行complie方法，compile方法返回的就是Link函数, 所以如果指令配置了compile方法，就不需要再配置Link方法了。
compile方法 有3个参数 tElement, tAttrs, transclude。
其中tElement是该指令标签的JQuery对象，transclude是原始数据里的内容
compile:function(tElement,tAttrs,transclude){ tElement.append(angular.element("<div>content</div>"));//这种方式可以给该标签增加内容 return {
pre: function(scope,iElement,iAttrs,controller){},
post:function(scope,iElement,iAttrs,controller){}
} //这就是Link方法，它包含两个属性，pre指在指令连接到子元素之前运行该方法，post指令连接到子元素之后运行该方法 }
一般 compile方法用来改变dom结构，link方法用来给该指令元素绑定事件，Link方法包含4个参数 scope, iElement, iAttrs, controller
Link:function(scope,iElement,iAttrs,ctrlname){//scope是当前指令元素的作用域，ctrlname是该指令元素的控制器名 iElement.on('click',function(){ scope.$apply(function(){ //在控制器里改变视图模板里的内容必须用脏检查$apply方法，除非该元素用了ng-model指令绑定了数据 scope.user.name='new name'; }) }) }
指令的配置对象里还有一个controller属性
controller:function($scope){};//给该指令元素创建一个控制器 controllerAs:'ctrlname';//给该控制器取一个名字
【anuglar疑问】
服务里返回的数据是不是只能传给控制器，而不能传给指令呢？
如果是的话，那么指令只能通过配置scope属性来访问控制器里的数据
