current community

your communities

more stack exchange communities

Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote -2 down vote favorite

I am attempting to load AngularJS to a page using jQuery. The reason for that is that I have a site that was build using jQuery but I want to take advantage of some of the amazingness of AngularJS to a particular page. So I did this. 

jQuery(document).ready(function(jQ){
    jQ.getScript( "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js", function( data, textStatus, jqxhr ){

        var app = angular.module('app',[]).controller('pageController', function($scope) {

            console.log('Hello');
            $scope.data = 'success!';
        });
    });
});

Here is the HTML code:

<html>
..
<body>
...
<div ngApp="app">
    <div ngController="pageController">
       {{data}}
    </div>
</div>
</body>
</html>

There are two problems.

  1. If I use "ng-app" instead of "ngApp", AngularJS throws an error saying

Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

  1. I can see app and pageController are both loaded correctly, but {{data}} in html is not rendered and console.log('Hello'); didn't get executed as well.

Scratching my for hours now. Any help is appreciated.

share|improve this question
    
Well, ngApp isn't a property Angular recognizes.. And there's a guide to manual bootstrapping your app: docs.angularjs.org/guide/bootstrap –  tymeJV Feb 12 at 21:37
    
how does jquery come here? I still don't understand why you just can't use them side by side –  Rápli András Feb 12 at 21:38
    
Why do you need to use JQuery to load AngularJS? You can just load AngularJS the same way you load JQuery, with a <script src="...">tag. Otherwise, I'm afraid AngularJS won't be bootstrapped automatically, and you would need to invoke angular.run(). Is there any particular reason to load it in this "creative" way? –  macl Feb 12 at 21:39
    
But why? Usually when people are trying to do weird things, its because they really don't know what they are doing. Just load angular with a script tag like any other js. –  JK. Feb 12 at 22:07
    
That's for your comments guys. I need to rethink my approach. It seems backwards. It's part of learning for those who wonder why I asked this question. We all experience confusion when learning something new. Thank you for your patience. –  Desmond Liang Feb 13 at 1:23

1 Answer 1

up vote 1 down vote accepted

You can, you just wouldn't declare the ng-app and instead bootstrap your app manually:

jQuery(document).ready(function(jQ){
    jQ.getScript( "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js", function( data, textStatus, jqxhr ){

        angular.module('app',[]).controller('pageController', function($scope) {

            console.log('Hello');
            $scope.data = 'success!';
        });

        angular.element(document).ready(function() {
            angular.bootstrap(document, ['app']);
        });
    });
});

It's also ng-controller, not ngController

<div>
    <div ng-controller="pageController">
       {{data}}
    </div>
</div>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.