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属性来访问控制器里的数据