Use JS variable inside index.html file

Question

I am using angular routing to create my single page web application in angularjs. So my index.html file is just full of URL of bower_components and it contains only this value for routing:

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

Most of the URLs here are the static URLs like Bower_components services etc.

But I want to use one of the dynamic URL based on the content of the commonURLs.js file:

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

So in index.html I want to use somewhere like this:

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

I hope my question is clear. Just to summarize again, I basically want to use a variable in my index.html file. How can I achieve that.

Drag13 · Accepted Answer · 2017-07-31 07:22:12Z

As far as you know, angular is working only: in scope of the application and after html parsing. So before angular.js is loaded your directives will not work.

This mean that you can't achieve what you want directly. What can you really do. I see two options.

Option #1.

Move you urls object outside of the factory to the global object: window.myApplication = {urls: {}}
Add some pure javascript which will add script to your index html.
Use this global object with your factory.

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

In this way you can dynamically load scripts (regarding the environment) and it will be synchronized with your routing.

Option #2

Move all to your builder (webpack, gulp, e.t.c)

Define script as
```
 script src="{root}\js\bundle.js"> 
```
Define global variable url in the window object. window.myApp = {root:'{root}'}
Wrap this global variable into angular variable to avoid dependency to the window object.
Use this variable into your factory as prefix to all your url. 5.In your building process replace this variable with proper url each time your build your app for another environment.

In this way all building staff will be moved to the proper agent (build process) and make your code a bit cleaner. But this will increase a bit complexity and time for your building process.

Sorry forget. At first case you still need somehow connect builder and your html because html does not know (and should know nothing) about your environment. So in any case you need to modify your build process.

Code Spy · Accepted Answer · 2017-07-31 07:43:25Z

In Modules define constants then In Your Controller Inject 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");


            ...
            ...

In Index file

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

EDIT: To append script in HEAD section we can modify function as below:

                .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);
                    }

undefined · Accepted Answer · 2017-08-29 11:13:34Z

1

Many of the solution above works but I solved this using simplest approach (what I believe):

In app.js file of my angular application, I set this value as rootscope something similar to this:

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

Now this value I can easily access inside my index.html file without doing anything else.

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

Please comment/ answer if you have much easier solution.. I will be happy to accept your answer.

answered Aug 29, 2017 at 11:13

undefined

3,64214 gold badges57 silver badges95 bronze badges

Collectives™ on Stack Overflow

Use JS variable inside index.html file

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related