<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
</head>
当你初试Angular 时，很自然地就会往controller 和scope 里堆满不必要的逻辑。一定要早点意识到，
controller 这一层应该很薄；也就是说，应用里大部分的业务逻辑和持久化数据都应该放在service
里。很多人问道，关于如何在controller 该干的事。出于内存性能的考虑，controller 只在需要
的时候才会初始化，一旦不需要就会被抛弃。因此，每次当你切换或刷新页面的时候，Angular 会清空当前的
controller。与此同时，service可以用来永久保存应用的数据，并且这些数据可以在不同的controller之间使用。
Angular 提供了3种方法来创建并注册我们自己的服务。1.Provider2.Factory3.Service
<body ng-app="myApp">
<div ng-controller="firstController">
{{name}}
</div>
<script>
var m1 = angular.module('myApp',[],function($provide){//通过angular.module的第三个参数配置服务
$provide.provider('providerServices01',function(){//providerServices01是服务的名称，第二个参数是函数，自定义的服务。
this.$get=function(){
return {
message:'this is providerServices01'
}
}
})
});
console.log(m1);
m1.controller('firstController',['$scope','providerServices01',function($scope,providerServices01){//在controller中使用服务
console.log(providerServices01);
$scope.name='张三';
}]);
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="firstController">
{{name}}
</div>
<script>
var m1 = angular.module('myApp',[]);//module.config配置服务
m1.config(function($provide){
$provide.provider('providerServices01',function(){
this.$get=function(){//服务的方法
return {
message:'this is providerServices01'
}
}
});
$provide.provider('providerServices02',function(){
this.$get=function(){
var _name='';
var service={};
service.setName=function(name){
_name=name;
}
service.getName=function(){
return _name;
}
return service;
}
});
})
console.log(m1);
m1.controller('firstController',['$scope','providerServices01','providerServices02',function($scope,providerServices01,providerServices02){
console.log(providerServices01);
providerServices02.setName('李四1111');
$scope.name= providerServices02.getName();
console.log( providerServices02);
}]);
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
</head>
//自定义服务
<body ng-app="myApp">
<div ng-controller="firstController">
{{name}}
</div>
<script>
var m1 = angular.module('myApp',[],function($provide){
$provide.provider('providerServices01',function(){
this.$get=function(){//需要get
return 'this is providerServices01';
}
});
$provide.factory('factoryServices01',function(){
return {//不需要$get
message:'this is factoryServices01'
}
});
$provide.factory('factoryServices02',function(){
return 'this is factoryServices01 text';
});
$provide.service('serviceServices01',function(){
return {
message:'this is serviceServices01'
}
})
});
console.log(m1);
m1.controller('firstController',['$scope','providerServices01','factoryServices01','factoryServices02','serviceServices01',function($scope,providerServices01,factoryServices01,factoryServices02,serviceServices01){
console.log(providerServices01);
console.log(factoryServices01);
console.log(factoryServices02);
console.log(serviceServices01);
$scope.name='张三';
}]);
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="firstController">
{{name}}
</div>
<script>
var m1 = angular.module('myApp',[]);
m1.provider('providerServices01',function(){
this.$get=function(){
return {
message:'this is providerServices01'
}
}
});
m1.service('serviceServices01',function(){
return {
message:'this is serviceServices01'
}
})
console.log(m1);
m1.controller('firstController',['$scope','providerServices01','serviceServices01',function($scope,providerServices01,serviceServices01){
console.log(providerServices01);
console.log(serviceServices01);
$scope.name='张三';
}]);
</script>
</body>
</html>
