Angular.js Binding (simple html document)

Question

I cannot figure out why my controller and module are not binding like the tutorial I am following along with. I'm using the Brackets program which offers a live preview of my code and instead of showing the $scope.message it is only showing the word {{message}}. I'm just beginning to learn angularjs. In the head of the document I used script tags and src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js" Here is the body...

You have successfully reached my HTML document!

    <div ng-app="myModule" ng-controller="myController">

     <!h5 tag contains a binded expression>

        <h5> {{message}} </h5>
    <ul>
        <li ng-repeat="x in cars"> {{x}} </li>

        </ul>


    </div>


    <!Create a module named 'myModule'Create controller named 'myController'>

    <script>


    var myApp =angular.module("myModule",[]);

    myApp.controller("myController", function ($scope){

        $scope.cars = ["BMW", "Toyota", "Ford", "Range Rover"];
        $scope.message = "My students are the best in the world!";

    })

    </script>


</body>

Does it work when you open the in a browser even with file:///.. ?. — pr0gramista
– pr0gramista, Commented Aug 15, 2016 at 21:35
I feel like you're probably getting an error. Do you see anything in the console? — 1252748
– 1252748, Commented Aug 16, 2016 at 0:38
It shows {{message}} but on the instructional video his browser displays the actual message "My students are the best in the world!" I am replicating his code line for line and using the same program as was suggested, "Brackets." — Kasper_Sky
– Kasper_Sky, Commented Aug 16, 2016 at 4:37

1252748 · Accepted Answer · 2016-08-16 15:46:41Z

0

Angular detects your ngApp before the module is created and therefore throws a $injector:modulerr exception. If you open your console, you can see this. Moving your script in your document above the container to which ngApp is applied resolves your issue.

http://jsbin.com/quxinozubu/edit?html,js,output

answered Aug 16, 2016 at 15:46

1252748

15.5k35 gold badges118 silver badges244 bronze badges

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

Comments

hari prasad · Accepted Answer · 2016-12-05 07:07:13Z

Your code is working fine for me. I just saw a simple mistake. You missed semicolon in Controller.

var myApp =angular.module("myModule",[]);

     myApp.controller("myController", function ($scope){

         $scope.cars = ["BMW", "Toyota", "Ford", "Range Rover"];
         $scope.message = "My students are the best in the world!";

     });

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

  </head>
  <body>

    <div ng-app="myModule" ng-controller="myController">



         <h5> {{message}} </h5>
     <ul>
         <li ng-repeat="x in cars"> {{x}} </li>

         </ul>


     </div>



   


 </body>
</html>

@Kasper_Sky, Mark this as answer if you think it is helpful.

Collectives™ on Stack Overflow

Angular.js Binding (simple html document)

You have successfully reached my HTML document!

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

You have successfully reached my HTML document!

2 Answers 2

Comments

1 Comment

Linked

Related