Uncaught TypeError: angular.model is not a function in Angular JS

Question

I am trying some angular JS examples but i stuck in the above error. Please anyone help me to resolve this issue.

 <html>
    <head>
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
     </head>
   <body>
  <div ng-app="mainApp" ng-controller="MyCtrl">
   <table border="0">
    <tr> <td> First Name : </td> <td> <input type="text" ng-model="st.fname"> </td> </tr>
    <tr> <td> Last Name : </td> <td> <input type="text" ng-model="st.lname">               </td> </tr>
   <tr> <td> Full Name : </td> <td> {{ st.fullname() }} </td> </tr>
    <tr> <td> Subjects : </td></tr>
   <table>
     <tr>
      <th> Name </th>
      <th> Marks </th>
    </tr>
    <tr ng-repeat="subject in st.subjects">
      <td>{{ subject.name}} </td>
      <td>{{ subject.marks}} </td>
    </tr>
   </table>
  </tr>
  </table>
  </td>
   </div>

   <script>
    var mainApp = angular.model('mainApp');
    mainApp.controller('MyCtrl', function($scope) 
    {
     $scope.st = {
    fname : "Naveen",
    lname : "Kumar",
    subjects: [
    {name: 'Physics', marks: 70},
    {name: 'Mthamatics', marks: 50},
    {name: 'Chemistry', marks: 80}
    ],
    fullname: function()
     {
       var studentObject = $scope.st;
       return studentObject.fname + " " + studentObject.lname;
     } 
    };
   });
  </script>
</body>

After Executing the it throws error.

Uncaught TypeError: angular.model is not a function

its module not model, var mainApp = angular.module('mainApp', []); — Kalhan
– Kalhan, Commented May 5, 2015 at 11:28
from a post I read yesterday I believe you also need to put an array after this []. It should look like this var mainApp = angular.module('mainApp', []); — Paul Fitzgerald
– Paul Fitzgerald, Commented May 5, 2015 at 11:29

carton · Accepted Answer · 2015-05-05 11:38:04Z

1

there is one space between your first ng- model . :)

Edit: I don't know why i get negative vote but this line is wrong

    <td> <input type="text" ng-  model="st.fname"></td>

You have to delete spaces... this code could be better.

    <td> <input type="text" ng-model="st.fname"></td>

edited May 5, 2015 at 11:38

answered May 5, 2015 at 11:29

carton

1,1689 silver badges17 bronze badges

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

Comments

vamsikrishnamannem · Accepted Answer · 2015-05-05 12:34:17Z

You should use the table tages proper way and Change var myApp = angular.module('myApp', []);

<!DOCTYPE html>
<html >
  <head>
    <script  src="http://code.angularjs.org/1.2.7/angular.js"></script>
  </head>
  <body>
  <div ng-app="myApp" ng-controller="MyCtrl">
   <table border="0">
    <tr> <td> First Name : </td> <td> <input type="text" ng-model="st.fname"> </td> </tr>
    <tr> <td> Last Name : </td> <td> <input type="text" ng-model="st.lname"></td> </tr>
    <tr> <td> Full Name : </td> <td> {{ st.fullname() }} </td> </tr>
    <tr> <td> Subjects : </td></tr>
    <tr>
      <th> Name </th>
      <th> Marks </th>
    </tr>
    <tr ng-repeat="subject in st.subjects">
      <td>{{ subject.name}} </td>
      <td>{{ subject.marks}} </td>
    </tr>
  </table>
  </div>
    <script>
      var myApp = angular.module('myApp', []);

     myApp.controller('MyCtrl', function ($scope) {

     $scope.st = {
    fname : "Naveen",
    lname : "Kumar",
    subjects: [
    {name: 'Physics', marks: 70},
    {name: 'Mthamatics', marks: 50},
    {name: 'Chemistry', marks: 80}
    ],
    fullname: function()
     {
       var studentObject = $scope.st;
       return studentObject.fname + " " + studentObject.lname;
     } 
    };
  });
    </script>
  </body>

</html>

Working example see here

Collectives™ on Stack Overflow

Uncaught TypeError: angular.model is not a function in Angular JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related