Angular 1.6 & 多模块：在模块和组件之间共享全局变量

Question

我正在使用 Angular 1.6.7。我在我的应用程序中创建了多个模块。如何将父模块 (myApp) 中定义的常量（例如 "rootURL"）传递给子模块 (childApp)？更具体地说，我需要将 "rootURL" 的值分配给 childApp 组件的 templateUrl，这样我们就不必为每个模块硬编码根目录。我想我知道如何在控制器内共享变量，但不知道如何在组件定义内执行此操作。

这里有一个要演示的 Plunker。在app.module.js中我定义了一个常量"config"。我该怎么做才能在为 "child" (components/child.component.js) 定义组件时，而不是 templateUrl: "components/child.html"，我可以说类似 "config.rootURL + child.html"？我们不必使用常量。

提前致谢。

// 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", []);

})();


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

    // Define controller
    function childController() {
        this.$onInit = function() {
            var vm = this;
            vm.child = {
              "firstName": "Jack"
            }
        };
        // end of $onInit()
    }

    // Define component
    var child = {
        templateUrl: "components/child.html"
        , 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>

<!-- components/child.html -->
Child: {{vm.child.firstName}} {{vm.parent.lastName}}

Answer 1

当您使用 myApp.constant() 注册常量时，该值就像任何其他服务一样可注入。您可以将它注入组件的控制器并使用它，但到那时 angular 已经下载（或尝试下载）模板。您需要在组件注册时修改 URL，但是，在您注册组件时可注入尚不可用。

我建议您改为研究称为 $http 拦截器的功能。您可以编写一个拦截器来查找模板请求并修改它们的 url.

https://docs.angularjs.org/api/ng/service/$http

我建议编写带有标记的模板 url，然后在拦截器中查找该标记。例如：

templateUrl: '{tplBase}/myTemplate.html'

然后拦截器查找该令牌并将其交换为根 URL

myApp.config(function($httpProvider) {
    //The interceptor factory is injectable, so inject your config constant here...
    $httpProvider.interceptors.push(function(config) {
        return {
           'request': function(httpConfig) {

                if (httpConfig.url.contains('{tplBase}')) {
                    httpConfig.url = httpConfig.url.replace('{tplBase}', config.rootUrl);
                }
                return httpConfig;
           }
        };
    });
});

Answer 2

instead of templateUrl: "components/child.html", I can say something like "config.rootURL + child.html"?

相反 templateUrl 你可以写 template 和 ng-include:

template: '<ng-include src="getTemplateUrl()"/>',

和：

 scope.getTemplateUrl = function () {
    return config.rootURL + 'child.html';
 };

Demo Plunker

代码示例：

function childController(config) {

        this.getTemplateUrl = function(){
          return config.rootURL + 'child.html';
        };

        this.$onInit = function() {
            var vm = this;
            vm.child = {
              "firstName": "Jack"
            }
        };
        // end of $onInit()
    }

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

Angular 1.6 & 多模块：在模块和组件之间共享全局变量

Angular 1.6 & multiple modules: sharing global variable between modules & components

angularjs

angular1.6