SyntaxError：意外的標記`<` - AngularJS應用程序不能正常工作

我目前正在使用MVC的Wcf服務。我試圖通過使用AngularJS和MVC Framework來使用我的wcf服務。我嘗試使用wcf與AngularJS和mvc進行插入，更新和刪除。我的wcf服務運行良好，但是當我在谷歌瀏覽器中運行AngularJS應用程序時，它不會在網站上顯示任何數據，我無法進行插入，更新和刪除操作。我啓動了開發者工具和它顯示下面的錯誤..SyntaxError：意外的標記`<` - AngularJS應用程序不能正常工作

d.sitespeeds.com/:2 Uncaught SyntaxError: Unexpected token < 
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)

我還添加了必需的AngularJS的JavaScript Packages.Here是我AngularJS插入，更新和刪除操作的代碼。 wcf服務在本地主機上可用，編號爲50028.服務的名稱是學生服務。模塊的名稱是RESTClientModule，並向控制器註冊。

/// <reference path="../angular.min.js" /> 
    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; 
    } 

});

}）;

這裏是HTML代碼....

<html data-ng-app="RESTClientModule"> 
    @{ 
    ViewBag.Title = "Manage Student Information using AngularJs, WCF REST & MVC4"; 
} 
<body> 
    <table id="tblContainer" data-ng-controller="CRUD_AngularJs_RESTController"> 
     <tr> 
      <td> 
       <table style="border: solid 2px Green; padding: 5px;"> 
        <tr style="height: 30px; background-color: skyblue; color: maroon;"> 
         <th></th> 
         <th>ID</th> 
         <th>Name</th> 
         <th>Email</th> 
         <th>Class</th> 
         <th>Year</th> 
         <th>City</th> 
         <th>Country</th> 
         <th></th> 
         <th></th> 
        </tr> 
        <tbody data-ng-repeat="stud in Students"> 
         <tr> 
          <td></td> 
          <td><span>{{stud.StudentID}}</span></td> 
          <td><span>{{stud.Name}}</span></td> 
          <td><span>{{stud.Email}}</span></td> 
          <td><span>{{stud.Class}}</span></td> 
          <td><span>{{stud.EnrollYear}}</span></td> 
          <td><span>{{stud.City}}</span></td> 
          <td><span>{{stud.Country}}</span></td> 
          <td> 
           <input type="button" id="Edit" value="Edit" data-ng-click="get(stud)" /> 
          </td> 

          <td> 
           <input type="button" id="Delete" value="Delete" data-ng-click="delete(stud)" /> 
          </td> 
         </tr> 
        </tbody> 
       </table> 

      </td> 
     </tr> 
     <tr> 
      <td> 
       <div style="color: red;">{{Message}}</div> 
       <table style="border: solid 4px Red; padding: 2px;"> 
        <tr> 
         <td></td> 
         <td> 
          <span>Student ID</span> 
         </td> 
         <td> 
          <input type="text" id="StudentID" readonly="readonly" data-ng-model="StudentID" /> 
         </td> 
        </tr> 
        <tr> 
         <td></td> 
         <td> 
          <span>Student Name</span> 
         </td> 
         <td> 
          <input type="text" id="sName" required data-ng-model="Name" /> 
         </td> 
        </tr> 
        <tr> 
         <td></td> 
         <td> 
          <span>Email</span> 
         </td> 
         <td> 
          <input type="text" id="sEmail" required data-ng-model="Email" /> 
         </td> 
        </tr> 
        <tr> 
         <td></td> 
         <td> 
          <span>Class</span> 
         </td> 
         <td> 
          <input type="text" id="sClass" required data-ng-model="Class" /> 
         </td> 
        </tr> 
        <tr> 
         <td></td> 
         <td> 
          <span>Enrollement Year</span> 
         </td> 
         <td> 
          <input type="text" id="sEnrollYear" required data-ng-model="EnrollYear" /> 
         </td> 
        </tr> 
        <tr> 
         <td></td> 
         <td> 
          <span>City</span> 
         </td> 
         <td> 
          <input type="text" id="sCity" required data-ng-model="City" /> 
         </td> 
        </tr> 
        <tr> 
         <td></td> 
         <td> 
          <span>Country</span> 
         </td> 
         <td> 
          <input type="text" id="sCountry" required data-ng-model="Country" /> 
         </td> 
        </tr> 
        <tr> 
         <td></td> 
         <td></td> 
         <td> 
          <input type="button" id="save" value="Save" data-ng-click="save()" /> 

          <input type="button" id="Clear" value="Clear" data-ng-click="clear()" /> 
         </td> 
        </tr> 
       </table> 

      </td> 
     </tr> 

    </table> 
</body> 
</html> 
<script src="~/Scripts/MyScripts/Modules.js"></script> 
<script src="~/Scripts/angular.js"></script> 
<script src="~/Scripts/angular.min.js"></script>

這裏是控制器

public class StudentController : Controller 
{ 
    // GET: Student 
    public ActionResult Index() 
    { 
     return View(); 
    } 
}

有BundleConfig

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")); 
    } 
}

}

這裏是截屏當我運行Applica時...

來源

2017-08-17 Rasel

刪除''因爲您已經擁有''不止一次。另外，在主體之前的'head'標籤內加載'angularjs'。 –

@Ephraim我確實刪除了它，但它仍然顯示這個錯誤？o = 3＆g = EC0825C4-90A4-2692-D257-CD2C2B565912＆s = 1A2C77E8-0498-4A11-B8B8-D740DBEC71C4＆z = 1403834305：2 Uncaught語法錯誤：意外的標記< – Rasel

@以法蓮非常感謝您的建議 – Rasel

您沒有正確加載您的應用程序。

如果<script src="~/Scripts/MyScripts/Modules.js"></script>包含您的RESTClientModule那麼您應該在<head/>標記中加載像這樣的腳本。

<head> 
    <title>@ViewBag.Title</title> 
    <script src="~/Scripts/angular.min.js"></script> 
    <script src="~/Scripts/MyScripts/Modules.js"></script> 
</head>

加載角度庫後始終加載您的模塊。

編輯：

這是我如何解決你的問題。

前Modules.js

Modules.js刪除調用_Layout.cshtml內_ViewStart.cshtml

新增angular.min.js和Modules.js的<head></head>標籤加載angular.min.js內

/// <reference path="../angular.min.js" /> 
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; 
     } 

    }); 

})();

Index.cshtml/Main View

<html data-ng-app="RESTClientModule"> 
<head title="ASAS"> 
    <title></title> 
    <script src="~/Scripts/angular.min.js"></script> 
    <script src="~/Scripts/MyScripts/Modules.js"></script> 
</head> 
<body> 
    <table id="tblContainer" data-ng-controller="CRUD_AngularJs_RESTController"> 
     <tr> 
      <td> 
       <table style="border: solid 2px Green; padding: 5px;"> 
        <tr style="height: 30px; background-color: skyblue; color: maroon;"> 
         <th></th> 
         <th>ID</th> 
         <th>Name</th> 
         <th>Email</th> 
         <th>Class</th> 
         <th>Year</th> 
         <th>City</th> 
         <th>Country</th> 
         <th></th> 
         <th></th> 
        </tr> 
        <tbody data-ng-repeat="stud in Students"> 
         <tr> 
          <td></td> 
          <td><span>{{stud.StudentID}}</span></td> 
          <td><span>{{stud.Name}}</span></td> 
          <td><span>{{stud.Email}}</span></td> 
          <td><span>{{stud.Class}}</span></td> 
          <td><span>{{stud.EnrollYear}}</span></td> 
          <td><span>{{stud.City}}</span></td> 
          <td><span>{{stud.Country}}</span></td> 
          <td> 
           <input type="button" id="Edit" value="Edit" data-ng-click="get(stud)" /> 
          </td> 
          <td> 
           <input type="button" id="Delete" value="Delete" data-ng-click="delete(stud)" /> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <div style="color: red;">{{Message}}</div> 
       <table style="border: solid 4px Red; padding: 2px;"> 
        <tr> 
         <td></td> 
         <td> 
          <span>Student ID</span> 
         </td> 
         <td> 
          <input type="text" id="StudentID" readonly="readonly" data-ng-model="StudentID" /> 
         </td> 
        </tr> 
        <tr> 
         <td></td> 
         <td> 
          <span>Student Name</span> 
         </td> 
         <td> 
          <input type="text" id="sName" required data-ng-model="Name" /> 
         </td> 
        </tr> 
        <tr> 
         <td></td> 
         <td> 
          <span>Email</span> 
         </td> 
         <td> 
          <input type="text" id="sEmail" required data-ng-model="Email" /> 
         </td> 
        </tr> 
        <tr> 
         <td></td> 
         <td> 
          <span>Class</span> 
         </td> 
         <td> 
          <input type="text" id="sClass" required data-ng-model="Class" /> 
         </td> 
        </tr> 
        <tr> 
         <td></td> 
         <td> 
          <span>Enrollement Year</span> 
         </td> 
         <td> 
          <input type="text" id="sEnrollYear" required data-ng-model="EnrollYear" /> 
         </td> 
        </tr> 
        <tr> 
         <td></td> 
         <td> 
          <span>City</span> 
         </td> 
         <td> 
          <input type="text" id="sCity" required data-ng-model="City" /> 
         </td> 
        </tr> 
        <tr> 
         <td></td> 
         <td> 
          <span>Country</span> 
         </td> 
         <td> 
          <input type="text" id="sCountry" required data-ng-model="Country" /> 
         </td> 
        </tr> 
        <tr> 
         <td></td> 
         <td></td> 
         <td> 
          <input type="button" id="save" value="Save" data-ng-click="save()" /> 
          <input type="button" id="Clear" value="Clear" data-ng-click="clear()" /> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

_ViewStart。CSHTML

@{ 
    Layout = null;//"~/Views/Shared/_Layout.cshtml"; 
}

輸出：

P.S.在嘗試合併這兩者之前，先嚐試先理解ASP.NET MVC和AngularJS的組件。

來源

2017-08-17 02:08:11

我沒有添加HTML頁面我只是添加從控制器的視圖 – Rasel

我更新了我的問題與所有信息 – Rasel

@Rasel我說因爲有一個' html data-ng-app =「RESTClientModule」>'標記在您的示例代碼上，但顯然沒有**應用程序名稱**和菜單（基於屏幕截圖），據推測它位於'\ Views \ Shared \ _Layout.cshtml '這是在'\ Views \ _ViewStart.cshtml'內設置的。你的捆綁很好，除非你通過捆綁加載角度，否則它與角度無關。 –

SyntaxError：意外的標記`<` - AngularJS應用程序不能正常工作

回答

相關問題