Question

我正在使用angular routing来在angularjs中创建我的单页Web应用程序。所以我的index.html文件只是bower_components的URL，它只包含这个路由值：

<body ng-app="myAngApp">
    <div ui-view>
</div>

这里的大多数网址都是静态网址，如Bower_components服务等。

但我想根据commonURLs.js文件的内容使用其中一个动态网址：

(function(app) {
    'use strict';
    app.factory('commonUrls',function() {
    var urls = {"dev": "http://google.com", "prod": "http://yahoo.com"}
    return urls;
}))

所以在index.html中我想使用这样的地方：

<script src="{{commonUrls.dev}}/scripts.js"></script>

我希望我的问题很明确。再简要总结一下，我基本上想在index.html文件中使用一个变量。我怎样才能做到这一点。

Answer 1

据您所知，角度仅适用于：在应用程序的范围内在html解析之后。所以在加载angular.js之前，你的指令将不起作用。

这意味着你无法直接达到你想要的效果。你能做什么？我看到两个选择。

选项＃1。

将工厂外的urls对象移动到全局对象： window.myApplication = {urls：{}}
添加一些纯粹的javascript 将脚本添加到您的索引html。
将此全局对象用于你的工厂。

function addScript(src, htmlContainer) {
        var script = document.createElement('script');
        script.src = src;
        script.type = 'text/javascript';
        script.async = false;
        htmlContainer.appendChild(script);
    }

通过这种方式，您可以动态加载脚本（关于环境），它将与您的路由同步。

选项＃2

将所有内容移至您的构建器（webpack，gulp，e.t.c）

将脚本定义为
```
 script src="{root}\js\bundle.js"> 
```
在窗口对象中定义全局变量url。 window.myApp = {root：＆＃39; {root}＆＃39;}
将此全局变量包装到角度变量中，以避免依赖于窗口对象。
将此变量用作工厂作为所有网址的前缀。 5.在您的构建过程中，每次为另一个环境构建应用程序时，请使用正确的URL替换此变量。

通过这种方式，所有建筑人员都将被转移到正确的代理（构建过程）并使您的代码更清洁。但这会增加您的构建过程的复杂性和时间。

抱歉忘了。在第一种情况下，你仍然需要以某种方式连接构建器和你的HTML，因为HTML不知道（并且应该知道什么）你的环境。因此，无论如何，您需要修改构建过程。

Answer 2

在模块中定义常量，然后在您的控制器中注入 CONFIG 。

            angular.module('app', [])
                .constant('CONFIG', {
                    commonUrls: function(flag) {
                        var urls = { "dev": "http://google.com", "prod": "http://yahoo.com" };
                        return urls[flag];
                    }
            })
            .controller('AppCtrl', ['$scope','CONFIG',
            function($scope,CONFIG) {

            //Return http://google.com
            console.log(CONFIG.commonUrls("dev"));

            $scope.URL = CONFIG.commonUrls("dev");


            ...
            ...

在索引文件

中

<div ng-controller="AppCtrl">
    <script src="{{URL}}/scripts.js"></script>
</div>

编辑：要在HEAD部分附加脚本，我们可以修改功能如下：

                .constant('CONFIG', {
                    commonUrls: function(flag) {
                        var urls = { "dev": "http://google.com", "prod": "http://yahoo.com" };
                        var script = document.createElement('script');
                        script.src = urls[flag]+'/scripts.js';
                        $("head").append(script);
                    }

Answer 3

上面的许多解决方案都有效，但我用最简单的方法解决了这个问题（我相信）：

在我的角度应用程序的app.js文件中，我将此值设置为rootscope类似于此：

app.run(['$rootScope', 'commonUrls',
    function ($rootScope, commonUrls) {
        $rootScope.socketUrl = commonUrls.socketUrl + "/socket.io/socket.io.js";
    }
]);

现在我可以在index.html文件中轻松访问此值，而无需执行任何其他操作。

<script ng-src="{{socketUrl}}"></script>

如果你有更容易的解决方案，请评论/回答。我很乐意接受你的回答。

Answer 4

你需要一个控制器。注入$scope。通过向$scope添加属性来定义范围变量。您可以在HTML文件中访问该属性。

JS：

angular.module('myAngApp', [])

.controller('AppCtrl', function ($scope) {
    $scope.urls = {"dev": "http://google.com", "prod": "http://yahoo.com"};
}

HTML：

<div ng-controller="AppCtrl">
    <script src="{{urls.dev}}/scripts.js"></script>
</div>

在index.html文件中使用JS变量

4 个答案: