0

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>
Kasper_Sky
  • 107
  • 1
  • 1
  • 3
  • Does it work when you open the in a browser even with `file:///..` ?. – pr0gramist Aug 15 '16 at 21:35
  • I feel like you're probably getting an error. Do you see anything in the console? – 1252748 Aug 16 '16 at 00: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 Aug 16 '16 at 04:37

2 Answers2

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

1252748
  • 14,597
  • 32
  • 109
  • 229
0

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>
hari prasad
  • 75
  • 1
  • 10