error in importing angular js

Question

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

  <div ng-app="myApp" ng-controller="myCntrl">
    First Name : <input type="text" ng-model="firstName"> <br>
    Last Name : <input type="text" ng-model="lastName"> <br>
    <br>
    Full Name: {{firstName + " " + lastName}}
  </div>

  <script>
  var person={
    firstName = "john" ,
    lastName = "Doe"
  };

  var app = angular.module('myApp', []);
  app.controller('myCntrl', function($scope){
    $scope.firstName = person.firstName;
    $scope.lastName = person.lastName
  });
  </script>
</body>
</html>

but I got this when run

angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.4/$injector/modulerr?p0=myApp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.6.4%2F%24injector%2Fnomod%3Fp0%3DmyApp%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A6%3A425%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A26%3A270%0A%20%20%20%20at%20b%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A25%3A299)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A26%3A44%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A42%3A117%0A%20%20%20%20at%20q%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A7%3A495)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A41%3A476)%0A%20%20%20%20at%20eb%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A46%3A44)%0A%20%20%20%20at%20c%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A21%3A373)%0A%20%20%20%20at%20Sc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.4%2Fangular.min.js%3A22%3A179) at angular.js:38 at angular.js:4920 at q (angular.js:403) at g (angular.js:4880) at eb (angular.js:4802) at c (angular.js:1914) at Sc (angular.js:1935) at ue (angular.js:1820) at angular.js:33367 at HTMLDocument.b (angular.js:3431)

any help ?

Vivz · Accepted Answer · 2017-08-29 11:10:06Z

1

You have to declare person object properly with correct syntax within the scope of angular. So move your object inside the controller.

  var app = angular.module('myApp', []);
  app.controller('myCntrl', function($scope) {
      var person = {
          firstName: "john",
          lastName: "Doe"
      };
      $scope.firstName = person.firstName;
      $scope.lastName = person.lastName
  });

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>
    <div ng-app="myApp" ng-controller="myCntrl"> First Name :
        <input type="text" ng-model="firstName">
        <br> Last Name :
        <input type="text" ng-model="lastName">
        <br>
        <br> Full Name: {{firstName + " " + lastName}} </div>
</body>

</html>

edited Aug 29, 2017 at 11:10

answered Aug 29, 2017 at 10:32

Vivz

6,6282 gold badges19 silver badges34 bronze badges

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

3 Comments

aaa aaa Over a year ago

what was the problem ?

Vivz Over a year ago

Check the updated answer. Your object declaration was not correct and it is better to use person as an object in the scope of angularjs application rather than declaring it global.

Vivz Over a year ago

Even if you declare the variable globally, it will work though it is not recommended

Collectives™ on Stack Overflow

error in importing angular js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related