Проблемы с контроллером загрузки angular.js

Question

Я пытаюсь ввести мои контроллеры в AngularJS с помощью разрешения ui.router, но у меня проблемы с загрузкой шаблона. Мой 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); 
     }; 
    } 

}); 

Когда пользователь нажимает на определенную ссылку для государства, я впрыснуть файл js для него в браузере. Эта часть отлично работает. Но templateUrl определяет шаблон, который будет использоваться и который всегда загружается первым. Поскольку он определяет ng-controller, то происходит то, что контроллер загружается, но поскольку его еще не на странице, я получаю сообщение об ошибке в консоли, что контроллер не может быть найден. Как я могу это достичь?

Я создал упрощенную версию моего кода здесь:

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

Есть ли способ добиться того, что я здесь делаю?

EDIT

Я ранее имел обещания на моем дописывания кода, который я показываю ниже:

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

Когда я делаю это, ничего не происходит. Он не загружает шаблон. Он также не показывает операторы console.log, которые я вводил в контроллеры.

Answer 1

Поскольку регистрация его с .controller не работает, и я могу подтвердить, что сценарий загружается должным образом и выполняется, я попытался вместо этого ввести службу $controllerProvider и зарегистрировать контроллер там, и он работает.

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

}); 

Я должен был также обновить view1.js и view2.js следующим образом:

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