Angular 1.6 + 组件：在模块之间传递常量答案

【问题标题】：Angular 1.6 + Components: passing constants between modulesAngular 1.6 + 组件：在模块之间传递常量
【发布时间】：2017-09-19 18:39:58
【问题描述】：

如何将常量的值从一个模块传递到另一个模块？先感谢您。这是Plunker 演示。常量“config”在 app.module.js 中定义，我希望能够将它传递给 child.module.js 以定义常量“childConfig”。现在控制台说“配置未定义”。

非常感谢您。

// app.module.js
(function(){
    "use strict";

    var myApp = angular
        .module("myApp", ["child"]);

    myApp.constant("config", {
        rootURL: "components/"
        , version: "myApp1.0.0"
    })
})();

// app.component.js
(function(){

    "use strict";

    // Define controller
    function mainController(){
        this.$onInit = function() {
            var mainVM = this;

            mainVM.parent = {
                "lastName": "Smith"
                , "firstName": "Jordan"
            };
        };

    }

    // Define component
    var mainComponent = {
        controller: mainController
        , controllerAs: "mainVM"
    };

    // Register controller and component
    angular.module("myApp")
        .controller("mainController", mainController)
        .component("mainComponent", mainComponent);

})();

//components/child.module.js
(function(){
    "use strict";

    var child = angular.module("child", []);
    
    child.constant("childConfig", config);

})();

//components/child.component.js
(function(){
    "use strict";

    // Define controller
    function childController(config) {
        this.$onInit = function() {
            var vm = this;
            
            vm.getTemplateUrl = function(){
              return config.rootURL + 'child.html';
            }
            vm.rootURL = config.rootURL;
            vm.version = config.version;
            vm.child = {
              "firstName": "Jack"
            }
        };
        // end of $onInit()
    }

    // Define component
    var child = {
        //templateUrl: vm.getTemplateUrl + "child.html"
        //templateUrl: "components/child.html"
        template: "<ng-include src='vm.getTemplateUrl()'/>"
        , controller: childController
        , controllerAs: "vm"
        , bindings: {
            parent: "<"
        }
    };


    // Register controller and component
    angular.module("child")
        .controller("childController", childController)
        .component("child", child);

})();

<!DOCTYPE html>
<html>

  <head>
    <script src="//code.angularjs.org/snapshot/angular.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="app.module.js"></script>
    <script src="app.component.js"></script>
    <script src="components/child.module.js"></script>
    <script src="components/child.component.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="mainController as mainVM">
    Parent: {{mainVM.parent.firstName}} {{mainVM.parent.lastName}}<br>
    <child parent="mainVM.parent"></child>
  </body>

</html>

【问题讨论】：

两次定义同一个常量有什么意义？只需在需要的地方注入配置常量。
不，我没有定义相同的常量两次。我正在开发的实际应用程序要大得多，并且有很多级别。我需要在每个子常量的定义中使用父常量，以便它们可以在自己的控制器中使用。当我更新 rootURL 时，所有子 URL 都将被更改。我已经更新了 Plunker 来证明这一点。
不要为您的子配置定义常量。定义一个服务，您可以在其中注入根常量，并返回一个对象，其中包含其值取决于注入的常量的字段。
这是有道理的。谢谢。

标签： angularjs angular1.6

【解决方案1】：

我认为您可能误解了constant 工厂的功能。它不应该是可变的，也不是变量，因此它不能使用另一个外部提供者来组成它的值，它只会提供一个纯的纯值。

另一方面，如果您不介意，可以使用工厂来实现您正在寻找的结果。基本上你可以创建一个工厂，根据注入的config 提供者为你制造一个字符串。

例如：

child.factory("childConfigURL", ['config', function(config) {
    return config.rootURL + "/component/";
}]);

这种方法的唯一问题是它不能被注入到模块配置函数中，因为它不再是纯粹的，需要引导来解决它的依赖关系。

注意常量：

constant(name, value);

用$injector注册一个常量服务，比如一个字符串，一个数字、数组、对象或函数。喜欢的价值，它不是可以将其他服务注入到常量中。

但与 value 不同的是，可以将常量注入到模块中配置函数（见 angular.Module），它不能被 AngularJS 装饰器覆盖。

参考：$provide.constant

【讨论】：

谢谢。这回答了我的问题。