自定义服务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>

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.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（）{}); // 文件名  成功的回调 失败的回调
}]);

引入路由文件

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>