Sunil
Sunil

Reputation: 21406

AngularJS code only works when ng-app=""

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>

Upvotes: 0

Views: 645

Answers (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

Upvotes: 1

Related Questions