Angular Code not executing

Question

I am taking baby steps in learning AngularJS to act as a front end with my Python/Django projects. I just wrote a simple AngularJS page as below.

The expected output of the code is Joe is 35 years old.

while the actual output of the code is {{ person.name }} is {{ person.age }} years old.

The code is as below.

<html>

<body ng-app="scrumboard.demo">
  <div ng-controller="ScrumboardController">
    <p>{{ person.name }} is {{ person.age }} years old.</p>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>

  <script>
    (function() {
        'use strict';
        angular.module('scrumboard.demo', [])
          .controller('ScrumboardController', ['$scope', ScrumboardController]);

        function ScrumboardController($scope) {
          $scope.person = {
            name = 'Joe',
            age = 35
          };
        }());
  </script>

</body>

</html>

Sravan · Accepted Answer · 2018-06-04 13:20:52Z

2

Your object declaration is wrong,

$scope.person = {
   name = 'Joe',
   age = 35
};

name = 'Joe', should be name: 'Joe', and age = 35 should be age: 35

so,

$scope.person = {
   name: 'Joe',
   age: 35
};

<html>

<body ng-app="scrumboard.demo">
  <div ng-controller="ScrumboardController">
    <p>{{ person.name }} is {{ person.age }} years old.</p>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>

  <script>
    (function() {
        'use strict';
        angular.module('scrumboard.demo', [])
          .controller('ScrumboardController', ['$scope', ScrumboardController]);

        function ScrumboardController($scope) {
          $scope.person = {
            name: 'Joe',
            age: 35
          };
        }
     }());
  </script>

</body>

</html>

answered Jun 4, 2018 at 13:20

Sravan

18.7k3 gold badges33 silver badges54 bronze badges

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

Comments

Ja9ad335h · Accepted Answer · 2018-06-04 13:14:48Z

1

change this

$scope.person = {
        name = 'Joe',
        age = 35
      };

to

$scope.person = {
        name: 'Joe',
        age: 35
      };

<html>

<body ng-app="scrumboard.demo">
  <div ng-controller="ScrumboardController">
    <p>{{ person.name }} is {{ person.age }} years old.</p>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>

  <script>
    (function() {
        'use strict';
        angular.module('scrumboard.demo', [])
          .controller('ScrumboardController', ['$scope', ScrumboardController]);

        function ScrumboardController($scope) {
          $scope.person = {
            name: 'Joe',
            age: 35
          };
        }
     }());
  </script>

</body>

</html>

answered Jun 4, 2018 at 13:14

Ja9ad335h

5,0652 gold badges23 silver badges29 bronze badges

1 Comment

Aleksey Solovey Over a year ago

shouldn't self-invoking anonymous function end with })();?

Parry · Accepted Answer · 2018-06-04 15:20:53Z

Thanks Sravan and Jag. Asa rightly pointed out the problem was with the object notation which I fixed by changing

name = 'Joe',
age = 35

to name: 'Joe', age: 35

However after doing that the code still didn't work. SO after further scrutiny I found out I had missed one curly bracket '}' here

(function() {
    'use strict';
    angular.module('scrumboard.demo', [])
      .controller('ScrumboardController', ['$scope', ScrumboardController]);

    function ScrumboardController($scope) {
      $scope.person = {
        name = 'Joe',
        age = 35
      };
    }());

Which I changed to this

(function() {
    'use strict';
    angular.module('scrumboard.demo', [])
      .controller('ScrumboardController', ['$scope', ScrumboardController]);

    function ScrumboardController($scope) {
      $scope.person = {
        name = 'Joe',
        age = 35
      };
      }
    }());

and it worked.

Collectives™ on Stack Overflow

Angular Code not executing

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related