<!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>