Access angular constant i script tag

Question

I have this json-file, url.json:

{
  "security": 
    {
      "url": "https://url.to.securitypage/here"
    }     
}

I need to access the url in a script tag in my HTML page:

<script type="text/javascript">
        //Sends user to security page
        document.write('<link type="text/css" href="https://url.to.securitypage/here" rel="stylesheet"/>');
</script>

In module I save the URL in a constant:

var myApp = angular.module('myApp', []);

getUrl().then(bootstrapApplication());

function getUrl() {
    var initInjector = angular.injector(['ng']);
    var $http = initInjector.get('$http');
    return $http.get('./url.json')
        .then(function(response) {
            myApp.constant('URL', response.data);
        }, function(error) {
            console.error(error);
    })
}

function bootstrapApplication() {
    angular.element(document).ready(function() {
        angular.bootstrap(document, ['myApp']);
    });
}

What I want is something like:

<script type="text/javascript">
    //Sends user to security page
    document.write('<link type="text/css" href="URL.security.url" rel="stylesheet"/>');
</script>

How can I in an easy way accomplish this? Thank you for your help, this is new to me

wouldn't it be simpler to have the link call a function on your view controller and then just inject the constant to the controller? — SPArcheon, Jan 18 '18 at 15:39
You need two applications to achieve that. This is the thing you're basically doing with, and `angular.injector` is a hacky way to define one of the apps. — Estus Flask, Jan 18 '18 at 15:54
Possible duplicate of https://stackoverflow.com/questions/41658964/how-to-create-a-pluggable-application-in-angular — Estus Flask, Jan 18 '18 at 15:55
@estus could you explain more what you mean by two applications? — chichi, Jan 18 '18 at 15:56
@SPArchaeologist actually, do you have any suggestions of how I can have the link call a function in my controller? Script tag is outside $scope. — chichi, Jan 18 '18 at 15:57
You need to have one application that makes async request and then bootstraps another one. That's what you're roughly doing. You're creating injector instance with angular.injector . In AngularJS, application instance === injector instance. See the answer in linked question . You just need to add `document.write` to `then`. — Estus Flask, Jan 18 '18 at 16:02
What is the question? Does the code have a problem? If so what is it? — georgeawg, Jan 18 '18 at 16:48
Yes, the code has a problem: I can not access URL from my script tag in HTML file. — chichi, Jan 18 '18 at 17:54
seems there are hidden requirements/constrain that aren't clearly expressed in the question. Currently, I don't get 1) why you need a script tag to be used, 2) where will the link be displayed and what's it position in the page DOM — SPArcheon, Jan 22 '18 at 09:29

score 0 · Answer 1 · answered Jan 18 '18 at 16:57

Add the document.write to the success handler:

function getUrl() {
    var initInjector = angular.injector(['ng']);
    var $http = initInjector.get('$http');
    return $http.get('./url.json')
        .then(function(response) {
            myApp.constant('URL', response.data);
            var url = response.data;
            var link = `<link type="text/css" href=${url} rel="stylesheet"/>`
            document.write(link);
        }, function(error) {
            console.error(error);
    })
}

I really need to add URL in script tag in my HTML page – chichi Jan 18 '18 at 17:53 — chichi, Jan 18 '18 at 17:53

Access angular constant i script tag

1 Answers1