GameFromScratch
GameFromScratch

Reputation: 65

AngularJS Route Provider not working in MVC application

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

Answers (0)

Related Questions