I am trying to pick AngularJS back up. I created a site with a previous version of AngularJS and RequireJS and never had this issue, I have searched and searched and still cannot get this to work so I am reaching out. I am trying to use RequireJS 2.1.15 and AngularJS 1.3.11. When trying to load up my main page I am getting the following:
Uncaught Error: [$injector:modulerr] Failed to instantiate module rehyveApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.11/$injector/nomod?p0=ngRoute
at http://127.0.0.1:64216/js/lib/angular.js:63:12
at http://127.0.0.1:64216/js/lib/angular.js:1764:17
at ensure (http://127.0.0.1:64216/js/lib/angular.js:1688:38)
at module (http://127.0.0.1:64216/js/lib/angular.js:1762:14)
at http://127.0.0.1:64216/js/lib/angular.js:4094:22
at forEach (http://127.0.0.1:64216/js/lib/angular.js:323:20)
at loadModules (http://127.0.0.1:64216/js/lib/angular.js:4078:5)
at http://127.0.0.1:64216/js/lib/angular.js:4095:40
at forEach (http://127.0.0.1:64216/js/lib/angular.js:323:20)
at loadModules (http://127.0.0.1:64216/js/lib/angular.js:4078:5)
http://errors.angularjs.org/1.3.11/$injector/modulerr?p0=ngRoute&p1=Error%3…dules%20(http%3A%2F%2F127.0.0.1%3A64216%2Fjs%2Flib%2Fangular.js%3A4078%3A5)
at http://127.0.0.1:64216/js/lib/angular.js:63:12
at http://127.0.0.1:64216/js/lib/angular.js:4117:15
at forEach (http://127.0.0.1:64216/js/lib/angular.js:323:20)
at loadModules (http://127.0.0.1:64216/js/lib/angular.js:4078:5)
at http://127.0.0.1:64216/js/lib/angular.js:4095:40
at forEach (http://127.0.0.1:64216/js/lib/angular.js:323:20)
at loadModules (http://127.0.0.1:64216/js/lib/angular.js:4078:5)
at createInjector (http://127.0.0.1:64216/js/lib/angular.js:4004:11)
at doBootstrap (http://127.0.0.1:64216/js/lib/angular.js:1446:20)
at Object.bootstrap (http://127.0.0.1:64216/js/lib/angular.js:1467:12)
http://errors.angularjs.org/1.3.11/$injector/modulerr?p0=rehyveApp&p1=Error…trap%20(http%3A%2F%2F127.0.0.1%3A64216%2Fjs%2Flib%2Fangular.js%3A1467%3A12)
Here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
</head>
<body>
<div class="container">
Load Main View
</div>
<div class="container">
<ng-view></ng-view>
</div>
<script src="js/require.js" data-main="js/main.js"></script>
</body>
</html>
Here is my main.js:
require.config({
paths: {
base: "/js",
lib: "/js/lib"
},
shim: {
'lib/bootstrap': {
deps: ['lib/jquery']
},
'lib/angular': {
deps: ['lib/jquery']
},
'lib/angular-route': {
deps: ['lib/angular']
},
'lib/angular-resource': {
deps: ['lib/angular']
},
'lib/ui-bootstrap': {
deps: ['lib/angular']
},
'base/app': {
deps: ['lib/angular', 'lib/angular-route']
},
'base/controllers/mainController': {
deps: ['base/app']
}
}
});
define(['lib/jquery', 'lib/angular', 'lib/angular-route', 'lib/angular-resource', 'lib/ui-bootstrap', 'base/app', 'base/controllers/mainController'], function () {
angular.element(document).ready(function() {
angular.module('rehyveApp', ['ngRoute']);
angular.bootstrap(document, ['rehyveApp']);
});
});
Here is my app.js:
'use strict';
define(['lib/angular'], function () {
var rehyveApp = angular.module('rehyveApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when('/main',
{
templateUrl: 'templates/main.html',
controller: 'mainController'
});
$routeProvider.otherwise({redirectTo: 'main'});
});
return rehyveApp;
});
and my mainController.js:
'use strict';
define(['base/app'], function (rehyveApp) {
var rehyveApp = angular.module('rehyveApp',[]);
rehyveApp.controller('mainController', ['$scope', function ($scope) {
$scope.testdata = {
name: 'mainController working'
}
}]);
});
Any help would be greatly appreciated. Thank you in advance.
So it turns out that it was an issue with the 1.3.11 version of the angular-route.js lib, they just released a 1.3.12 and after copying that in, everything is working now. Thank you all for looking into this.
You forgot 'lib/angular-route' in your define at app.js. See that you are using ngRoute but not importing it.
define(['lib/angular','lib/angular-route'], function () {
Related
index.html
<body>
<div ng-app="myapp">
<div ng-controller="HelloController" >
<h2>Welcome {{hello.title}} to the world Mr. {{hello.myname}}!</h2>
</div>
</div>
<script src="cordova.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="js/index.js"></script>
</body>
index.js
document.addEventListener('deviceready', function() {
var myapp = angular.module("myapp", []);
myapp.controller("HelloController", function($scope) {
console.log("inside controller");
$scope.hello = {};
$scope.hello.title = "AngularJS";
$scope.hello.myname = "hello";
});
}, false);
Error displayed in logcat
02-11 14:52:19.835: I/chromium(2955): [INFO:CONSOLE(40)] "Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=myapp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.0%2F%24injector%2Fnomod%3Fp0%3Dmyapp%0A%20%20%20%20at%20Error%20(native)%0A%20%20%20%20at%20file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.min.js%3A6%3A416%0A%20%20%20%20at%20file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.min.js%3A25%3A136%0A%20%20%20%20at%20b%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.min.js%3A24%3A188)%0A%20%20%20%20at%20file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.min.js%3A24%3A431%0A%20%20%20%20at%20file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.min.js%3A39%3A357%0A%20%20%20%20at%20n%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.min.js%3A7%3A355)%0A%20%20%20%20at%20g%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.min.js%3A39%3A135)%0A%20%20%20%20at%20fb%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.min.js%3A43%3A164)%0A%20%20%20%20at%20Ac.c%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.min.js%3A20%3A449)", source: file:///android_asset/www/bower_components/angular/angular.min.js (40)
Detailed error displayed in catlog
02-11 15:35:37.334: E/Web Console(24865): Uncaught Error: [$injector:nomod] Module 'myapp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
What I am missing, The same code code works in a browser
I would recommend you to use RequireJS technique
It requires multiple files as below
index.html
<body>
<div id="controller" ng-app="app" ng-controller="HelloController" style="display:none">
<h2>Welcome {{hello.title}} to the world Mr. {{hello.myname}}!</h2>
</div>
<script src="cordova.js"></script>
<script src="bower_components/requirejs/require.js" data-main="js/main.js"></script>
</body>
main.js
require.config({
paths: {
'domReady': '../bower_components/domReady/domReady',
'angular': '../bower_components/angular/angular'
},
shim: {
'angular': {
exports: 'angular'
}
},
deps: ['./bootstrap']
});
bootstrap.js
define(['require','angular','app'], function (require, ng) {
require(['domReady!'], function (document) {
ng.bootstrap(document, ['app']);
});
});
app.js
define(['angular'], function (ng) {
var mod = ng.module('app', []);
mod.controller("HelloController", function($scope) {
$scope.hello = {
title: "angularjs",
myname: "hello"
}
document.getElementById("controller").style.display = "block";
});
return mod;
});
The reason we are using shim in the require.config is that the angularJS does not support AMD so we expose it as an object via RequireJS
I used document.getElementById("controller").style.display = "block"; to avoid the template html to appear without the values rendered
could you please tell me how to bind click event using require js + angularjs
I try to bind the click event but it is bind the click event
Here is my code
index.html
<!DOCTYPE html>
<html>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<head>
<link type="text/css" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" rel="stylesheet" />
</head>
<body>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
<script data-main="main" src="lib/require.js"></script>
</body>
</html>
main.js
requirejs.config({
paths: {
ionic:'lib/ionic.bundle'
},
shim: {
ionic : {exports : 'ionic'}
}, priority: [
'ionic'
],
deps: [
'bootstrap'
]
});
bootstrap.js
/*global define, require, console, cordova, navigator */
define(['ionic', 'app', 'routes'], function (ionic, angular, app) {
'use strict';
var $html,
onDeviceReady = function () {
angular.bootstrap(document, [app.name]);
};
document.addEventListener("deviceready", onDeviceReady, false);
if (typeof cordova === 'undefined') {
$html = angular.element(document.getElementsByTagName('html')[0]);
angular.element().ready(function () {
try {
angular.bootstrap(document, [app.name]);
} catch (e) {
console.error(e.stack || e.message || e);
}
});
}
});
app.js
/*global define, require */
define(['ionic'],
function (angular) {
'use strict';
var app = angular.module('app', [
'ionic']);
return app;
});
You have a few bugs in your code... too many too list them all. See Plunker for the corrections.
The module ionic should be exported as angular.
requirejs.config({
paths: {
ionic:'lib/ionic.bundle'
},
shim: {
ionic : {exports : 'angular'}
}, priority: [
'ionic'
],
deps: [
'bootstrap'
]
});
Ionic/Angular must be loaded first - or angular can't initialize itself.
In the routes you have to reference the controller by name - not by location
/*global define, require */
define(['app'], function (app) {
'use strict';
app.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: "/login",
templateUrl: "login.html",
controller: 'controllers/LoginCtrl' // <-- should be 'LoginCtrl'
})
$urlRouterProvider.otherwise("/login");
}]);
});
I'm trying to load an authService into my application using AngularJS + RequireJS. The app, requires authService to load, and authService requires app to load. But I can't seem to get the load to work properly.
I've tried setting a main controller for the application that will use the authProvider, but if I do that I get the following error:
Error: [$injector:unpr] Unknown provider: authServiceProvider <- authService
If I try to inject the authService into the app, I get this error:
Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module authService due to:
[$injector:nomod] Module 'authService' is not available! You either misspelled the module name or forgot to load it.
Both errors make sense to me, and I know why they happen. I just don't know if there's a way around it beyond including authService into app.js (which I would like to avoid)
Example code is below.
app.js
define(function (require) {
var angular = require('angular');
var ngRoute = require('angular-route');
var authService = require('authService');
var app = angular.module('app', ['ngRoute']);
app.init = function () {
console.log('init');
angular.bootstrap(document, ['app']);
};
app.config(['$routeProvider', function ($routeProvider) {
console.log('config');
}]);
app.run(function () {
console.log('run');
});
var appCtrl = app.controller('appCtrl', function (authService) {
});
return app;
})
authentication.js
require(['app'], function (app) {
return app.factory('authService', ['$http', function ($http) {
return {
test: function () {
return this;
}
}
}]);
});
config.js
require.config({
baseUrl:'app',
paths: {
'angular': '../bower_components/angular/angular',
'angular-route': '../bower_components/angular-route/angular-route',
'angularAMD': '../bower_components/angularAMD/angularAMD',
'ngDialog': '../bower_components/ngDialog/js/ngDialog',
'ngCookies': '../bower_components/angular-cookies/angular-cookies',
'authService': 'services/authentication'
},
shim: {
'angular': {
'exports': 'angular'
},
'angular-route': ['angular'],
'angularAMD': ['angular'],
'ngCookies': ['angular']
},
priority: [
'angular'
],
deps: [
'app'
]
});
require(['app'], function (app) {
app.init();
});
index.html
<!DOCTYPE html>
<html lang="en" ng-controller="appCtrl">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-view></div>
<script src="bower_components/requirejs/require.js" data-main="app/config.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
</body>
</html>
You described a circular reference per "The app, requires authService to load, and authService requires app to load" and there is simply no solution for it.
However, looking at the sample code you provided, your true dependency is:
authService needs to be created and made available for app
appCtrl created in app requires authService
Assuming that's your only dependency, you can use angularAMD to create authService:
require(['angularAMD'], function (angularAMD) {
angularAMD.factory('authService', ['$http', function ($http) {
return {
test: function () {
return this;
}
}
}]);
});
And make sure to use angularAMD to bootstrap app:
define(['angularAMD', 'angular-route', 'authentication'], function (require) {
var app = angular.module('app', ['ngRoute']);
...
return return angularAMD.bootstrap(app);
}]);
Take a look at Loading Application Wide Module for more details.
I am trying to load a new module "testlazy" into the app when defining the states in the app.config using oclazyload and ui-router
Will i need require.js hooked up to load the new module with the existing app? I thought oclazyload will actually reference the new module added into the app. Please correct me if i am on the wrong path
Here is my new module which is placed under
/js/testlazy
module.js
testlazyController.js
i have a module.js file and testlazyController.js.
in my index.html
<head>
<script type="text/javascript" src="../../dist/ocLazyLoad.js"> </script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body class="container">
<h1 class="page-header">$ocLazyLoad</h1>
<div ui-view="lazyLoadView"></div>
</body>
My app.js
var aModule = angular.module('dApp', ['ui.router','oc.lazyLoad']);
aModule.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', '$httpProvider', '$ocLazyLoadProvider', function ($locationProvider, $stateProvider, $urlRouterProvider, $httpProvider, $ocLazyLoadProvider) {
$stateProvider
.state('testlazyload', {
parent: 'authenticated',
url: '^/testlazyload',
templateUrl: 'html/templates/header.html',
controller: "testlazyController",
resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
// you can lazy load files for an existing module
return $ocLazyLoad.load('js/testlazy/testlazyController.js');
}]
}
});
$urlRouterProvider.otherwise('/login');
}]);
My testlazyController.js
angular.module('testlazy').controller('testlazyController', ['$scope', '$q', 'ModalService', '$state', '$filter', '$ocLazyLoad',
function ($scope, $q, ModalService, $state, $filter, $ocLazyLoad) {
console.log("lazyloading complete");
}]);
My module.js
angular.module('testlazy', []);
I keep getting Error: $injector:nomod Module Unavailable error in my console.
Once i refrence the js files in my index.html using script tags it works but then i am no longer using teh lazy loading correct?
I am not quety familiar with ocLazyload
and am not sure if this actually will help but try to use this:
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
// you can lazy load files for an existing module
return $ocLazyLoad.load({ name:'testlazy', files: 'js/testlazy/testlazyController.js'});
}]
or you must configure $ocLazyLoadProvider
$ocLazyLoadProvider.config({
modules: [{
name: 'testlazy',
files: ['js/testlazy/testlazyController.js']
}]
});
After configuration you should be able to load the module like this:
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
// you can lazy load files for an existing module
return $ocLazyLoad.load('testlazy');
}]
I had my angularjs app setup in local and everything was working fine till I upload my code to the staging server. I now have issue with dependencies that are not respected but I can't see why. I guess it was working in local because it was loading the library faster. I now modified my app to try to fix this issue but can't manage to make it work.
My application is loading a single page app, composed of 3 views (main, map and map-data). I'm using AngularJS modules structure to launch this app. Here is my directory structure:
The index.html is pretty basic:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0" />
<title>Map Application</title>
<link rel="icon" sizes="16x16" href="/favicon.ico" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{ map_key }}&sensor=false"></script>
<script type="text/javascript" src="/js/bower_components/requirejs/require.js"></script>
<link rel="stylesheet" href="/css/main.css" media="screen" type="text/css">
<link rel="stylesheet" href="/js/bower_components/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<!-- Content -->
<div id="content" data-ui-view></div>
<script>
// obtain requirejs config
require(['require', 'js/require-config'], function (require, config) {
// set cache beater
config.urlArgs = 'bust=v{{ version }}';
// update global require config
window.require.config(config);
// load app
require(['main']);
});
</script>
</body>
</html>
Then requirejs-config.js:
if (typeof define !== 'function') {
// to be able to require file from node
var define = require('amdefine')(module);
}
define({
baseUrl: 'js', // Relative to index
paths: {
'jquery': 'bower_components/jquery/dist/jquery.min',
'underscore': 'bower_components/underscore/underscore-min',
'domReady': 'bower_components/requirejs-domready/domReady',
'propertyParser': 'bower_components/requirejs-plugins/src/propertyParser',
'async': 'bower_components/requirejs-plugins/src/async',
'goog': 'bower_components/requirejs-plugins/src/goog',
'angular': 'bower_components/angular/angular',
'ngResource': 'bower_components/angular-resource/angular-resource',
'ui.router': 'bower_components/angular-ui-router/release/angular-ui-router',
'angular-google-maps': 'bower_components/angular-google-maps/dist/angular-google-maps',
'moment': 'bower_components/momentjs/moment',
'moment-timezone': 'bower_components/moment-timezone/moment-timezone',
'moment-duration-format': 'bower_components/moment-duration-format/lib/moment-duration-format'
},
shim: {
'angular': {
exports: 'angular'
},
'ngResource': ['angular'],
'ui.router' : ['angular']
}
});
Then the main.js:
/**
* bootstraps angular onto the window.document node
* NOTE: the ng-app attribute should not be on the index.html when using ng.bootstrap
*/
define([
'require',
'angular',
'./app'
], function (require, angular) {
'use strict';
/**
* place operations that need to initialize prior to app start here
* using the `run` function on the top-level module
*/
require(['domReady!'], function (document) {
angular.bootstrap(document, ['app']);
});
});
Then the app.js:
/**
* loads sub modules and wraps them up into the main module
* this should be used for top-level module definitions only
*/
define([
'angular',
'ui.router',
'./config',
'./modules/map/index'
], function (ng) {
'use strict';
return ng.module('app', [
'app.constants',
'app.map',
'ui.router'
]).config(['$urlRouterProvider', function ($urlRouterProvider) {
$urlRouterProvider.otherwise('/');
}]);
});
Here you can see that the app.js depends on the ./modules/map/index, where I'm loading all available controllers:
/**
* Loader, contains list of Controllers module components
*/
define([
'./controllers/mainCtrl',
'./controllers/mapCtrl',
'./controllers/mapDataCtrl'
], function(){});
Each controller are requesting the same kind of module, here is mapDataCtrl.js which is the one that is triggered by /:
/**
* Map Data controller definition
*
* #scope Controllers
*/
define(['./../module', 'moment'], function (controllers, moment) {
'use strict';
controllers.controller('MapDataController', ['$scope', 'MapService', function ($scope, MapService)
{
var now = moment();
$scope.data = {};
$scope.data.last_update = now.valueOf();
$scope.data.time_range = '<time range>';
$scope.data.times = [];
var point = $scope.$parent.map.center;
MapService.getStatsFromPosition(point.latitude, point.longitude).then(function(data){
$scope.data.times = data;
});
}]);
});
As you can see, the controller is requesting module.js where the states and module name are defined:
/**
* Attach controllers to this module
* if you get 'unknown {x}Provider' errors from angular, be sure they are
* properly referenced in one of the module dependencies in the array.
* below, you can see we bring in our services and constants modules
* which avails each controller of, for example, the `config` constants object.
**/
define([
'angular',
'ui.router',
'../../config',
'underscore',
'angular-google-maps',
'./services/MapService'
], function (ng) {
'use strict';
return ng.module('app.map', [
'app.constants',
'ui.router',
'angular-google-maps'
]).config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {
$stateProvider
.state('main', {
templateUrl: '/js/modules/map/views/main.html',
controller: 'MainController'
})
.state('main.map', {
templateUrl: '/js/modules/map/views/main.map.html',
controller: 'MapController',
resolve: {
presets: ['MapService', function(MapService){
return MapService.getPresets();
}],
courses: ['MapService', function(MapService){
return MapService.getCourses()
}]
}
})
.state('main.map.data', {
url: '/',
templateUrl: '/js/modules/map/views/main.map.data.html',
controller: 'MapDataController'
})
;
//$locationProvider.html5Mode(true);
}]);
});
It's in this file that I have an issue. I'm trying to load the module angular-google-maps because I need it in my MapCtr controller and most probably in MapDataCtrl. But I get the following message:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.map due to:
Error: [$injector:modulerr] Failed to instantiate module angular-google-maps due to:
Error: [$inj...<omitted>...1)
I have no idea what I am missing, for me everything looks tied correctly. What am I missing?
UPDATE 1
I think it's because angular-google-map is not AMD compliant, so I've modified my requirejs-config.js as follow:
if (typeof define !== 'function') {
// to be able to require file from node
var define = require('amdefine')(module);
}
define({
baseUrl: 'js', // Relative to index
paths: {
...
'underscore': 'bower_components/underscore/underscore-min',
'angular-google-maps': 'bower_components/angular-google-maps/dist/angular-google-maps',
...
},
shim: {
'angular': {
exports: 'angular'
},
'ngResource': ['angular'],
'ui.router' : ['angular'],
'angular-google-maps': {
deps: ["underscore"],
exports: 'angular-google-maps'
}
}
});
but I still have the same issue.
We can use an js library with require.js.There is no need to remove require.js. I still need to check why require.js config not working.
Meanwhile you can try this way.
// requirejs-config.js
define({
baseUrl: 'js', // Relative to index
paths: {
'jquery': 'bower_components/jquery/dist/jquery.min',
'underscore': 'bower_components/underscore/underscore-min',
'domReady': 'bower_components/requirejs-domready/domReady',
'propertyParser': 'bower_components/requirejs-plugins/src/propertyParser',
'async': 'bower_components/requirejs-plugins/src/async',
'goog': 'bower_components/requirejs-plugins/src/goog',
'angular': 'bower_components/angular/angular',
'ngResource': 'bower_components/angular-resource/angular-resource',
'ui.router': 'bower_components/angular-ui-router/release/angular-ui-router',
'angular-google-maps': 'bower_components/angular-google-maps/dist/angular-google-maps',
'moment': 'bower_components/momentjs/moment',
'moment-timezone': 'bower_components/moment-timezone/moment-timezone'
},
shim: {
'angular': {
exports: 'angular'
},
'ngResource': ['angular'],
'ui.router' : ['angular']
}
});
// google-map.js
define(['underscore', 'angular-google-maps'], function(){
});
And then requiring the module each time I need the map:
require(['google-map'], function(){
});
https://github.com/angular-ui/angular-google-maps/issues/390