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的,模板裏的內容能夠獲取控制器裏定義的屬性變量
　　}
})

 

建立應用和模型和控制器

一、建立應用

Myapp = Ember.Application.create({
　　name:'kevin',
　　age:18,
　　ready:function(){
　　　　alert('加載應用時自動調用該初始化方法,屬性經過Myapp.name訪問，這裏的對象無關緊要')
　　}
})；

二、建立模型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'
})

三、建立控制器

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屬性來訪問控制器裏的數據