I'm new to Angular. The demo project I'm working on does not like my changes to use ngResource (instead of the $http or $q promise syntax)
When I click on the Courses link in the Registration.html below it begins calling the angular controller over and over until the browser crashes. (also a bit of an oddity is the content of the Registration.html page is loaded over and over again into the ng-view div)
Thank you in advance for your assistance.
Here are the pieces I think are relevant to the problem.
Web.config excerpt
<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>
Global.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
RouteConfig.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
...and now for the Angular stuff. My main page is called Registration.html This demo site has to do with a Student Class Registration -- thus the names 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>
and for the sake of brevity I will add all the Javascript into one block but they are contained in separate files listed in the Registration.html section.
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();
}
}
});
and here's the results of the 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>
This shouldn't be relevant but here's my Templates/Courses.html file
<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>
