Using angularjs inside a jquery.load page

Question

I am writing a web application to accomodate muli-device applications. I have built framework using nodejs, socket.io and express that handles the distribution of the views. The framework provides a base layout that controls the changing of views and groups, and the actual content is loaded into a div element using a jQuery .load call.

In my test application, I am trying to implement an MVC type architecture using AngularJS, but Angular fails to load and doesn't work when loaded from the .load function.

I have searched the forums on here and Googled alot, and the only other post I found was this: https://groups.google.com/forum/#!msg/angular/LufmNlNSxBM/c6rR7Ao1PPgJ

However, I am trying to avoid coupling between my framework and Angular, does anyone know of a way to get angular to load, when loaded using the .load method of jQuery?

(I apologize if this question doesn't follow the SO rules, this is my first post. If anything is ambiguous, or needs changing, I will do so)

EDIT:

Require.js solved the problem, here's my solution and code:

(main.js) Used to configure require and add dependencies (this can be expanded to include all of the dependencies that are needed, I just used the minimum to get it to load and run angular

require.config({
    paths: {
        angular: 'lib/angular/angular.min',
        jquery: 'lib/jquery-1.11.0.min',
        app: 'app',
    },
    shim: {
        angular: {
            deps: ['jquery'],
            exports: 'angular'
        },   
    }
});

I then created a script that is included inside the page that I dynamically load, which is as follows: (loadAngular.js)

require([
      'angular',
      'app'
//      'services/services',
//      'controllers/controllers',
//      'directives/directives'
    ], function(angular) {
        angular.bootstrap(document, ['MyApp']);
    });

Eventually, the commented lines will be used, and uncommented.

Finally, here is the code that I was loading onto the page, it just uses ng-model and displays what the number is in the text box. This was used purely for testing purposes. (test.html)

<div id='unique' ng-app='MyApp'>
    <form action="">
        <input type="number" ng-model='number'>
        <br>
    </form>
    <h1>The number is currently {{number}}.</h1>
</div>

<script src = "/js/loadAngular.js"></script>

Please can you include some code? Also, try to avoid phrases like "it doesn't work when xx", they don't tell the reader anything! :) Here's some great reading for a newcomer to the site: stackoverflow.com/help/asking — msturdy
– msturdy, Commented Feb 11, 2014 at 22:44

Gjohn · Accepted Answer · 2014-02-11 22:28:34Z

2

Use Require.js to load angular.js, you can use it to control what views it is loaded on and what views it is not loaded on. See the following example of it

http://www.codeproject.com/Articles/637430/Angular-js-example-application

answered Feb 11, 2014 at 22:28

Gjohn

1,2811 gold badge8 silver badges12 bronze badges

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

2 Comments

mem27 Over a year ago

Thank you so much, exactly what I was looking for. Would never have found that myself!

Gjohn Over a year ago

@mem27 Glad to be of help. Good luck!!

Collectives™ on Stack Overflow

Using angularjs inside a jquery.load page

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related