Я хочу обусловить (с помощью асинхронного http-запроса) создание модуля AngularJS.
Вот HTML:
<html>
<head>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<script type="text/javascript" src="./app.js"></script>
</head>
<body ng-app="myApp">
<nav>
<a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>
</nav>
<div ui-view></div>
</body>
</html>
Содержимое "app.js":
$http = angular.injector(["ng"]).get("$http");
$http.get('http://demo0719583.mockable.io/weather')
.then(function(response){
var myApp = angular.module("myApp",[ "ui.router", "AppCtrls"]);
myApp.config(function ($stateProvider, $urlRouterProvider){
$stateProvider.state("state1", {
url: "/qsd",
template: "<p>State 1</p>",
controller: "Ctrl1"
}).state("state2", {
url: "/aze",
template: "<p>State 2</p>",
controller: "Ctrl2"
});
});
var ctrls = angular.module("AppCtrls", []);
ctrls.controller( "Ctrl1", function($scope) {
console.log("Ctrl1 loaded.");
});
ctrls.controller( "Ctrl2", function($scope) {
console.log("Ctrl2 loaded.");
});
}, function(errorResponse){
alert('duh !');
});
Я использую $http за пределами angular, чтобы я мог запускать асинхронные HTTP-запросы.
Запрос работает, но я получаю следующую ошибку:
angular.js:36 Uncaught Error: [$injector:modulerr]
Я предполагаю, что объявленный ng-app ожидает модуля, но из-за асинхронизма создание модуля задерживается.
Вопрос: как я могу создать свой модуль программно и избежать этой ошибки?
Привет.