Fatal编程技术网
  • javascript/
  • Javascript AngularJS MVC4不使用ngResource

Javascript AngularJS MVC4不使用ngResource

javascript vb.net angularjs asp.net-mvc-4

Javascript AngularJS MVC4不使用ngResource,javascript,vb.net,angularjs,asp.net-mvc-4,ngresource,Javascript,Vb.net,Angularjs,Asp.net Mvc 4,Ngresource,我是新手。我正在进行的演示项目不喜欢使用ngResource而不是$http或$q promise语法 当我点击下面Registration.html中的Courses链接时，它开始一遍又一遍地调用angular controller，直到浏览器崩溃。 还有一点奇怪的是，Registration.html页面的内容一次又一次地加载到ng view div中 提前感谢您的帮助 以下是我认为与问题相关的部分 Web.config摘录 WebApiConfig.vb RouteConfig.vb …现

我是新手。我正在进行的演示项目不喜欢使用ngResource而不是$http或$q promise语法

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

提前感谢您的帮助

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

Web.config摘录

WebApiConfig.vb

RouteConfig.vb

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

下面是api/课程的结果

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

关于在ng视图中加载registration.html的部分很有趣。听起来url重写开始了。你能在浏览器开发工具中查看返回registration.html内容实际请求的URL吗？这很奇怪。。。这个http://localhost:61307/Registration/Templates/Courses.html 正在加载，但内容是Registration.html页面。它应该加载/Templates/Courses.html，这样以Registration开头的任何内容都会被重定向到Registration.html。这正是重写规则要做的。任何未注册的内容都将被发送到registration.html。您需要将模板移出/注册到站点的根目录中，然后将模板URL更改为“/templates/Courses.html”，等等。是的。模板已位于根目录下。如你所说，我只需添加/之前的模板。谢谢 
  <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>

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

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

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

<!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>

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

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

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