Different Factory,service,provider custom services in Angularjs

Source: Internet
Author: User


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;
       };
   }
]);

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.