CODEWITHSUNDEEP
angularjsmodule
Alex Netkachov
Alex Netkachov

Reputation: 13522

Incorporate AngularJS into existing modular application

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!

Upvotes: 1

Views: 822

Answers (2)

PaReeOhNos
PaReeOhNos

Reputation: 4398

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

Upvotes: 1

Tim Withers
Tim Withers

Reputation: 12059

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.

Upvotes: 3

Related Questions