Angular.js（七）

自定義服務factory、provider

注意：（1）自定義服務與內部的服務引入相同

（2）自定義服務要寫在內部的服務後面，並且自定義服務的命名一般不要帶$符號，目的就是與內部服務區分

factory自定義服務寫法：

var m1 = angular.module('myApp',[]);
m1.factory('myService',function(){
	return {
		name : 'hello',
		show : function(){
			return this.name + ':angular.js';
		}
	}
})
m1.controller('A',['$scope','myService',function($scope,myService){
	console.log(myService.show());
}]);

provider自定義服務寫法：

var m1 = angular.module('myApp',[]);
m1.provider('myServe',function(){
	return {
		$get : function(){
			return {
				name : 'hello',
				show : function(){
					return this.name+':anjular.js';
				}
			}
		}
	}
})
m1.controller('A',['$scope','myServe',function($scope,myServe){
	console.log(myServe.show());
}]);

factory自定義服務隨機數：

var m1 = angular.module('myApp',[]);
m1.factory('myRanndomNum',function(){
	return function(num1,num2){
		return Math.random()*(num2-num1)+num1;
	}
})
m1.controller('A',['$scope','myRanndomNum',function($scope,myRanndomNum){
	console.log(myRanndomNum(0,8));
}]);

provider自定義服務隨機數：

var m1 = angular.module('myApp',[]);
m1.provider('myRanndomNum',function(){
	return {
		bOn : false,
		int : function(b){
			if(b){
				this.bOn = true;
			}else{
				this.bOn = false;
			}
		},
		$get : function(){
			var This = this;
			return function(num1,num2){
				return This.bOn ? Math.round(Math.random()*(num2-num1)+num1):Math.random()*(num2-num1)+num1;
			}
		}				
	}
})
m1.config(['myRanndomNumProvider',function(myRanndomNumProvider){
	 myRanndomNumProvider.int(true);   // true時，打印出來的隨機數是整數， false時，打印出來的suiji
}]);
m1.controller('A',['$scope','myRanndomNum',function($scope,myRanndomNum){
	console.log(myRanndomNum(0,8));
}]);

provider和factory的區別：

（1）寫法不同

（2）provider可以初始化配置，但是factory不可以

service（）：一般採用構造函數的方法，主要就是針對面向對象開發

var m1 = angular.module('myApp',[]);
m1.service('myService',fnService);
function fnService(){
	this.name = 'hello';
}
fnService.prototype.age = 20;
m1.controller('A',['myService',function(myService){
	console.log(myService.age);    // 輸出myService下的age值
}])

constant：設置常量，可以進行初始化配置，注意的是：服務的名稱後面不需要加Provider

var m1 = angular.module('myApp',[]);
m1.constant('myService','hello');
m1.config(['myService',function(myService){
	console.log(myService);   // 在初始化配置中找到常量
}])
m1.controller('A',['myService',function(myService){
	console.log(myService);
}]);

value（）：設置常量，不能進行初始化配置

var m1 = angular.module('myApp',[]);
m1.value('myService','hello2');
m1.controller('A',['myService',function(myService){
	console.log(myService);
}]);

ngRoute：實現單頁面路由方式，有歷史管理

注意：引用route的插件時，需要與angularJs的版本保持一致，如果插件的版本高於angularJs的版本，就會報錯

var m1 = angular.module('myApp',['ngRoute']);         // 模板與模板相連
m1.config(['$routeProvider',function($routeProvider){
	$routeProvider
	.when('/a',{
		template : '<p>導航一下的內容</p>{{name}}',    // 同時可以寫成templateUrl模板的形式
		controller : 'A'           // 每一個下面都可以有一個控制器
	})
	.when('/b',{
		template : '<p>導航二下的內容</p>{{name}}',
		controller : 'B'
	})
	.when('/c',{
		template : '<p>導航三下的內容</p>{{name}}',
		controller : 'C'
	})
	.otherwise({     // 初始化路由，開始時加載一個哈希值
		redirectTo : '/a'
	});
}]);
m1.controller('A',['$scope',function($scope){
	$scope.name = "hello";
}]);
m1.controller('B',['$scope',function($scope){
	$scope.name = "hi";
}]);
m1.controller('C',['$scope',function($scope){
	$scope.name = "word";
}]);

<div ng-controller="A">
	<a href="#a">導航一</a>
	<a href="#b">導航二</a>
	<a href="#c">導航三</a>
	<div ng-view></div>   // ng-view 就是要切換的內容
</div>

事件的綁定：$on

m1.run(['$rootScope',function($rootScope){
	$rootScope.$on('$routeChangeStart',function(event,current,pre){  // 路由開始切換
		console.log(event);   // 類似原生js中的event，下面有屬性和方法
		console.log(current); // 當前路徑的數據
		console.log(pre);     // 前一個路徑的所有數據，如果當前是第一個路徑，name前一個了路徑就是undefined
	})
}])

$emit：向上傳播（類似於事件冒泡）

$broadcast：向下傳播（類似於事件捕獲）

var m1 = angular.module('myApp',[]);
m1.controller('A',['$scope',function($scope){
	$scope.number = 0;
	$scope.$on('myEvent',function(event){    // 綁定事件
		$scope.number++;
		console.log(event.targetScope == event.currentScope);   // 判斷目標作用域和當前作用域是否一致
		console.log(event.name);    // 查看當前事件的名稱
	})
}]);

<div ng-controller="A">
	{{number}}
	<div ng-controller="A" ng-click="$broadcast('myEvent')">  // 向下傳播，下面的div中的數字和這個div一起變化
		{{number}} 
		<div ng-controller="A">
			{{number}}
		</div>
	</div>
</div>

event.targetScope：事件目標的作用域

event.currenScope：事件當前的作用域

event.name：查看當前的事件名稱

event.stopPropagation：阻止事件的向下廣播或者向上廣播

內部的傳播方式

-$routeChangeStart：向上傳播

-$viewContentLoaded：向下傳播

animate：運動效果，引入文件

支持的指令分別有：ng-if ng-view ng-repeat include switch

css3的方式：ng-enter ng-enter-active ng-leave ng-leave-active （分別是進入效果和移出效果）

.box{width: 200px;height: 200px;background: red;transition:1s all;}
.box.ng-enter{opacity: 0;}
.box.ng-enter-active{opacity: 1;}
.box.ng-leave{opacity: 1;}
.box.ng-leave-active{opacity: 0;}

var m1 = angular.module('myApp',['ngAnimate']);   // 與模塊相連
m1.controller('A',['$scope',function($scope){
	$scope.bOn = true;
}]);

<div ng-controller="A">
	<input type="checkbox" ng-model="bOn">
	<div ng-if="bOn" class="box"></div>
</div>

ng-repeat：引入的文件最好是最新的文件，同時又兩個class名稱，ng-enter-stagger：進入順序 animation-delay：設置延時的時間

支持的指令分別有：class show hide model

css3的方式：ng-hide-add ng-hide-add-active ng-hide-remove ng-hide-remove-active

.box{width: 200px;height: 200px;background: red;transition:1s all;}
.box.ng-hide-remove{opacity: 0;}
.box.ng-hide-remove-active{opacity: 1;}
.box.ng-hide-add{opacity: 1;}
.box.ng-hide-add-active{opacity: 0;}

採用JS方式的運動效果

引入jQuery文件

如果指令是 if 對應寫的就是 leave 和 enter（兩個參數）

var m1 = angular.module('myApp',['ngAnimate']);
m1.animation('.box',function(){   // 第一個參數是 想要控制誰運動的class名
	return {
		leave : function(element,done){   // element：運動的標籤  done：需要執行的指令
			$(element).animate({height:0,width:0},500,done);    // 寫done就是要調用的指令
		},
		enter : function(element,done){    
			$(element).css({height:0,width:0});
			$(element).animate({height:'200px',width:"200px"},500,done)
		}
	}
})
m1.controller('A',['$scope',function($scope){
	$scope.bOn = true;
}]);

如果指令是 show 對應寫的就是 removeClass 和 addClass（不常用，寫的時候有三個參數）

var m1 = angular.module('myApp',['ngAnimate']);
m1.animation('.box',function(){
	return {
		addClass : function(element,sClass,done){   // 三個參數 sClass：代表的就是ng-hide
			$(element).animate({height:0,width:0},500,done);
		},
		removeClass : function(element,sClass,done){
			$(element).css({height:0,width:0});
			$(element).animate({height:'200px',width:"200px"},500,done)
		}
	}
})
m1.controller('A',['$scope',function($scope){
	$scope.bOn = true;
}]);

請求方式：get query

最後查找的就是Hellen.json文件

var m1 = angular.module('myApp',['ngResource']);
m1.controller('A',['$scope','$resource',function($scope,$resource){
	var obj = $resource(':name.:aaa',{aaa:'json'}，{});  // 動態的方式寫文件
	console.log(obj.get());
	$scope.data = obj.get({name:'Hellen'}，function（）{}，function（）{}); // 文件名  成功的回調 失敗的回調
}]);

採用 get 方式，點擊切換員工的信息

引入路由文件

var m1 = angular.module('myApp',['ngRoute','ngResource']);   // 模塊與模塊的相連
m1.config(['$routeProvider',function($routeProvider){
	$routeProvider
	.when('/aaa/:name',{
		template : '<div>{{data.name}}</div><div>{{data.age}}</div><div>{{data.job}}</div>',
		controller : 'A'
	})
	.otherwise({
		redirectTo : '/aaa/Anna'  
	})
}]);
m1.controller('A',['$scope','$location','$resource','$routeParams',function($scope,$location,$resource,$routeParams){
	$scope.$location = $location;
	if($routeParams.name){
		var obj = $resource($routeParams.name+'.json',{},{});
		$scope.data = obj.get();
	}	
}]);

<div ng-controller="A">
	<input type="button" value="Anna" ng-click="$location.path('aaa/Anna')">   // 動態設置
	<input type="button" value="Hellen" ng-click="$location.path('aaa/Hellen')">
	<div ng-view></div>
</div>

如果數據爲成組的json，也就是一數組的形式返回，那麼就需要用 query 來獲取數據