angularjs框架学了有一段时间了,感觉很好用。可以把angularjs的app理解成php的class,controller是控制器,而内置服务和自定义服务就可以理解成models了。angularjs的内置服务多,例如:$scope,$rootScope,$http,$q,$resource,$routeProvider等等,下面来说一下怎么自定义服务
一,factory,service,provider自定义服务,services.js
‘use strict‘; /* Services */ var phonecatServices = angular.module(‘phonecatServices‘, []); phonecatServices.factory(‘facetorytest‘, [‘$window‘, //factory方式 function($window){ var test = { firstname:"tank", lastname:function(){ return "zhang"; } }; $window.alert(‘aaaa‘); //内置服务可以注入 return test; } ]); phonecatServices.service(‘servicetest‘, [‘$window‘, //service方式 function($window){ $window.alert(‘bbbb‘); //内置服务可以注入 this.firstname = "tank"; this.lastname = function(){ return "zhang"; } } ]); phonecatServices.provider(‘providertest‘,[ //provider方式,内置服务不可以注入 function(){ this.test = { "firstname":"tank", "lastname":"zhang" } this.$get = function () { return this.test; }; } ]);
二,controller调用自定义模块,controllers.js
‘use strict‘; /* Controllers */ var phonecatControllers = angular.module(‘phonecatControllers‘, []); //写过js function的对这种调用方式,很熟悉,服务名称不能变 function TestCtrl($scope,facetorytest,servicetest,providertest) { $scope.facetorytest = facetorytest.firstname+" "+facetorytest.lastname(); $scope.servicetest = servicetest.firstname+" "+servicetest.lastname(); $scope.providertest = providertest.firstname+" "+providertest.lastname; } //这种调用方式根jquery非常的像,服务名称也不能变 phonecatControllers.controller(‘TestCtrl‘,function($scope,facetorytest,servicetest,providertest) { $scope.facetorytest = facetorytest.firstname+" "+facetorytest.lastname(); $scope.servicetest = servicetest.firstname+" "+servicetest.lastname(); $scope.providertest = providertest.firstname+" "+providertest.lastname; }); //以注入的方式来调用,服务名称可以改变 phonecatControllers.controller(‘TestCtrl‘,[‘$scope‘,"facetorytest","servicetest","providertest", function($scope,facetory111,service111,provider111) { //自定义,服务名称 $scope.facetorytest = facetory111.firstname+" "+facetory111.lastname(); $scope.servicetest = service111.firstname+" "+service111.lastname(); $scope.providertest = provider111.firstname+" "+provider111.lastname; } ]);
三,创建app把上面的service和controller接合到一起。app.js
‘use strict‘; /* App Module */ var phonecatApp = angular.module(‘phonecatApp‘, [ ‘ngRoute‘, ‘phonecatControllers‘, //上面定义的controller ‘phonecatServices‘ //上面自定义的服务 ]);
四,html中显示
<!doctype html> <html lang="en" ng-app="phonecatApp"> <head> <meta charset="utf-8"> <title>Google Phone Gallery</title> <link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/bootstrap.css"> <script src="lib/angular/angular.js"></script> <script src="lib/angular/angular-route.js"></script> <script src="js/app.js"></script> <script src="js/controllers.js"></script> <script src="js/services.js"></script> </head> <body > <div ng-controller="TestCtrl"> <p>{{facetorytest}}</p> <p>{{servicetest}}</p> <p>{{providertest}}</p> </div> </body> </html> 显示结果: tank zhang tank zhang tank zhang
五,错误纠正
在网上看到,有人说service是不能注入内置服务器的,但是实际操作结果是provider是不能注入内置服务的。我用的angularjs的版本是AngularJS v1.2.14
phonecatServices.provider(‘providertest‘,[‘$window‘, function($window){ $window.alert(‘cccc‘); //报错 this.test = { "firstname":"tank", "lastname":"zhang" } this.$get = function () { return this.test; }; } ]);
原文链接:http://blog.51yip.com/jsjquery/1606.html
时间: 2024-07-30 13:43:43