Home > Developer > Web Develop
Angularjs framework for a period of time, feeling very useful. The Angularjs app can be understood as PHP's Class,controller is the controller, and the built-in services and custom services can be understood as models. Angularjs has many built-in services, such as: $scope, $rootScope, $http, $q, $resource, $routeProvider and so on, here's how to customize the service
One, Factory,service,provider custom service, Services.js
' Use strict '; /*Services*/ varPhonecatservices = Angular.module (' phonecatservices '), []); Phonecatservices.factory (' Facetorytest ', [' $window ',//Factory Way function($window) {varTest ={firstname:"Tank", LastName:function(){ return"Zhang"; } }; $window. Alert (' AAAA ');//built-in services can inject returntest; } ]); Phonecatservices.service (' Servicetest ', [' $window ',//Service Mode function($window) {$window. Alert (' bbbb ');//built-in services can inject This. FirstName = "Tank"; This. LastName =function(){ return"Zhang"; } } ]); Phonecatservices.provider (' Providertest ', [//provider mode, built-in services cannot be injected function(){ This. Test = { "FirstName": "Tank", "LastName": "Zhang" } This. $get =function () { return This. Test; }; } ]);
Second, the controller calls the custom module, controllers.js
' Use strict '; /*Controllers*/ varPhonecatcontrollers = Angular.module (' phonecatcontrollers '), []); //write the JS function of this call method, very familiar with the service name can not be changedfunctionTestctrl ($scope, facetorytest,servicetest,providertest) {$scope. facetorytest= facetorytest.firstname+ "" +Facetorytest.lastname (); $scope. Servicetest= servicetest.firstname+ "" +Servicetest.lastname (); $scope. Providertest= providertest.firstname+ "" +Providertest.lastname; } //this way of calling the root jquery is very similar, the service name does not changePhonecatcontrollers.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; }); //invoked in an injected manner, the service name can be changedPhonecatcontrollers.controller (' Testctrl ', [' $scope ', ' facetorytest ', ' servicetest ', ' providertest ', function($scope, facetory111,service111,provider111) {//Custom, service name$scope. facetorytest = facetory111.firstname+ "" +Facetory111.lastname (); $scope. Servicetest= service111.firstname+ "" +Service111.lastname (); $scope. Providertest= provider111.firstname+ "" +Provider111.lastname; } ]);
Third, create the app to join the service and controller above. App.js
' Use strict '; /* * /var phonecatapp = angular.module (' Phonecatapp ', [' Ngroute ' , ' phonecatcontrollers ', // controller ' phonecatservices ' defined above /// services defined above ]);
Four, shown in HTML
<!doctype html> Show results: tank Zhang Tank Zhang tank Zhang
Five, error correction
See online, some say service is not injected into the built-in server, but the actual operation result is provider can not inject built-in services. The version of Angularjs I'm using is Angularjs v1.2.14
Phonecatservices.provider (' providertest ', [' $window ', function($window) { $ Window.alert (' '); // Error this. Test = { "FirstName": "Tank", "LastName": "Zhang" } This function () { returnthis. test; }; } ]);
Original link: http://blog.51yip.com/jsjquery/1606.html
Angularjs Factory,service,provider Customize the service differently
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
