SyntaxError：意外的标记`＆lt;` - AngularJS应用程序无法正常工作

时间：2017-08-17 00:44:34

标签： javascript angularjs asp.net-mvc wcf

我目前正在使用MVC进行Wcf服务。我试图通过使用AngularJS和MVC Framework来使用我的wcf服务。我正在尝试使用带有AngularJS和mvc的wcf进行插入，更新和删除。我的wcf服务工作得很好，但是当我在谷歌浏览器中运行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包。这是我的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"));
    }
}

}

以下是我运行应用程序时的屏幕截图... Please click here to see the out put

1 个答案:

答案 0 :(得分：1)

您未正确加载应用程序。

如果<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>

加载角度库后，始终加载模块。

编辑：

以下是我解决问题的方法。

  • 删除了对_Layout.cshtml
    • 内_ViewStart.cshtml的来电
  • 在angular.min.js代码
    • 中添加了Modules.js和<head></head>
  • 在angular.min.js
    • 之前加载Modules.js

Modules.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";
}

输出：

enter image description here

P.S。在尝试合并两者之前，首先尝试先了解ASP.NET MVC和AngularJS的组件。

相关问题
最新问题