demo.html(factory方法实现):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS</title> <script src="angular.min.js"></script> <!-- 引入AngularJS框架 --> </head> <body ng-app="App"> <div ng-controller="DemoController"> {{name}} </div> <script> var App = angular.module('App',[]); // 三种方法实现自定义服务 factory、service、value // 自定义服务。 后面的[]表示依赖注入 App.factory('myservice',['$filter',function($filter) { // 自定义服务, 该服务依赖于$filter return function(inputData) { // 可以返回一个对象,那么调用该服务时也要进行修改 var uppercase = $filter('uppercase'); // uppercase过滤器 inputData = uppercase(inputData); return inputData; } }]); // 控制器 使用自定义的服务 App.controller("DemoController",['$scope','myservice',function($scope,myservice) { $scope.name = myservice('zhangsan'); // 调用自定义的服务 }]); </script> </body> </html>
demo.html(service方法实现):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS</title> <script src="angular.min.js"></script> <!-- 引入AngularJS框架 --> </head> <body ng-app="App"> <div ng-controller="DemoController"> {{time}} </div> <script> var App = angular.module('App',[]); // 三种方法实现自定义服务 factory、service、value // 自定义服务。 后面的[]表示依赖注入 App.service('timeService',['$filter',function($filter) { this.showTime = function() { // this就表示自定义服务timeService var date = $filter('date'); // date过滤器 return date(new Date,'yyyy-MM-dd hh:mm:ss'); } // 默认 return this; }]); // 控制器 使用自定义的服务 App.controller("DemoController",['$scope','timeService',function($scope,timeService) { $scope.time = timeService.showTime(); // 调用自定义的服务 }]); </script> </body> </html>
demo.html(value方法实现):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS</title> <script src="angular.min.js"></script> <!-- 引入AngularJS框架 --> </head> <body ng-app="App"> <div ng-controller="DemoController"> <h3>{{author}}</h3> <h3>{{version}}</h3> </div> <script> var App = angular.module('App',[]); // 三种方法实现自定义服务 factory、service、value // 自定义服务。 value App.value('author','张三'); // 键值对的形式,相当于常量 App.value('version','1.0.1'); // 控制器 使用自定义的服务 App.controller("DemoController",['$scope','author','version',function($scope,author,version) { $scope.author = author; // 调用自定义的服务 (常量) $scope.version = version; }]); </script> </body> </html>