Reputation: 4559
I am attempting to use require with angular
I currently get the error
Failed to instantiate module
The exception url begins
http://errors.angularjs.org/undefined/$injector/modulerr?
When I look at my source using chrome dev tools and i expand my scripts folder the only file present at time of the error is app/main.js. None of the content from folders: controllers, modules, or routes are present. This would lead me to believe that this is a case of premature injection (not a real term).
I have tried to ways to slow down the injection until the correct time, none have had an effect.
first try
require(['jquery', 'angular', 'app/modules/app'], function ($, angular, app) {
$(function () { // using jQuery because it will run this even if DOM load already happened
angular.bootstrap(document, ['app']);
});
});
second attempt
require(['angular', 'app/modules/app'], function (angular, app) {
var $html = angular.element(document.getElementsByTagName('html')[0]);
angular.element().ready(function () {
$html.addClass('ng-app');
angular.bootstrap($html, [app.name]);
});
});
third try
require(['angular', 'app/modules/app'], function (angular, app) {
require(['Scripts/app/modules/app.js', 'Scripts/app/controller/controllers.js'], function (app) {
angular.bootstrap(document.body, [app]);
})
});
UDPATE
main.js
require.config({
baseUrl: '/Scripts/',
urlArgs: "bust=" + (new Date()).getTime(),
paths: {
'jquery': 'lib/require-jquery',
'angular': 'lib/angular/angular.min',
'angular-resource': 'lib/angular/angular-resource.min',
},
shim: {
'angular': { 'exports': 'angular' },
'angular-resource': { deps: ['angular'] },
'jQuery': { 'exports': 'jQuery' },
}
});
require(['jquery', 'angular', 'app/modules/app'], function ($, angular, app) {
//the above methods go here
});
Update 2
app.js
define([
'angular',
'app/controllers/controller',
'lib/angular/angular-route'
], function (angular, controllers) {
'use strict';
var app = angular.module('app', [
'app.controllers'
]);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'Templates/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'Templates/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
return app;
});
main.js
require.config({
baseUrl: '/Scripts/',
urlArgs: "bust=" + (new Date()).getTime(),
paths: {
'jquery': 'lib/require-jquery',
'angular': 'lib/angular/angular.min',
'angular-resource': 'lib/angular/angular-resource.min'
},
shim: {
'angular': { 'exports': 'angular' },
'angular-resource': { deps: ['angular'] },
'jQuery': { 'exports': 'jQuery' },
'app/modules/app': 'angular'
},
dep: ['app']
});
require(['jquery', 'angular', 'app/modules/app'], function ($, angular, app) {
angular.element(document).ready(function () {
angular.bootstrap(document, ['app']);
});
});
Upvotes: 2
Views: 6636
Reputation: 3952
Base on your Update 2, the main.js
and app.js
should be:
main.js
require.config({
baseUrl: '/Scripts/',
urlArgs: "bust=" + (new Date()).getTime(),
paths: {
'app': 'app/modules/app',
'jquery': 'lib/require-jquery',
'angular': 'lib/angular/angular.min',
'angular-resource': 'lib/angular/angular-resource.min'
},
shim: {
'app': ['angular','angular-resource'],
'angular-resource': ['angular']
},
dep: ['app']
});
app.js
define(['app/controllers/controller'], function (controllers) {
'use strict';
var app = angular.module('app', [
'app.controllers'
]);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'Templates/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'Templates/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
angular.element(document).ready(function () {
angular.bootstrap(document, ['app']);
});
return app;
});
As I cannot see all your code, I created a simple plunker to illustrate what should be done:
http://plnkr.co/edit/Mk2qHB8zUB28PDViNjv4?p=preview
Give angularAMD a try. It should make your life a lot easier.
Upvotes: 2