One, Factory,service,provider custom service, Services.js
The code is as follows |
Copy Code |
' Use strict '; * Services * * var phonecatservices = angular.module (' phonecatservices ', []); Phonecatservices.factory (' facetorytest ', [' $window ', / Factory mode function ($window) { var test = { & nbsp; FirstName: "Tank", lastname:function () { return "Zhang"; } }; $window. Alert (' AAAA '); //Built-in services can be injected with return test; } ]; Phonecatservices.service (' servicetest ', [' $window ', / Service Mode function ($window) { $window. Alert (' BBBB '); //built-in services can be injected into This.firstname = "Tank"; this.lastname = function () { return "Zhang"; } } ]); Phonecatservices.provider (' Providertest ', [//provider way, built-in service not to inject function () { This.test = { "FirstName": "Tank", "LastName": "Zhang" } this. $get = function () { return this.test; }; } ]); |
Second, controller calls the custom module, controllers.js
The code is as follows |
Copy Code |
' Use strict '; * Controllers * * var phonecatcontrollers = angular.module (' Phonecatcontrollers ', []); Write the JS function of this call mode, very familiar with the service name can not be changed function Testctrl ($scope, facetorytest,servicetest,providertest) { $scope. facetorytest = facetorytest.firstname+ "" +facetorytest.lastname (); $scope. servicetest = servicetest.firstname+ "" +servicetest.lastname (); $scope. providertest = providertest.firstname+ "" +providertest.lastname; } //This invocation method root jquery very much like, the service name can not be changed 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; }); Called in an injection manner, the service name can be changed Phonecatcontrollers.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; } ]); www.111cn.net |
Third, create the app to put the service and controller together. App.js
The code is as follows |
Copy Code |
' Use strict '; /* APP Module */ var Phonecatapp = angular.module (' Phonecatapp ', [ ' Ngroute ', ' Phonecatcontrollers ',//Controller defined above ' Phonecatservices '//Custom services above ]); |
Four, display in HTML
The code is as follows |
Copy Code |
<!doctype html> <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> <body > <div ng-controller= "Testctrl" > <p>{{facetorytest}}</p> <p>{{servicetest}}</p> <p>{{providertest}}</p> </div> </body> Show Results: Tank Zhang Tank Zhang Tank Zhang |
Five, error correction
On the internet, it was said that the service could not be injected into the built-in server, but the actual result is that provider can not be injected into the built-in services. The ANGULARJS version I used was Angularjs v1.2.14.
The code is as follows |
Copy Code |
Phonecatservices . Provider (' Providertest ', [' $window ', function ($window) { $window. Alert (' '); //Error this.test = { "FirstName": "Tank", LastName ":" Zhang " } this. $get = function () { return this.test; }; } ]); |