[angular]服务之1创建自定义服务

比眉伴天荒 2022-07-13 03:53 168阅读 0赞

<!DOCTYPE html>
    <html lang="en" ng-app="testServiceModule">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../frameWork/angular.js"></script>
        <script src="../testService/testServiceCreate.js"></script>
    </head>
    <body >
    <div ng-controller="testServiceCtr">通过$provide创建的服务
        <h3>方法1:通过$provide.factory服务创建的服务</h3>
        <span>{
       {provideFactoryMsg}}</span>
    
        <h3>方法2:通过$provide.Provider服务创建的服务</h3>
        <span>{
       {provideProviderMsg}}</span>
    
        <h3>方法3:通过$provide.Provider服务创建的服务</h3>
        <span>{
       {provideServiceMsg}}</span>
    
        <h3>方法4:通过$provide.constant服务创建的服务</h3>
        <span>{
       {provideConstMsg}}</span>
    
        <h3>方法5:通过$provide.value服务创建的服务</h3>
        <span>{
       {provideValueMsg}}</span>
    
    
    </div>
    <div ng-controller="testServiceCtrModule">通过module创建的服务
        <h3>方法1:通过$module.factory服务创建的服务</h3>
        <span>{
       {moduleFactoryMsg}}</span>
    
        <h3>方法2:通过$module.Provider服务创建的服务</h3>
        <span>{
       {moduleProviderMsg}}</span>
    
        <h3>方法3:通过$module.Provider服务创建的服务</h3>
        <span>{
       {moduleServiceMsg}}</span>
    
        <h3>方法4:通过$module.constant服务创建的服务</h3>
        <span>{
       {moduleConstMsg}}</span>
    
        <h3>方法5:通过$module.value服务创建的服务</h3>
        <span>{
       {moduleValueMsg}}</span>
    </div>
    </body>
    </html>

/**
     * 摘要：由于service在angular中的地位非常重要，所以得认真对待。
     *      服务是一个单例对象，与应用同生死，能够注入，是controller之间通讯的主要工具。
     *      (通信还可以用$emit,$broadcast,$on的形式，但这个方式有局限，两个controller得有关系，以后研究).
     * service实例分析第一篇：创建服务
     * Created by liyanq on 16/12/23.
     */
    
    /**创建自定服务有一下几种方法：provide、factory、service、constant、value；
     * 这两套方法在$provide和angular Module里面都能用，效果一样。
     * 1，constant创建的服务是常量，不能是对象，使用的时候，直接写服务名称(作用较小...)
     * 2，constant和value创建的服务都是返回常量，且能通过angular.extend(service,{})重置。
     *    但前者返回的常量可以被注入配置函数中，后者不能(没理解呢～～)
     * 3，通过module.service创建的最常用方法。
     * */
    var moduleConfig = function ($provide) {
        $provide.provider("provideProvider", function () {
            this.$get = function () {
                return {msg: "来自$provide.provider创建的服务"}
            };
        });
        $provide.factory("provideFactory", function () {
            return {
                msg: "来自$provide.factory创建的服务"
            };
        });
        $provide.service("provideService", function () {
            return {
                msg: "来自$provide.Service创建的服务"
            };
        });
        $provide.constant("provideConst", "来自$provide.constant创建的服务");
        $provide.value("provideValue", "来自$provide.value创建的服务");
    };
    var app = angular.module("testServiceModule", [], moduleConfig);
    app.controller("testServiceCtr", ["$scope", "provideFactory", "provideProvider", "provideService", "provideConst",
        "provideValue",
        function ($scope, provideFactory, provideProvider, provideService, provideConst, provideValue) {
            $scope.provideFactoryMsg = provideFactory.msg;
            $scope.provideProviderMsg = provideProvider.msg;
            $scope.provideServiceMsg = provideService.msg;
            $scope.provideConstMsg = provideConst;
            $scope.provideValueMsg = provideValue;
        }]);
    app.provider("moduleProvider", function () {
        this.$get = function () {
            return {msg: "来自module.provider创建的服务"}
        };
    }).factory("moduleFactory", function () {
        return {
            msg: "来自module.factory创建的服务"
        };
    }).service("moduleService", function () {
        return {
            msg: "来自module.Service创建的服务"
        };
    }).constant("moduleConst", "来自module.constant创建的服务").value("moduleValue", "来自module.value创建的服务");
    
    app.controller("testServiceCtrModule", ["$scope", "moduleFactory", "moduleProvider", "moduleService", "moduleConst",
        "moduleValue",
        function ($scope, moduleFactory, moduleProvider, moduleService, moduleConst, moduleValue) {
            $scope.moduleFactoryMsg = moduleFactory.msg;
            $scope.moduleProviderMsg = moduleProvider.msg;
            $scope.moduleServiceMsg = moduleService.msg;
            $scope.moduleConstMsg = moduleConst;
            $scope.moduleValueMsg = moduleValue;
        }]);