marcoslin / angularamd Goto Github PK

I wonder if this lib can be with ui-router
https://github.com/angular-ui/ui-router

Is ngload capable of loading AMD module (define wrapped)? I am asking because there is just a one plain JS file (dataService.js) in examples (I want to have the module splitted across multiple files and state them as dependencies in module entry point).

by @smajl

i've found a way to add the navMenu directive before bootstrapping.
this is better because a single require is needed and not in every controller of the app
and i've only one directive HTML Tag in my templates.

before in controller files:

head of 'controller / home_ctrl.js'

define(['app', 'directive/navMenu','prettify'], function (app) {
    app.register.controller('HomeController'

head of 'views / home.html'

<div class="masthead" nav-menu></div>

<div class="jumbotron">
    <h1>{{title}}</h1>

head of 'directive/navMenu.js'

define(['app'], function (app) {
    'use strict';
    app.register.directive('navMenu', function () {

after only in bootstrap files:

bottom of app.js

    // add directives
    require(['directive/navMenu'], function(){
        // Bootstrap Angular when DOM is ready
        angularAMD.bootstrap(app);
    });

body of index.html

<div nav-menu></div>

<div class="view-container">
   <div ng-view class="view-frame"></div>
</div>

head of 'directive/navMenu.js'

define(['app'], function (app) {
    'use strict';
    app.directive('navMenu', function () {

no 'app.register' needed if the directive is global.

If this make sense then you can add this :)

greetz from germany!

Is it possible to use angularAMD with AngularUI Router? The routing in ui-router being done with $stateProvider and $urlRouterProvider (for default route).

The cause is linking angularAMD.min.js direct to raw.github.com.

Refused to execute script from 'http://raw.github.com/marcoslin/bower-angularAMD/v0.0.2/angularAMD.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

Is there a way to use ng-controllers on the main site outside of the ng-view?
Why: We want to display a dynamic navigation. Therefore we need a ng-controller on our index.html
Atm. we resolved this issue with ng-include on the subsites and put the ng-view on the body...

Create a new enable_ngload params defaulting to true on initialisation/bootstrapping of angularAMD to substitute the need to call angular.getAlternateAngular(). This is in response to the newly implemented ngload RequireJS plugin, that should make loading of regular angular.module a lot easier than before.

When i use several modules for my application and declare its before run angularAMD.bootstrap they doesn't support lazy injecting components (register property) .

Simple example:

define('app', [ 'angular', 'angularAMD', 'app.module' ], function(angular, angularAMD) {
  var app = angular.module('app', [ 'app.module' ]);

  angularAMD.bootstrap(app);

  return app;
});

define('app.module', [ 'angular' ], function() {
   var module = angular.module('app.module', [ ]);

   // .. Configurate route with using angularAMD.route({ controllerURL : 'ModuleController'  })

   return module;
});

define('ModuleController', [ 'app.module' ], function(module) {
   module.register.controller(...);
   // register is undefined
});

How can i mixin register to module without bootstraping it?

This looks like a promising way to separate modules and have it all assembled. Can this approach be used in an r.js build file?

Hello guys, I have a doubt about the use o 3rd party modules, actually no matter how I create the dependencies it doens't work...

I'am trying to use in my project the library Select2 using a directive created by the folks from Angular-UI, but no matter what dependencie I try to use, in the directive it doens't reconize Jquery, neither the select2 library.

All js files are loaded in the correct order, nonetheless it doens't work.

It doens't have either an example about that, has anyone tried to do something similar?

What kind of license is this project under? It's looking pretty great so far, but I won't be able to use it unless I know the license

hello i'm from colombia,
i have a problem

main.js:

baseUrl: 'js/app',

paths: {
    app: "app",
    jquery: "lib/jquery.min",
    angular: "lib/angular.min",
    "ui-router": "lib/angular-ui-router.min",
    angularAMD: "lib/angularAMD"
},
shim: {
    "ui-router": ['angular'],
    angularAMD: ['angular'],
    app: ['angularAMD', 'ui-router']
},
deps: ['app']

and this is app.js:

'use strict';

define(["ui-router", "angularAMD"],
function(angularAMD){
var odontoApp = angular.module('odontoApp', ['ui.router'].......
....angularAMD.bootstrap(odontoApp);
return odontoApp;

in console i see the next error:
TypeError: angularAMD is undefined

angularAMD.bootstrap(odontoApp);

Hey marcos,
at first very awesome work!

And now to my problem. I tried the last hours to get a simple e2e test with karma, but something went wrong.

As template for my test enviroment i used https://github.com/angular/angular-phonecat. The difference is that the phonecat app does'nt use angularAMD and requirejs.

Now to my files

app.js

'use strict';
define(['angularAMD', 'angular-route'], function (angularAMD) {
    var app = angular.module('cameoClientAngular', ['ngRoute']);
    app.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider){
        //$locationProvider.html5Mode(true);
        $routeProvider.
        when('/login', angularAMD.route({
            templateUrl: 'tpl/form/login.html',
            controller: 'LoginCtrl'
        })).
        otherwise({
            redirectTo: '/login'
        });
    }]);

    angularAMD.bootstrap(app);

    return app;
});

scenarios.js:

'use strict';
describe('Cameo Client Tests', function() {
    it('should redirect index.html to index.html#/login', function() {
        browser().navigateTo('app/index.html');
        expect(browser().location().url()).toBe('/login');
    });
});

If i run this simple test then i get this error/fail:

describe: Cameo Client Tests
472ms should redirect index.html to index.html#/login
411ms   browser navigate to 'app/index.html'
33ms    $location.url()
http://localhost:8000/test/e2e/scenarios.js:6:16

TypeError: Object [object Object] has no method 'injector'
    at Scope.<anonymous> (http://localhost:8000/app/js/vendor/angular/angular-scenario.js:31892:30)
    at null.<anonymous> (http://localhost:8000/app/js/vendor/angular/angular-scenario.js:31777:18)
    at angular.scenario.Application.executeAction (http://localhost:8000/app/js/vendor/angular/angular-scenario.js:30931:19)
    at Scope.<anonymous> (http://localhost:8000/app/js/vendor/angular/angular-scenario.js:31750:22)

The main error is TypeError: Object [object Object] has no method 'injector' and is thrown throw browser().location().url().
Have you an idea what i do wrong? Or rather exists an example with an e2e test on a angularAMD App?

greetings from germany,
dutscher

As raise by #21 module created by command angular.provide is accessible by using <module name>Provider. angularAMD does not seem to correctly expose the provider.

http://plnkr.co/edit/b0nBPMcWfLxtSUn080GO?p=preview

Check out the use of RestangularProvider in home.js.

I am new to angularJS and angularAMD so I guess this isn't working largely because I don't fully understand everything yet. But have been struggling with this for days now and its driving me crazy.

I was able to setup angularJS and angularAMD to work, but it gives me trouble when I try to unit test. If I the load the site, it loads well and the controllers, directives etc resolve and work. But trying to test has been a disaster. Here is the error I get when I run a test for a controller

Uncaught TypeError: Cannot read property 'controller' of undefined.

My folder structure and files look like this(some folders not shown)
/
...app/
.........scripts/
.............controllers/
...................maincontroller.js
.............app.js
.............main.js
.........vendor/

...test/
.........unit/
.............controllers/
...................maincontrollerSpec.js
.........app.js
karma.conf.js
test-main.js

I have added screenshot of files of interest

karma.conf.js

test-main.js

test/unit/app.js

test/unit/controllers/maincontrollerSpec.js

scripts/controllers/maincontroller.js

I so much appreciate your help.

Hello everybody!
I'm trying to implement a simple filter concatenation, but I can not. Could someone give an example of using filters? Since scription and record it for use in the application.

PS: I think this is missing in the documentation, if it exists, can someone pass me the link?

Thank you!

http://plnkr.co/edit/Pco6T6gVEEcp8IcWb4LX?p=preview

Hey guys!
I'm having the following problem when I try to install the bower:

bower ECMDERR Failed to execute "git clone git://github.com/bhurlow/google-code-prettify-lite.git /tmp/user/bower/google-code-prettify-lite-3693-EFe7sM --progress", exit code of #128

I looked at the the bhurlow removed the repository

so. if i understand correctly. we will need to create a new r.js module with the deps and call app.ngAMD.processQueue();.

is there a way around this. like when registering a module on runtime. it will auto wire up .processQueue()?

Sorry to post here but I haven't found any tags of this project on stackoverflow.

The project below is using this code in the app.js file:

app.js (jquery)

define(['jquery', 'angularAMD'], function ($, angularAMD) {
  var app = angular.module( "webapp", [] );
  angularAMD.bootstrap( app );
  return app;
});

The problem is that when I load jQuery with AMD the app.register property is undefined in the index.html file, but when I remove that dependency the property is properly visible:

app.js (no jquery)

define(['angularAMD'], function (angularAMD) {
  var app = angular.module( "webapp", [] );
  angularAMD.bootstrap( app );
  return app;
});

index.html

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script>
        var require = {

          baseUrl: "js/scripts",

          waitSeconds: 0,

          // Add angular modules that does not support AMD out of the box, put it in a shim
          shim: {
            angular: {
                exports: "angular",
                deps: ["jquery"] // Make angular not to use jqLite
            },
            angularAMD: [ "angular" ]
          }//,

          // kick start application
          //deps: ['app']
        };

    </script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.11/require.min.js"></script>
  </head>

  <body id="custom-app">
    <h1>Sample for <a href="http://marcoslin.github.io/angularAMD/" target="_blank">angularAMD</a></a></h1>
    <div ng-view></div>
  </body>
<script>
require( ["app"], function( app ) {
        // Most of the time: "Invalid app.register"
    alert( !app.register ? "Invalid app.register" : "VALID app.register" )
});
</script>
</html>

I don't know if this is something related to this project or something wrong with my understanding of AMD. Thing is I can't make it work.

Note: sometimes it does work and sometimes it don't, which means it may be something related to the requireJS loading order.

The sample project: https://www.dropbox.com/s/91mvp4jyackar8b/angularAMD_gh-42.rar

The best practice for angularAMD should be to load all initial dependencies in index.html. This should allow browser to parallel load all needed resources. At minimum, angular.js should be loaded at the same time as require.js. In order to support that, and to remove any hard coding, the 'angular' dependency in angularAMD should be removed.

Couple pre-coding tests should be performed:

1. What happens to current angularAMD if 'angular' is not defined in paths?
2. Make sure that all <script> defined in index.html are indeed parallel loaded.

Nice, but the documentation keeps the "best" Angular tradition. To understand the code I have to learn everything from scratch so no time will be spared. Ten extra lines of explanation would make it great project.

-- Alex Dyba via G+

Unable to bower install unless google prettify is not part of the build

In the documentation's 3rd Party AngularJS Modules section, need to indicate that app.ngAMD.processQueue(); is only needed when loading angular modules after ngAMD.bootstrap(). Before bootstrapping, all you need to do is define the dependencies of module being loaded in the shim section of main.js.

The demo only shows how this works in angular-route. How about ui-router? https://github.com/angular-ui/ui-router

http://bl.ocks.org/ is a simple gist viewer and allow users to easily clone the files locally.

Hi Marcos!

I was wondering if you could help me with some tests that i've been doing with your seed project.

I don't know if i'm doing in the right way, but i make some changes to test an controller that is loaded with angularAMD, because in my Application i'll load controllers on demmand (I don't know if i'm doing this in the right way too =P).

Fine, to the problem:

I downloaded you angularAMD project and then, step by step, deleting the files that wasn't worth for the controllers test that i would like to implement.

So ok, i cleaned up the project for my needs and it was running the tests as well, but, when i add an js file to the app.js (i just created and whatever.js for example, but my js contains some stuff ) and this whatever.js let's supose that it depends on jQuery or X,Y,Z.js . When i add the jQuery or the lib that the whatever.js depends on, the tests starts to fail, and if you delete the content of jQuery the tests works fine.

To reproduce this, download the project i changed and run karma start on the test/conf/karma.conf.js the tests will fail, but if you go to bower_components/jquery/jquery.js and delete the whole content of jquery.js the tests just back to work. You can put prints on jquery.log and stuff, and still working.

This problem doesn't happen just for jQuery.

Here is the repo: https://github.com/EduardoAzul/angularAMD

Regards,

Eduardo.

Hi, Have you tested lazy-loading on animation ?

define(['.app'], function(app){
    app.register.animation('.slider-animation', function(){
    });
})

This code doesn't seem to work in my application. Any idea on why it breaks would be really appreciated!

I have a specific problem with angular-animate when I run it in Phonegap.
I have done the AngularJS documentation process for do a simple animation.
https://code.angularjs.org/1.2.0-rc.3/docs/api/ngAnimate

"config-require.js"

require.config({

    baseUrl: "./js",
    paths: {
            'angular'         : '../libs/angular',
            'angular-route'   : '../libs/angular-route',
            'angular-animate' : '../libs/angular-animate'
    },
    shim: {
            'angularAMD'      : ['angular'],
            'angular-route'   : ['angular'],
            'angular-animate' : ['angular']
    },
    deps: ['app']
});

"app.js"

define(['angularAMD', 'angular-route', 'angular-animate'], function (angularAMD) {
    var app = angular.module("com.grupocampus.arbitros-fvfbff", ['ngRoute', 'ngAnimate']);

.reveal-animation.ng-enter {
  -webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */
  -moz-animation: enter_sequence 1s linear; /* Firefox */
  -o-animation: enter_sequence 1s linear; /* Opera */
  animation: enter_sequence 1s linear; /* IE10+ and Future Browsers */
}
@-webkit-keyframes enter_sequence {
  from { opacity:0; }
  to { opacity:1; }
}
@-moz-keyframes enter_sequence {
  from { opacity:0; }
  to { opacity:1; }
}
@-o-keyframes enter_sequence {
  from { opacity:0; }
  to { opacity:1; }
}
@keyframes enter_sequence {
  from { opacity:0; }
  to { opacity:1; }
}

<div class="reveal-animation" ng-view></div>

I test it in Firefox, Chrome, Chromium and Canary and it is running perfectly, without errors. But when I build in Phonegap and run it, LogCat gives me this error:

TypeError: undefined is not a function
    at file:///android_asset/www/libs/angular.js:11328:16
    at file:///android_asset/www/libs/angular-animate.js:267:14
    at afterReflow (file:///android_asset/www/libs/angular-animate.js:1097:33)
    at animate (file:///android_asset/www/libs/angular-animate.js:1471:9)
    at Object.fn (file:///android_asset/www/libs/angular-animate.js:1504:18)
    at file:///android_asset/www/libs/angular-animate.js:456:46
    at Array.forEach (native)
    at forEach (file:///android_asset/www/libs/angular.js:322:11)
    at run (file:///android_asset/www/libs/angular-animate.js:441:11)
    at Object.before (file:///android_asset/www/libs/angular-animate.js:474:13) at file:///android_asset/www/libs/angular.js:9509

Someone could help me? Someone have had this problem or similar?

http://plnkr.co/edit/zXRuFwoncXZux1TgVUCM?p=preview

angularAMD.bootstrap(app);

bootstrap is not defined.
but works ok on Chrome

This makes it hard to integrate something like this:

https://github.com/fnakstad/angular-client-side-auth

Adding a dependency in app.js to some Service (ie Auth) just causes app in its define function be undefined on load.

I know there is something very small that I Am doing wrong, but I have had no issue loading this controller:

http://smartassist.kopeltechdev.com/#/service-provider/add

but when I attempt to access this:

http://smartassist.kopeltechdev.com/#/service-provider

it simply sits there. I can see that the JS controller is being loaded. The app.register.controller is never firing off.

Any suggestions?

Weird error on TravisCI log:

npm ERR! Error: No compatible version found: minimatch@'^0.3.0'
npm ERR! Valid install targets:
npm ERR! ["0.0.1","0.0.2","0.0.4","0.0.5","0.1.1","0.1.2","0.1.3","0.1.4","0.1.5","0.2.0","0.2.2","0.2.3","0.2.4","0.2.5","0.2.6","0.2.7","0.2.8","0.2.9","0.2.10","0.2.11","0.2.12","0.2.13","0.2.14","0.3.0"]
npm ERR!     at installTargetsError (/home/travis/.nvm/v0.8.26/lib/node_modules/npm/lib/cache.js:719:10)
npm ERR!     at /home/travis/.nvm/v0.8.26/lib/node_modules/npm/lib/cache.js:641:10
npm ERR!     at RegClient.get_ (/home/travis/.nvm/v0.8.26/lib/node_modules/npm/node_modules/npm-registry-client/lib/get.js:101:14)
npm ERR!     at RegClient.<anonymous> (/home/travis/.nvm/v0.8.26/lib/node_modules/npm/node_modules/npm-registry-client/lib/get.js:37:12)
npm ERR!     at fs.readFile (fs.js:176:14)
npm ERR!     at Object.oncomplete (fs.js:297:15)
npm ERR! If you need help, you may report this log at:
npm ERR!     <http://github.com/isaacs/npm/issues>
npm ERR! or email it to:
npm ERR!     <[email protected]>

How to load categories factory for resolve.

$stateProvider
   .state('categories', angularAMD.route({
        url: '/categories'
        templateUrl: '[Template Url]',
        controller: '[Controller]',
        controllerUrl: '[Controller Url]',
        resolve: {
           categoriesData: function(categories){
              return categories.query();
           }
        }
  }));

ui-router/restangular seems to be popular with community.

The Unit Test for controller.js only considers ngload!services:

define(['app','ngload!services'], function (app) {

We should provide an example where we in our controller depend on a registered service.

I am trying to create a page like this... (ugh why cant web based posts systems just encode things...)

<body>
    <nav class="this is a directive"></nav>
    <div class="this is my view for angularAMD Routes" ng-view>
    </div>
</body>

However all attempts at attaching a controller to the body results in app.register being called on undefined... or if I just try and let the directive resolve itself... nothing happens... Sadly... the angularJS community on Freenode is rather unresponsive to new people asking questions... so I am hoping to find some help here :)

npm install does not include grunt which... as a dependency to setup the project seems a bit of an oversight.

Heading need to set to 3rd level, consistent with other header at the same level. The introducing sentence does not make any sense...

Hi
I try to load a module that has dependencies to 'restangular'. But if I try to use the 'RestangularProvider' in the loaded modules config it gives the following errror:

Uncaught Error: [$injector:unpr] Unknown provider: RestangularProviderProvider <- RestangularProvider

This is the "main" module that loads the other module dynamically when the route "/app" is matched:

define(['angularAMD', 'angularUiRouter', 'restangular'], function (angularAMD) {
var module = angular.module(
'Index', [
'ui.router',
'restangular'
])
.config([
'$stateProvider', '$urlRouterProvider', 'RestangularProvider',
function ($stateProvider, $urlRouterProvider, RestangularProvider) {
$urlRouterProvider.otherwise("/app");
$stateProvider
.state('app', angularAMD.route({
url: '/app',
templateUrl: 'app/app.html',
controller: 'AppController',
controllerUrl: 'ngload!app'
}));
RestangularProvider.setRequestSuffix('.json');
}])
.run([
function run() {
}])
.controller(
'IndexController',
[
'$scope', '$rootScope', '$location',
function controller($scope, $rootScope, $location) {
}
]);
angularAMD.bootstrap(module);
return module;
});

And this is the app module that gets loaded:

define([], function () {
var module = angular.module(
'App', [
'ui.router',
'restangular'
])
.config([
'RestangularProvider',
function (RestangularProvider) {
}])
.controller(
'AppController',
[
'$scope', '$rootScope', '$location',
function controller($scope, $rootScope, $location) {
$scope.message = "App";
}
]);
return module;
});

Without the 'RestangularProvider' in the config the app works fine.

But with the 'RestangularProvider' or any other provider I tested it doesn't.

It seems that it is not possible for modules loaded by AngularAMD to have any other dependencies.

What can I do?

PS: This is the requirejs config:

require.config({
baseUrl: "",
paths: {
'lodash': 'Vendor/lodash/lodash',
'jquery': 'Vendor/jquery/jquery-1.10.2',
'angular': 'Vendor/angular/angular-1.2.3',
'angularAMD': 'Vendor/angular-amd/angularAMD',
'angularRoute': 'Vendor/angular/angular-route',
'angularUiRouter': 'Vendor/angular-ui-router/angular-ui-router',
'ngload': 'Vendor/angular-amd/ngload',
'restangular': 'Vendor/restangular/restangular',
'app': 'app/app'
},
shim: {
'angular': ['jquery'],
'angularAMD': ['angular'],
'ngload': ['angularAMD'],
'angularRoute': ['angular'],
'angularUiRouter': ['angular'],
'restangular': ['angular', 'lodash'],
'app': ['angularUiRouter', 'restangular']
},
deps: ['Index']
});

Unless I'm missing something why should there be a shim for the plugin?

Why not do something like:

(function (factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        // Register as an anonymous AMD module:
        define(['angular'], factory);
    } else {
        factory();
    }
}(function () {
    // ... code here! ...
}));

Hi @marcoslin

In requirejs exist a some interesting feature like a packages which allow use their as separate packages. How can I use this feature with angularAMD?

http://stackoverflow.com/questions/10713708/tracking-google-analytics-page-views-with-angular-js

Hi there,

Great work! What is involved in creating a yeoman generator from this? Have you looked in to it?

Jerome

I'm just interested to know about the use of this approach in phonegap application. Anybody having experience with phonegap?. Thanks

So I keep getting the following: Error: [ng:areq] Argument 'AppsCtrl' is not a function, got undefined when I try to define a few different modules. My setup looks like:

main.js

require.config({
    paths: {
        angular: 'lib/angular/angular',
        jquery: 'lib/jquery/jquery-2.1.0',
        angularCookies: "lib/angular/angular-cookies",
        angularRoute: "lib/angular/angular-route",
        angularAnimate: "lib/angular/angular-animate",
        angularTouch: "lib/angular/angular-touch",
        angularSanitize: "lib/angular/angular-sanitize",
        angularAMD: 'lib/angularAMD/angularAMD',
        ngload: 'lib/angularAMD/ngload'
    },
    map: {
        '*': {
            'less': 'lib/require/require-less/less',
        }
    },
    shim: {
        jquery: {
            exports: '$'
        },
        angular: {
            exports: 'angular',
            deps: ['jquery']
        },
        angularAMD: ['angular'],
        ngload: ['angularAMD']
    }
});

require(['angular', 'angularAMD', 'app/app'], function (angular, angularAMD, app) {
    angularAMD.bootstrap(app);
});

app.js

define(['angular', 
        'angularCookies',
        'angularRoute', 
        'angularAnimate',
        'angularTouch',
        'angularSanitize',
        'app/admin/admin' // module trying to be included!
    ], function (angular) {

    var app = angular.module('phx', ['ngCookies', 'ngRoute', 'ngAnimate', 'ngSanitize', 'admin']);

    app.config(function ($routeProvider, $locationProvider) {
        $routeProvider.otherwise({ redirectTo: 'apps' });
        $locationProvider.html5Mode(true);
    });

    app.run(function ($rootScope, $location, $route, Auth) {
        var deregister = $rootScope.$on("$routeChangeStart", function () {
            Auth.authorize().then(function (xhr) {
                if (xhr) {
                    $rootScope.authed = true;
                    $rootScope.profile = xhr.data;
                    deregister();
                }
            },function(){
                $location.path('login');
            });
        });

        $rootScope.$on('$routeChangeSuccess', function() {
            if ($route.current && $route.current.$$route && $route.current.$$route.controller){
                $rootScope.controller = $route.current.$$route.controller;
                $rootScope.page_title = $route.current.$$route.title;
            }
        });
    });

    return app;
});

admin.js

define(['angular', 'angularAMD'], function (angular, angularAMD) {
    var module = angular.module('admin', []);
    module.config(function ($routeProvider) {
        // admin/apps/apps.js
        $routeProvider.when('/apps', 
            angularAMD.route({
                templateUrl: 'app/admin/apps/apps.tpl.html',
                controller: 'AppsCtrl',
                title: 'Applications',
                controllerUrl: 'app/admin/apps/apps',
                resolve: {
                    apps: function (AppsModel) {
                        return AppsModel.findAll();
                    }
                }
            }));
    });
    return module;
});

It happens when the route hits the app. I added console logs and everything is getting hit its just timing related.

Anyone got any ideas?

When .getAlternateAngular() is used, call to get module using angular.module immediately returns undefined after creation. The module get should continue to work until .processQueue() is called.

Note: must test if any subsequent call to the module obtained using angular.module will queue up the call in _invokeQueue.

All is great up to step "grunt serve-www". I get the following, will continue troubleshooting.

Running "copy:setup-www" (copy) task
Copied 9 files

Running "open:serve-www" (open) task
Warning: Command failed: Unable to find application named 'Google Chrome Canary'
Use --force to continue.

Aborted due to warnings.
angularAMD bmw$ grunt serve-www
Running "copy:setup-www" (copy) task
Copied 9 files

Running "open:serve-www" (open) task
Warning: Command failed: Unable to find application named 'Google Chrome Canary'
Use --force to continue.

Aborted due to warnings.

Explain that user can drag the marker in the map, that the Lat/Long label will get updated and the new position will be remembered between tab changes.