Issues loading controller angular.js

Question

I'm trying to inject my controllers in AngularJS using the ui.router resolve, but i'm having issues where the template is loading first. My app.js is defined below:

var app = angular.module('app', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('view1', {
            url: "/view1/",
            templateUrl: "view1/view1.html",
            resolve: {'': appendStaticFileToPage("view1/view1.js")}
        })

        .state('view2', {
            url: "/view2/",
            templateUrl: "view2/view2.html",
            resolve: {'': appendStaticFileToPage("view2/view2.js")}
        })

    ;

    function appendStaticFileToPage(file) {
        return function($q){
            var script = document.createElement('script');
            script.setAttribute('src', file);
            document.getElementsByTagName('head')[0].appendChild(script);
        };
    }

});

When the user clicks on a particular link for a state, I inject the js file for it into the browser. That part works fine. But the templateUrl defines the template to be used and that always loads first. Since it defines an ng-controller what happens is that the controller is being loaded, but since its not in the page yet, I get an error in the console that the controller couldn't be found. How can I achieve this?

I have created a simplified version of my code here:

http://plnkr.co/edit/X9uFOMIJq5tCn7VezSzT?p=preview

Is there a way to achieve what I am doing here?

EDIT

I previously had promises on my append code, which I'm showing below:

function appendStaticFileToPage(file) {
    return function($q){
        var deferred = $q.defer();

        var script = document.createElement('script');
        script.setAttribute('src', file);
        document.getElementsByTagName('head')[0].appendChild(script).ready(function(){
            deferred.resolve();
        });

        return deferred.promise;
    };
}

When I do this, nothing happens. It doesn't load the template. It also doesn't show the console.log statements I put in the controllers.

you forgot to return a promise that gets resolved when the controller has been loaded to your resolve function. — user400654
– user400654, Commented Jul 31, 2015 at 19:42
I tired to do that also. But then the template doesn't get loaded. Seems like nothing happens. I even put console statements in my controllers and they don't appear. — KVISH
– KVISH, Commented Jul 31, 2015 at 19:44
my guess would be either the script failed to load, or the way you're listening for it to load is incorrect. — user400654
– user400654, Commented Jul 31, 2015 at 19:45
Your edit is close, but, you're still not resolving the deferred, you just created it and then never used it. — user400654
– user400654, Commented Jul 31, 2015 at 19:48
The script is properly loading, and it's not being resolved until after the script is loaded, so the problem lies with how (or when) we're attaching the controller to the module. Delaying it longer has no effect which rules out any race conditions. — user400654
– user400654, Commented Jul 31, 2015 at 20:11

user400654 · Accepted Answer · 2015-07-31 21:07:13Z

1

Since registering it with .controller isn't working, and I can confirm that the script is loading properly and executing, I tried instead injecting the $controllerProvider service and registering the controller through there, and it works.

app.config(function($stateProvider, $urlRouterProvider, $controllerProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('view1', {
            url: "/view1/",
            templateUrl: "view1.html",
            resolve: {'': appendStaticFileToPage("view1.js", "MyViewOneController")}
        })

        .state('view2', {
            url: "/view2/",
            templateUrl: "view2.html",
            resolve: {'': appendStaticFileToPage("view2.js", "MyViewTwoController")}
        })

    ;

    function appendStaticFileToPage(file, controllerName) {
        return function($q){
            var deferred = $q.defer();

            var script = document.createElement('script');
            script.onload = function () {
                $controllerProvider.register(controllerName, window[controllerName])
                deferred.resolve();
            };
            script.onerror = function () {
                deferred.reject();
            };
            script.setAttribute('src', file);
            document.getElementsByTagName('head')[0].appendChild(script);

            return deferred.promise;
        };
    }

});

I had to also update view1.js and view2.js as follows:

'use strict';
window.MyViewOneController = function($scope) {
  console.log("Got to view 1");
};

answered Jul 31, 2015 at 21:07

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

KVISH Over a year ago

Is it possible to not do the script.onload an script.onerror here? I want to abstract the the script and document.getElementByTagName into a different method.

user400654 Over a year ago

Yes, you could instead have your script(viewn.js) call a method or trigger an event

Collectives™ on Stack Overflow

Issues loading controller angular.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related