Я настроил очень простую среду для загрузки компонентов AngularJS (которые управляются Bower) с помощью RequireJS. Мой index.html очень прост:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Resource Test</title>
</head>
<body>
<div ng-controller="MyCtrl">
<ul>
<!-- this template is not populated -->
<li ng-repeat="item in items">{{item}}</li>
</ul>
</div>
<script type="text/javascript" src="bower_components/requirejs/require.js" data-main="scripts/main"></script>
</body>
</html>
Мой RequireJS находится в main.js, что выглядит так:
requirejs.config({
baseUrl: 'bower_components',
paths: {
'angular': '../bower_components/angular/angular',
'angular-resource': '../bower_components/angular-resource/angular-resource'
},
shim: {
'angular': {
exports: 'angular'
},
'angular-resource': {
deps: ['angular'],
}
},
});
define("app", ["angular", "angular-resource"], function(angular) {
var app = angular.module('MyApp', ['ngResource']);
return app;
});
require(["app"], function(app) {
console.log(app); // this works
app.controller("MyCtrl", ['$scope', '$resource',
function($scope, $resource) {
console.log("hello"); // this doesn't work
$scope.items = [1, 3, 4, 5];
}
]);
});
Кажется, что все зависимости разрешены и загружены, и создается экземпляр приложения Angular. Однако я не могу зарегистрировать контроллер Angular. Оператор console.log() внутри функции обратного вызова не выполняется, поэтому кажется, что создание контроллера полностью завершилось неудачей?
/редактировать:
Добавление директивы ng-app к <body> приводит к этой ошибке:
Uncaught Error: [$injector:modulerr] Не удалось создать экземпляр модуля MyApp из-за: Ошибка: [$injector:nomod] Модуль MyApp недоступен! Вы либо неправильно написали имя модуля, либо забыли его загрузить. При регистрации модуля убедитесь, что вы указали зависимости в качестве второго аргумента.
Вы можете найти полный проект на GitHub, если это сделает его более понятным.
