CODEWITHSUNDEEP
javascriptangularjsdata-binding
Javier
Javier

Reputation: 249

Basic Angular (Binding not showing up)

I have the following directory:

-flapper-news
  -app.js
  -index.html

In app.js I have:

angular.module('flapperNews', [])
.controller('MainCtrl', [
'$scope',
function($scope){
  $scope.test = 'Hello world!';
}]);

In index.html.I have the following:

<html>
  <head>
    <title>My Angular App!</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-app="flappeNews" ng-controller="MainCtrl">
    <div>
      {{test}}
    </div>
  </body>
</html>

When I navigate to my index.html and I open it on google chrome only see the binding like so:

{{test}}

obviously not working. In my browser console I see:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.19/$injector/modulerr?p0=flappeNews&p1=Erro…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.19%2Fangular.min.js%3A18%3A139)

I have tried changing version of angular and including ngroute in my angular module but nothing works. Any idea of what is happening?

Upvotes: 0

Views: 46

Answers (2)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27192

Try this it is working :

use ng-app="flapperNews" instead of ng-app="flappeNews"

Plnkr : http://plnkr.co/edit/84P1zpbHdhGOwI2oNMrQ?p=preview

Upvotes: 1

Martijn Welker
Martijn Welker

Reputation: 5605

You have ng-app="flappeNews" instead of ng-app="flapperNews" on your body.

<body ng-app="flapperNews" ng-controller="MainCtrl">

Upvotes: 1

Related Questions