javascript - AngularJS MVC4 不适用于 ngResource

Question

我是 Angular 的新手。我正在处理的演示项目不喜欢我对使用 ngResource 的更改（而不是 $http 或 $q 承诺语法）

当我单击下面 Registration.html 中的 Courses 链接时，它开始一遍又一遍地调用角度控制器，直到浏览器崩溃。（还有一点奇怪的是 Registration.html 页面的内容一遍又一遍地加载到 ng-view div 中）

预先感谢您的协助。

以下是我认为与问题相关的部分。

Web.config 摘录

  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <handlers>
      <remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" />
      <remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" />
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" />
      <add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>
    <rewrite>
      <rules>
        <rule name="Registration" stopProcessing="true">
          <match url="^Registration"/>
          <action type="Rewrite" url="Registration.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

全球.asax.vb

Imports System.Web.Http
Public Class MvcApplication
    Inherits System.Web.HttpApplication

    Sub Application_Start()
        AreaRegistration.RegisterAllAreas()

        WebApiConfig.Register(GlobalConfiguration.Configuration)
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters)
        RouteConfig.RegisterRoutes(RouteTable.Routes)
    End Sub
End Class

WebApiConfig.vb

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web.Http
Imports Newtonsoft.Json.Serialization

Public Class WebApiConfig
    Public Shared Sub Register(ByVal config As HttpConfiguration)
        config.Routes.MapHttpRoute( _
            name:="DefaultApi", _
            routeTemplate:="api/{controller}/{id}", _
            defaults:=New With {.id = RouteParameter.Optional} _
        )

        Dim jsonFormatter = GlobalConfiguration.Configuration.Formatters.JsonFormatter
        jsonFormatter.SerializerSettings.ContractResolver = New CamelCasePropertyNamesContractResolver
    End Sub
End Class

路由配置.vb

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.Mvc
Imports System.Web.Routing
Public Class RouteConfig
    Public Shared Sub RegisterRoutes(ByVal routes As RouteCollection)
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}")
        routes.MapRoute( _
            name:="Default", _
            url:="{controller}/{action}/{id}", _
            defaults:=New With {.controller = "Home", .action = "Index", .id = UrlParameter.Optional} _
        )
    End Sub
End Class

...现在是 Angular 的东西。我的主页称为 Registration.html 这个演示站点与学生班级注册有关——因此名称为 Registration.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="registrationModule">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>College Registration</title>

        <!--------- Javascript Libraries --------->
        <script src="Scripts/UtilityJS/jquery-2.1.1.js"></script>       
        <script src="Scripts/UtilityJS/angular.js"></script>
        <script src="Scripts/UtilityJS/angular-resource.js"></script>
        <script src="Scripts/UtilityJS/angular-route.js"></script>
        <script src="Scripts/UtilityJS/bootstrap.js"></script>

        <!--------- Application Libraries --------->
        <script src="Scripts/registration-module.js"></script>

        <!--------- CSS --------->
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <link href="Content/bootstrap-slate.min.css" rel="stylesheet" />

        <!--------- Module Specific JS Libraries --------->
        <script src="Scripts/Courses/courses-controller.js"></script>
        <script src="Scripts/Courses/courses-repository.js"></script>
        <script src="Scripts/Instructors/instructors-controller.js"></script>
        <script src="Scripts/Instructors/instructors-repository.js"></script>
        <script src="Scripts/Accounts/accounts-controller.js"></script>
        <script src="Scripts/Accounts/accounts-repository.js"></script>

    </head>

<body>
    <div class="container">
        <div class="row">
            <div class="navbar navbar-default">
                <div class="nabar-header">
                    <ul class="nav navbar-nav">
                        <li><span class="navbar-brand">Registration</span></li>
                    </ul>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="/Registration/Courses">Browse Catalog</a></li>
                        <li><a href="/Registration/Instructors">Browse Instructors</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="/Registration/CreateAccount">Create Account</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div ng-view></div>
    </div>
</body>
</html>

为了简洁起见，我会将所有Javascript添加到一个块中，但它们包含在 Registration.html 部分中列出的单独文件中。

var registrationModule = angular.module('registrationModule', ['ngRoute', 'ngResource'])
    .config(function ($routeProvider, $locationProvider) {
        $routeProvider.when('/Registration/Courses', { templateUrl: 'Templates/Courses.html', controller: 'CoursesController' });
        $routeProvider.when('/Registration/Instructors', { templateUrl: 'Templates/Instructors.html', controller: 'InstructorsController' });
        $routeProvider.when('/Registration/CreateAccount', { templateUrl: 'Templates/CreateAccount.html', controller: 'AccountController' });
        $locationProvider.html5Mode(true);
    });


registrationModule.controller("CoursesController", function ($scope, courseRepository) {
    $scope.courses = courseRepository.get();
});

registrationModule.factory('courseRepository', function ($resource) {
    return {
        get: function () {
            return $resource('/api/Courses').query()
        }
    }
});

registrationModule.controller("InstructorsController", function ($scope, instructorRepository) {
    $scope.instructors = instructorRepository.get();

});

registrationModule.factory('instructorRepository', function ($resource) {
    return {
        get: function () {
            return $resource('api/Instructors').query();
        }
    }
});

这是api/Courses的结果

<ArrayOfCourseVm xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.datacontract.org/2004/07/AngularTest3">
<CourseVm>
<Instructor>Ann Souloff</Instructor>
<Name>Intro to Comp-Sci</Name>
<Number>MIS101</Number>
</CourseVm>
<CourseVm>
<Instructor>Howard Meyers</Instructor>
<Name>Pascal Post-term</Name>
<Number>MIS201</Number>
</CourseVm>
<CourseVm>
<Instructor>Gary Baney</Instructor>
<Name>Data Structures using C</Name>
<Number>MIS301</Number>
</CourseVm>
</ArrayOfCourseVm>

这不应该是相关的，但这是我的Templates/Courses.html文件

<div class="row">
    <div class="span10">
        <h2>Courses</h2>
    </div>
</div>

<div class="row">
    <div class="span10">
        <table class="table table-condensed table-hover">
            <tr>
                <th>Course</th>
                <th>Course Name</th>
                <th>Instructor</th>
            </tr>
            <tr ng-repeat="course in courses">
                <td>{{course.number}}</td>
                <td>{{course.name}}</td>
                <td>{{course.instructor}}</td>
            </tr>
        </table>
    </div>
</div>

javascript - AngularJS MVC4 不适用于 ngResource

0 回答 0

Related

Reference