javascriptangularjsgit

Not able to get Angular to work (even on git pages)


I am trying my first experiences with Angular, but I only get curly-braces for the angular expressions, even though the localhost server is running - it is the same on git pages..

Can anyone help me? Researching brings me more complex solutions such as stopping angluar displaying these braces on a more complex level, but I feel my question is very basic - but copying and testing as much as possible, I can't get it to work.

Below is the HTML:

<!DOCTYPE html>
<html ng-app="myFirstApp">
  <head>
    <meta charset="utf-8">
    <script src="scripts/angular.min.js"></script>
    <script src="scripts/app.js"></script>
    <title>Hello Coursera</title>
  </head>
  <body>
    <h1>Hello Coursera</h1>
    <div ng-controller="MyFirstController">
      {{$scope}}

    </div>

  </body>
</html>

The app.js in the same folder:

(function () {
  'use strict';
  angular.module('myFirstApp', [])

  .controller('MyFirstController', funtion($scope) {
    $scope.name = "simon";
  });
})();

The angular.min.js file is located in the same folder and is downloaded directly. Is this perhaps an old version or so?


Solution

  • There are couple of mistakes in your code. First of all you dont write {{$scope}} in html . You directly write variable name like {{name}} then the function you spelled was wrong. PFB the code and it will work for you.

    (function () {
      'use strict';
      angular.module('myFirstApp', [])
    
      .controller('MyFirstController', function($scope) {
        $scope.name = "simon";
      });
    })();
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
    <!DOCTYPE html>
    <html  ng-app="myFirstApp">
      <head>
        <meta charset="utf-8">
        <script src="scripts/angular.min.js"></script>
        <script src="scripts/app.js"></script>
        <title>Hello Coursera</title>
      </head>
      <body >
        <h1>Hello Coursera</h1>
        <div ng-controller="MyFirstController">
          {{name}}
    
        </div>
    
      </body>
    </html>