AngularJS code only works when ng-app=""

Question

The following html page works when ng-app="" but not when ng-app="MyApp". How can I make this page work with ng-app="MyApp"?

The code in this page will print out the text being input as user types into the textbox.

<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
  <div ng-app="MyApp">
    <p>Input something in the input box:</p>
    <p>Name: <input type="text" ng-model="name" value="John"></p>
    <p ng-bind="name"></p>
  </div>
</body>
</html>

I tried including following JavaScript in this page, but still it did not work.

  <script>
     angular.element(document).ready(function() {
      angular.bootstrap(document, ['MyApp']);
    });
  </script>

UPDATE 1

The following script did the trick, which I picked up after reading various responses to my post. I added this just before the closing 'body' tag.

<script>
  angular.module('MyApp', []);
</script>

Where is your JS code? The HTML page doesn't contain any JS code, and doesn't have any script except the one loading angular. Do you have a module named MyApp? Is there any error in the console? — JB Nizet
– JB Nizet, Commented Mar 13, 2015 at 17:00
to add to the above, you have no need for angular.bootstrap if you are not using something like requirejs; angular will automatically load the correct module based on ng-app if the module is created once the document has finished loading. — Dan
– Dan, Commented Mar 13, 2015 at 17:01
Yes. ng-app="foo" tells angular to configure and run the module "foo". So if there is no module "foo", it makes no sense. Read the documentation: docs.angularjs.org/api/ng/directive/ngApp — JB Nizet
– JB Nizet, Commented Mar 13, 2015 at 17:06

Eduardo Yáñez Parareda · Accepted Answer · 2015-03-13 17:26:52Z

1

You need to declare your module in Angular. You must declare it in javascript whithin your file:

angular.module('MyApp', []);

Here you have a good starting tutorial:

http://tutorials.jenkov.com/angularjs/index.html#angularjs-hello-world

edited Mar 13, 2015 at 17:26

answered Mar 13, 2015 at 17:08

Eduardo Yáñez Parareda

10.7k4 gold badges44 silver badges54 bronze badges

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

3 Comments

Sunil Over a year ago

It gives an error now that says: "Uncaught Error: [$injector:nomod] errors.angularjs.org/1.2.26/$injector/nomod?p0=MyApp"

Sunil Over a year ago

It worked if I added an empty array like in : " angular.module('MyApp', []); " rather than " angular.module('MyApp'); "

richbai90 Over a year ago

the empty array is required. That array tells the module what other modules are required for it to work, a sort of dependency injection.

Collectives™ on Stack Overflow

AngularJS code only works when ng-app=""

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related