AngularJS with RequireJS, manual initialisation, directive fails

Question

In the following example why does AngularJS compile {{'world'}} in my HTML but not act upon the directive?

HTML

<body>
    <div>Hello {{'World'}}!</div>
    <example>should be replaced</example>
    <script data-main="lib/main" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.5/require.min.js"></script>
</body>

main.js

require.config({
    paths: {
        jquery: '//code.jquery.com/jquery-1.10.0.min',
        angular: '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min'
    },
    shim: {
        'angular' : {'exports' : 'angular'}
    },
    priority: [
        "angular"
    ]
});

require( [
    'jquery',
    'angular',
    'app'
    ], function($, angular, app) {
        'use strict';
        $(document).ready(function () {
            angular.bootstrap(document,[]);
            app.directive('example',function(){
            return {
                restrict: "E",
                template:"<div>Replaced</div>"
            }
        })
    });
});

app.js

define([
    'angular'
], function (angular) {
    'use strict';
    return angular.module('myApp', []);
});

Visible in browser window when run

Hello World!
should be replaced

So Angular has initialised as {{'World'}} has compiled to World but the 'example' directive has failed as 'should be replaced' hasn't been replaced with 'Replaced'

I realise there is no app holder in the HTML but if I try to add one I get an error

For example

<div ng-app='myApp'>
    <div>Hello {{'World'}}!</div>
    <example>should be replaced</example>
</div>

Gives error

Uncaught Error: No module: myApp    http:// ...

Paul Ryan · Accepted Answer · 2013-05-31 00:11:16Z

5

Because you're late/lazy loading all of the modules (using AMD) you need to manually bootstrap your application after the load is complete. Take a look at the manual initialization section of http://docs.angularjs.org/guide/bootstrap for an example of doing this.

Make sure the bootstrap is not called until angular document is ready. Also include the app you want bootstrapped at that point as a module dependency for the bootstrap call (e.g. angular.bootstrap(document, ['myapp']);).

edited May 31, 2013 at 0:11

answered May 30, 2013 at 21:54

Paul Ryan

1,51912 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jim Over a year ago

Yeah I've seen that link. I am manually bootstrapping aren't I? By using angular.bootstrap(document,[]);

Jim Over a year ago

Ah Ok, "Because you're late loading all of the modules" put me n the right track. So I bootstrapped angualr in the jquery ready function but added the directive in the angular ready function suggested in your post and it works. Thanks. Now to place directive etc in modules :)

Jim Over a year ago

Hm. Ok the directive is working but it still doesn't let me add <div ng-app="myApp></div> to the HTML without failing. At the link you posted somebody commented that 'you must pass your application's module name if you have one.' eg: angular.bootstrap(document, ['myapp']);. Or is it that when manually initialising you do all your angular markup with JS?

Paul Ryan Over a year ago

That's what I meant by the sentence "Also include the app you want bootstrapped at that point as a module dependency for the bootstrap call.". You do this in lieu of an ng-app="myapp" on the page. The ng-app="myapp" on the page will fail because some components will have not been initialized by the time angular get's loaded.

Jim Over a year ago

Yup, yup. I get it now. So basically when bootstrapping you don't need a ng-app='xxx' in your html? This seemed odd as I wrongly assumed you couldn't use any ng- tags but I've just checked and of course you can. Otherwise I thought it meant all your markup had to be in code and that would rather defeat the point of the framework! Thanks again, much appreciated.

|

Collectives™ on Stack Overflow

AngularJS with RequireJS, manual initialisation, directive fails

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related