Incorporate AngularJS into existing modular application

Question

I'm trying to find the way of incorporating AngularJS into existing application. Application is modular, so every module has HTML markup and JS script files. Modules are loaded with requirejs and jQuery (for loading markup).

I would like to use AngularJS features in some of the modules, having in mind the possibility of migrating to AngularJS in future. So ideally I want something like this:

define([ 'angular' ], function (angular) {
    return function (element) {
        // The "element" parameter contains the reference to
        // the detached DOM node that contains the markup.
        // And what I think should be done is compiling
        // or initializing AngularJS with the given DOM HTML fragment
        // and with controller, etc.
        angular.doSomething(element, ...something...);
        // The application module engine will inject the returned element
        // into the DOM tree.
        return element;
    };
});

Any ideas? Thanks!

Tim Withers · Accepted Answer · 2013-05-07 01:33:53Z

3

Just following the tutorial, specifically Step 2 (http://docs.angularjs.org/tutorial/step_02) will show you how to just do a single controller on the page with some simple functionality.

You can just use this, or you can start expanding it by modularizing it as in Step 7. By creating an module you can then add directives and services and take advantage of all that Angular offers. You don't necessarily need to configure routes or anything, but by creating an app module, you can incorporate other modules or services offered throughout the web or by Angular.

answered May 7, 2013 at 1:33

Tim Withers

12.1k5 gold badges45 silver badges68 bronze badges

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

Comments

PaReeOhNos · Accepted Answer · 2013-05-07 01:34:42Z

AngularJS isn't designed to really run alongside other frameworks and be used for little bits and pieces. You could hack it together to do this but it'll probably become very messy. Angular is much better suited to becoming the basis of the entire app.

Something like jQuery is great for dropping into an app and adding functionality, but angular is far more complex.

If you do want angular to take control of certain parts though, take a look into the ng-controller directive and how it works. Then in your standard markup you'd just add the ng-controller attribute to any element, and then add a new angular controller to your javascript. It would then manage that DOM element.

Look into angular controllers for more info on that. But as I say, I'd suggest making the app entirely Angular rather than trying to just add angular bits to it

Collectives™ on Stack Overflow

Incorporate AngularJS into existing modular application

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related