угловой js порядок исполнения

Question

Я новичок в угловой, я пытаюсь определить модуль внутри одного из js-файлов, и я почувствовал, что угловой обрабатывает мой дом сразу, где var app = angular.module("myApp", []); будет определен на более позднем этапе внутри Shell или один из его модулей.

Я пробовал с обычным тегом скрипта, но имел ошибки, и я предположил, что если я введу это позже, когда мой дом будет готов, а затем я создам модули внутри Shell. пожалуйста, руководство.

Javascript

document.addEventListener("DOMContentLoaded", function(event) { 
    inject(); 
    new Shell(); 
}); 

function inject() { 
    var ng = document.createElement('script'); 
    ng.src = "js/api/angular.js"; 
    var scripts = document.getElementsByTagName('script')[0]; 
    scripts.parentNode.insertBefore(ng, scripts); 
} 

внутри Shell

var app = angular.module("myApp", []); 
     app.controller("MyController", function($scope) { 
      $scope.author = { 
       "name": "My name", 
       "title": "Developer", 
       "company": "my company" 
      } 
     }); 

мой HTML является

<div id="result" ng-app="myApp"> 
     <div ng-controller="MyController"> 
      <h1>{{author.name}}</h1> 
      <p>{{author.title + ", " + author.company}}</p> 
     </div> 
    </div> 

Как мне решить эту проблему, что угловой ждет немного прежде, чем это позволяет мне определить мои модули.

Answer 1

Проблема заключается в том, что угловой также слушает DOMContentLoaded, и после его запуска он ищет модуль под названием myApp, потому что вы указали его в директиве ng-app="myApp". Если вы хотите изменить это поведение, вы должны сделать bootstrap. В вашем случае вам необходимо удалить из вашего div и добавить angular.bootstrap(..., ['myApp']); в ваш конструктор Shell() после того, как вы определили модуль и определили все службы, директивы, контроллеры и другие связанные с ним модули, поскольку после того, как модуль загружен, вы не сможете это сделать дольше.

HTML

<div id="result" ng-cloak> 
    ... 
</div> 

Shell

var app = angular.module("myApp", []); 
    app.controller("MyController", function($scope) { 
     ... 
    }); 

// <= Define here all module related stuff 

angular.bootstrap(document.getElementById('result'), ['myApp']);