Reputation: 65
I am trying to convert from MVC routing to Angular Routing for one of the MVC Controller using routeProvider. No matter what combination of #, #! or / I use I am not getting routing to work.
I have a common html file, where I am attempting to load views in ngview directive.Below is my MainView.html. It is located in Views/Addresses folder in MVC project.As seen in routeprovider , when '/' I am attemptiing to load Addresses/Index.html. To avoid conflict with MVC routing I created a seperate folder and created a copy of Index.html.However, when I am click on the link where MainView is loaded, Index.html is not getting loaded. I have tried changing base href to root ('/') and also to the main html file where I am trying to load all the other views.Then when I am manually typing MainView#!/ in the url, its still not loading Index.html. However ,when I added an Otherwise in the routeprovider which redirects to '/', its correctly loading required page.
@{
ViewBag.Title = "View";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div ng-app="app">
<div ng-view>
</div>
</div>
@section Scripts{
<script>
var app=angular.module('app',['ngRoute']);
app.config(function ($routeProvider,$locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/", {
templateUrl: "Experimental/Addresses/Index.html",
controller: "AddressList"
}).when("/Addresses/Index", {
templateUrl: "Experimental/Addresses/Index.html",
controller: "AddressList"
})
.when("/Addresses/Edit/:id", {
templateUrl: "Experimental/Addresses/Edit.html",
controller: "EditAddress"
})
.otherwise({
redirectTo:"/"
});
});
app.controller('AddressList', ['$scope', '$http', function ($scope, $http) {
$scope.model = [];
$http.get('/Addresses/GetAddresses').then(function (response) {
if (response != null || response != "undefined") {
$scope.model = response.data;
}
});
}]);
</script>
}
Upvotes: 0
Views: 87