0

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>


}
3
  • @georgeawg, I did , its not working. Lets say I give Addresses/MainView as href value in base. then when in url I am typing / after that and hitting enter, its giving me error that no such page exists. Commented Oct 6, 2019 at 19:00
  • See if the code works without HTML5 mode, i.e. $locationProvider.html5Mode(false); Commented Oct 8, 2019 at 17:21
  • initially I had written the config without the $locationProvider.html5mode set to true. Then I kept changing hoping that some combination would work, and this one worked. Commented Oct 8, 2019 at 17:27

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.