Basic function in AngularJS

Question

I'm trying to write a simple "Hello World" application with AngularJS. I would expect the function greeting() to print the name inserted in the text input in real time, but instead I get simply {{greeting()}} in output. What's wrong?

<!doctype html>
    <body ng-app="myApp">

    <div ng-controller="userController">
        <p>Name: <input type="text" ng-model="user.name"></p>
        <p>Surname: <input type="text" ng-model="user.surname"></p>
        <p>{{greeting()}}</p>
    </div>

    <script type="text/javascript">
        angular.module("myApp", [])
            .controller("userController",
                function ($scope) {
                    $scope.user = {name: "Mario", surname: "Rossi"};
                    $scope.greeting = function() {
                        return "Hello " +
                            $scope.user.name + " " +
                            $scope.user.surname + "!"
                    };
                });
    </script>
    </body>
    </html>

Here's an example: I would like to see Hello John Smith! instead of {{greeting()}}.

Have you included angular script somewhere?

Bill P
– Bill P

2020-01-31 08:26:40 +00:00
Commented Jan 31, 2020 at 8:26 — Bill P
– Bill P, Commented Jan 31, 2020 at 8:26

Robby Cornelissen · Accepted Answer · 2020-01-31 08:28:22Z

3

You forgot to include the AngularJS JavaScript.

Otherwise it works fine:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<body ng-app="myApp">

  <div ng-controller="userController">
    <p>Name: <input type="text" ng-model="user.name"></p>
    <p>Surname: <input type="text" ng-model="user.surname"></p>
    <p>{{greeting()}}</p>
  </div>

  <script type="text/javascript">
    angular.module("myApp", [])
      .controller("userController",
        function($scope) {
          $scope.user = {
            name: "Mario",
            surname: "Rossi"
          };
          $scope.greeting = function() {
            return "Hello " +
              $scope.user.name + " " +
              $scope.user.surname + "!"
          };
        });
  </script>
</body>

answered Jan 31, 2020 at 8:28

Robby Cornelissen

98.6k23 gold badges154 silver badges180 bronze badges

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

Collectives™ on Stack Overflow

Basic function in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related