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

Question

如何将常量值从一个模块传递到另一个模块？先感谢您。这是 Plunker 演示。常量 "config" 在 app.module.js 中定义，我希望能够将其传递给 child.module.js 以定义常量 "childConfig"。现在控制台显示 "config is not defined".

非常感谢您。

// 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>

Answer 1

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

另一方面，如果您不介意，可以使用工厂来实现您想要的结果。基本上，您可以创建一个工厂，根据注入的 config 提供程序为您制作一个字符串。

例如：

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

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

Note on constants:

constant(name, value);

Register a constant service with the $injector, such as a string, a number, an array, an object or a function. Like the value, it is not possible to inject other services into a constant.

But unlike value, a constant can be injected into a module configuration function (see angular.Module) and it cannot be overridden by an AngularJS decorator.

Ref.: $provide.constant

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

Angular 1.6 + Components: passing constants between modules

angularjs

angular1.6