Using angularjs inside a jquery.load page


I am writing a web application to accomodate muli-device applications. I have built framework using nodejs, 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:!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)


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

    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)

//      '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'>
    <h1>The number is currently {{number}}.</h1>

<script src = "/js/loadAngular.js"></script>
Problem courtesy of: mem27


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

Solution courtesy of: Gjohn


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.