My challenge in AngularJS is related to injecting controllers using the ui.router resolve. The issue I'm facing is that the template loads before the controller, causing an error when trying to access the controller. Here's a snippet of my app.js:
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);
};
}
});
Although I successfully inject the JavaScript file when a user clicks on a link, the template defined in templateUrl always loads first. As a result, the controller is not yet available, leading to console errors. How can I resolve this issue?
For a simplified version of my code, you can check out:
http://plnkr.co/edit/X9uFOMIJq5tCn7VezSzT?p=preview
I'm looking for a solution to make sure the controller is loaded before the template and prevent any console errors.
EDIT
In my earlier approach, I used promises in the append code as shown 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;
};
}
However, with this method, nothing happens - the template doesn't load and no console.log messages from the controllers are displayed.