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

我正在使用角度路由在angularjs中創建我的單頁Web應用程序。所以我的index.html文件只是充滿bower_components的URL，並且它只包含此值路由：在index.html文件中使用JS變量

這裏大部分的URL都喜歡Bower_components服務等

但我的靜態網址要使用基於commonURLs.js文件的內容動態URL之一：

(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文件中使用一個變量。我怎樣才能做到這一點。

來源

2017-07-31 undefined

上述許多作品的解決方案，但我解決了這使用最簡單的方法（我相信）：

在我的角度應用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>

請評論/回答如果你有更簡單的解決方案..我會很樂意接受你的答案。

來源

2017-08-29 11:13:34 undefined

-1

您需要一個控制器。注入$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>

來源

2017-07-31 07:11:19

雖然我沒有在這裏downvoted，我認爲這個解決方案可能不是一個可取的解決方案..我希望在app.js文件中有一些配置或一些更好的方法 – undefined

據你所知，角只工作：在應用範圍和 HTML解析後。所以在加載angular.js之前，你的指令將不起作用。

這意味着你不能直接達到你想要的。你真的可以做什麼。我看到兩個選項。

選項＃1。

打動你的URL工廠外面對象全局對象： window.myApplication = {網址：{}}
添加一些純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，一飲而盡，E.T.C）

定義腳本
```
 script src="{root}\js\bundle.js">
```
窗口對象定義全局變量的URL。 window.myApp = {root：'{root}'}
將此全局變量包裝爲角度變量以避免依賴於窗口對象。
將此變量用於您的工廠，作爲所有網址的前綴。 5.在您的構建過程中，每次爲其他環境構建應用程序時，請使用適當的URL替換此變量。

通過這種方式，所有的建築工作人員將被轉移到適當的代理（構建過程），並使您的代碼更清潔。但這會增加您的建築過程的複雜性和時間。

抱歉忘記。在第一種情況下，您仍然需要以某種方式連接構建器和您的html，因爲html不知道（應該什麼也不知道）您的環境。所以無論如何你需要修改你的構建過程。

來源

2017-07-31 07:22:12 Vitalii

在模塊中定義常量然後在您的控制器中注入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); 
        }

來源

2017-07-31 07:37:02

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

回答

相關問題