title: SyntaxError: Unexpected token `<` -- AngularJS Application is not working
body: <p>I am currently working Wcf service with MVC . I am trying to consume my wcf service by using AngularJS and MVC Framework.I am trying to do insert, update and delete using wcf with AngularJS and mvc . My wcf service is working nicely but when I run AngularJS Application in Google Chrome its does not display any data in website and i Can not do insert , update and delete operation. I launch the developer tools and it is showing following errors..</p>
  
  <pre><code>d.sitespeeds.com/:2 Uncaught SyntaxError: Unexpected token &lt;
  angular.js:33671 WARNING: Tried to load angular more than once.
  angular.js:4957 Uncaught Error: [$injector:modulerr] Failed to instantiate module RESTClientModule due to:
  Error: [$injector:nomod] Module 'RESTClientModule' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
  http://errors.angularjs.org/1.6.5/$injector/nomod?p0=RESTClientModule
      at http://localhost:50349/Scripts/angular.js:116:12
      at http://localhost:50349/Scripts/angular.js:2297:17
      at ensure (http://localhost:50349/Scripts/angular.js:2218:38)
      at module (http://localhost:50349/Scripts/angular.js:2295:14)
      at http://localhost:50349/Scripts/angular.js:4933:22
      at forEach (http://localhost:50349/Scripts/angular.js:410:20)
      at loadModules (http://localhost:50349/Scripts/angular.js:4917:5)
      at createInjector (http://localhost:50349/Scripts/angular.js:4839:19)
      at doBootstrap (http://localhost:50349/Scripts/angular.js:1949:20)
      at bootstrap (http://localhost:50349/Scripts/angular.js:1970:12)
  
      at http://localhost:50349/Scripts/angular.js:116:12
      at http://localhost:50349/Scripts/angular.js:2297:17
      at ensure (http://localhost:50349/Scripts/angular.js:2218:38)
      at module (http://localhost:50349/Scripts/angular.js:2295:14)
      at http://localhost:50349/Scripts/angular.js:4933:22
      at forEach (http://localhost:50349/Scripts/angular.js:410:20)
      at loadModules (http://localhost:50349/Scripts/angular.js:4917:5)
      at createInjector (http://localhost:50349/Scripts/angular.js:4839:19)
      at doBootstrap (http://localhost:50349/Scripts/angular.js:1949:20)
      at bootstrap (http://localhost:50349/Scripts/angular.js:1970:12)
  http://errors.angularjs.org/1.6.5/$injector/modulerr?
      at http://localhost:50349/Scripts/angular.js:116:12
      at http://localhost:50349/Scripts/angular.js:4957:15
      at forEach (http://localhost:50349/Scripts/angular.js:410:20)
      at loadModules (http://localhost:50349/Scripts/angular.js:4917:5)
      at createInjector (http://localhost:50349/Scripts/angular.js:4839:19)
      at doBootstrap (http://localhost:50349/Scripts/angular.js:1949:20)
      at bootstrap (http://localhost:50349/Scripts/angular.js:1970:12)
      at angularInit (http://localhost:50349/Scripts/angular.js:1855:5)
      at http://localhost:50349/Scripts/angular.js:33826:5
      at HTMLDocument.trigger (http://localhost:50349/Scripts/angular.js:3468:5)
  </code></pre>
  
  <p>I also added the required AngularJS JavaScript Packages.Here is my AngularJS code for insert, update and delete operation . The wcf service is available on localhost under the pot number 50028. The name of the service is student service. The name of module is RESTClientModule and its registered with the controller. </p>
  
  <pre><code> /// &lt;reference path="../angular.min.js" /&gt;  
     var app;
     (function () {
  app = angular.module("RESTClientModule",  []); 
  
  app.controller("CRUD_AngularJs_RESTController", function ($scope, CRUD_AngularJs_RESTService) {
  
      $scope.OperType = 1;
      //1 Mean New Entry  
  
      GetAllRecords();
      //To Get All Records  
      function GetAllRecords() {
          var promiseGet = CRUD_AngularJs_RESTService.getAllStudent();
          promiseGet.then(function (pl) { $scope.Students = pl.data },
              function (errorPl) {
                  $log.error('Some Error in Getting Records.', errorPl);
              });
      }
  
      //To Clear all input controls.  
      function ClearModels() {
          $scope.OperType = 1;
          $scope.StudentID = "";
          $scope.Name = "";
          $scope.Email = "";
          $scope.Class = "";
          $scope.EnrollYear = "";
          $scope.City = "";
          $scope.Country = "";
      }
  
      //To Create new record and Edit an existing Record.  
      $scope.save = function () {
          var Student = {
              Name: $scope.Name,
              Email: $scope.Email,
              Class: $scope.Class,
              EnrollYear: $scope.EnrollYear,
              City: $scope.City,
              Country: $scope.Country
          };
          if ($scope.OperType === 1) {
              var promisePost = CRUD_AngularJs_RESTService.post(Student);
              promisePost.then(function (pl) {
                  $scope.StudentID = pl.data.StudentID;
                  GetAllRecords();
  
                  ClearModels();
              }, function (err) {
                  console.log("Some error Occured" + err);
              });
          } else {
              //Edit the record      
              debugger;
              Student.StudentID = $scope.StudentID;
              var promisePut = CRUD_AngularJs_RESTService.put($scope.StudentID, Student);
              promisePut.then(function (pl) {
                  $scope.Message = "Student Updated Successfuly";
                  GetAllRecords();
                  ClearModels();
              }, function (err) {
                  console.log("Some Error Occured." + err);
              });
          }
      };
  
      //To Get Student Detail on the Base of Student ID  
      $scope.get = function (Student) {
          var promiseGetSingle = CRUD_AngularJs_RESTService.get(Student.StudentID);
          promiseGetSingle.then(function (pl) {
              var res = pl.data;
              $scope.StudentID = res.StudentID;
              $scope.Name = res.Name;
              $scope.Email = res.Email;
              $scope.Class = res.Class;
              $scope.EnrollYear = res.EnrollYear;
              $scope.City = res.City;
              $scope.Country = res.Country;
              $scope.OperType = 0;
          },
              function (errorPl) {
                  console.log('Some Error in Getting Details', errorPl);
              });
      }
  
      //To Delete Record  
      $scope.delete = function (Student) {
          var promiseDelete = CRUD_AngularJs_RESTService.delete(Student.StudentID);
          promiseDelete.then(function (pl) {
              $scope.Message = "Student Deleted Successfuly";
              GetAllRecords();
              ClearModels();
          }, function (err) {
              console.log("Some Error Occured." + err);
          });
      }
  });
  
  app.service("CRUD_AngularJs_RESTService", function ($http) {
      //Create new record  
      this.post = function (Student) {
          var request = $http({
              method: "post",
              url: "http://localhost:50028/StudentService.svc/AddNewStudent",
              data: Student
          });
          return request;
      }
  
      //Update the Record  
      this.put = function (StudentID, Student) {
          debugger;
          var request = $http({
              method: "put",
              url: "http://localhost:50028/StudentService.svc/UpdateStudent",
              data: Student
          });
          return request;
      }
  
      this.getAllStudent = function () {
          return $http.get("http://localhost:50028/StudentService.svc/GetAllStudent");
      };
  
      //Get Single Records  
      this.get = function (StudentID) {
          return $http.get("http://localhost:50028/StudentService.svc/GetStudentDetails/" + StudentID);
      }
  
      //Delete the Record  
      this.delete = function (StudentID) {
          var request = $http({
              method: "delete",
              url: "http://localhost:50028/StudentService.svc/DeleteStudent/" + StudentID
          });
          return request;
      }
  
  });
  </code></pre>
  
  <p>});</p>
  
  <p>Here is HTML Code....</p>
  
  <pre><code>    &lt;html data-ng-app="RESTClientModule"&gt;
      @{
      ViewBag.Title = "Manage Student Information using AngularJs, WCF REST &amp;   MVC4";
  }
  &lt;body&gt;
      &lt;table id="tblContainer" data-ng-controller="CRUD_AngularJs_RESTController"&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;table style="border: solid 2px Green; padding: 5px;"&gt;
                      &lt;tr style="height: 30px; background-color: skyblue; color: maroon;"&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;ID&lt;/th&gt;
                          &lt;th&gt;Name&lt;/th&gt;
                          &lt;th&gt;Email&lt;/th&gt;
                          &lt;th&gt;Class&lt;/th&gt;
                          &lt;th&gt;Year&lt;/th&gt;
                          &lt;th&gt;City&lt;/th&gt;
                          &lt;th&gt;Country&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                      &lt;/tr&gt;
                      &lt;tbody data-ng-repeat="stud in Students"&gt;
                          &lt;tr&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;span&gt;{{stud.StudentID}}&lt;/span&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;span&gt;{{stud.Name}}&lt;/span&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;span&gt;{{stud.Email}}&lt;/span&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;span&gt;{{stud.Class}}&lt;/span&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;span&gt;{{stud.EnrollYear}}&lt;/span&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;span&gt;{{stud.City}}&lt;/span&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;span&gt;{{stud.Country}}&lt;/span&gt;&lt;/td&gt;
                              &lt;td&gt;
                                  &lt;input type="button" id="Edit" value="Edit" data-ng-click="get(stud)" /&gt;
                              &lt;/td&gt;
  
                              &lt;td&gt;
                                  &lt;input type="button" id="Delete" value="Delete" data-ng-click="delete(stud)" /&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;div style="color: red;"&gt;{{Message}}&lt;/div&gt;
                  &lt;table style="border: solid 4px Red; padding: 2px;"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;
                              &lt;span&gt;Student ID&lt;/span&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;input type="text" id="StudentID" readonly="readonly" data-ng-model="StudentID" /&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;
                              &lt;span&gt;Student Name&lt;/span&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;input type="text" id="sName" required data-ng-model="Name" /&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;
                              &lt;span&gt;Email&lt;/span&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;input type="text" id="sEmail" required data-ng-model="Email" /&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;
                              &lt;span&gt;Class&lt;/span&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;input type="text" id="sClass" required data-ng-model="Class" /&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;
                              &lt;span&gt;Enrollement Year&lt;/span&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;input type="text" id="sEnrollYear" required data-ng-model="EnrollYear" /&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;
                              &lt;span&gt;City&lt;/span&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;input type="text" id="sCity" required data-ng-model="City" /&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;
                              &lt;span&gt;Country&lt;/span&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;input type="text" id="sCountry" required data-ng-model="Country" /&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;
                              &lt;input type="button" id="save" value="Save" data-ng-click="save()" /&gt;
  
                              &lt;input type="button" id="Clear" value="Clear" data-ng-click="clear()" /&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
  
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
   &lt;script src="~/Scripts/MyScripts/Modules.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/angular.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/angular.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Here is the Controller </p>
  
  <pre><code>public class StudentController : Controller
  {
      // GET: Student
      public ActionResult Index()
      {
          return View();
      }
  }
  </code></pre>
  
  <p>There is BundleConfig </p>
  
  <pre><code>  public class BundleConfig
  {
      // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
      public static void RegisterBundles(BundleCollection bundles)
      {
          bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                      "~/Scripts/jquery-{version}.js"));
  
          bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                      "~/Scripts/jquery.validate*"));
  
          // Use the development version of Modernizr to develop with and learn from. Then, when you're
          // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
          bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                      "~/Scripts/modernizr-*"));
  
          bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                    "~/Scripts/bootstrap.js",
                    "~/Scripts/respond.js"));
  
          bundles.Add(new StyleBundle("~/Content/css").Include(
                    "~/Content/bootstrap.css",
                    "~/Content/site.css"));
      }
  }
  </code></pre>
  
  <p>}</p>
  
  <p>Here is the screen shot When i run the Application ...
  <a href="https://i.stack.imgur.com/OeP0W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OeP0W.png" alt="Please click here to see the out put"></a></p>