I'm trying to add routing to my new application where i'm for the first time using Angular.
I have the files or file fragments as described below.
app.js
'use strict';
var app = angular.module('myApplication', ['ngResource', 'ngRoute']);
app.config(['$httpProvider', function ($httpProvider) {
//initialize get if not there
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
//disable IE ajax request caching
$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
}]);
// Setting up clientside routes.
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when(
'/account/details/:name', {
templateUrl: 'templates/accountDetails.html',
controller: 'accountDetailsController'
})
.when(
'/account', {
templateUrl: 'templates/accountOverview.html',
controller: 'accountController'
})
.when(
'/temp', {
templateUrl: 'templates/temp.html',
controller: 'noneController'
})
.otherwise({
redirectTo: '/account'
});
}]);
_Layout.cshtml
<!DOCTYPE html>
<html lang="en" ng-app="myApplication">
<head>
....
</head>
<body>
@RenderBody()
</body>
</html>
Index.cshtml
@{
ViewBag.Title = "Index";
}
<div ng-controller="AccountsController">
<a href="#/account/details/jack">Jack</a>
<div>
<div ng-view />
controllers.js
'use strict';
var app = angular.module('myApplication');
app.controller('accountsController', ['$scope', 'dataService', function ($scope, dataService) {
// Add some data retrieval here.
}]);
app.controller('accountDetailsController', ['$scope', '$routeParams', 'dataService', function ($scope, $routeParams, dataService) {
// Add some data retrieval here.
}]);
When i open the application i see a request is made to retrieve 'templates/accountOverview.html' like expected due to the 'otherwise' in the configuration of $routeprovider. The url used by this request works, i can open this url in the browser to open the file. But when Angular is opening the file Angular receives a '400 (Bad Request)'.
One big difference between the requests the the 'Accept' header. Browser request: Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8 Angular request: Accept:application/json, text/plain, /
What is going on here? Why is Angular requesting either json or plain text for it's templates and why does my server respond with a HTTP_400? How can i fix this?
Been searching for some time now but it feels like i'm the only one having this issue :(
