CODEWITHSUNDEEP
javascriptasp.netangularjsasp.net-mvc
Janshair Khan
Janshair Khan

Reputation: 2687

ASP.NET 5 Routing with AngularJS Routing

I'm developing an application with ASP.NET 5 with AngularJS. I'm using basic client side HTML routing support provided by Angular. I've successfully implemented Angular Routing, the default routing in Startup class is

app.UseMvc(routes => 
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");
        });

Here is my Angular Routing

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
    when('/', {
        templateUrl: 'static/home.html',
        controller: 'AppController'
    }).
    when('/about', {
        templateUrl: 'static/about.html',
        controller: 'AppController'
    }).
    when('/contact', {
        templateUrl: 'static/contact.html',
        controller: 'AppController'
    }).
    when('/tutorial', {
        templateUrl: 'static/tutorial.html',
        controller: 'AppController'
    }).
    otherwise({
        redirectTo: '/'
    });

    $locationProvider.html5Mode(true);
 }]);

It all works fine, but when I create another action in the same controller and wants to redirect to that action through URL, it redirect it to the same action i.e. Index

Here is my code for HomeController

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }

    public IActionResult Web()
    {
        return View();
    }
}

Routing happens in Index, but can't navigate to Web Action. What is the problem that I'm confronting. Thanks.

Upvotes: 1

Views: 1276

Answers (3)

Andrew
Andrew

Reputation: 1534

I think yaht the problem is that your application does not know anything about your Web method. To solve this you can:

1) use attribute routing, and

2) write direct route in your route configuration method.

Also check your web.config file for redirection in rewrite node of system.webServer section or any other redirection configurations

P.S. Be noted that if you redirects to another page your angular application will reconfigured and restarted. It takes some time. You should not use redirections ang all other page reloading methods if you want your app will be really cool. Try think in "angular" way. If you want to change part of the main content - angular will do it with routing. If you want to load some additional content and you want it looks like http://host/controller/method/submethod1/submethod2 url in browser - angular also can do it for you. You just need to place get() method inside your angular controller as the first step. In this case when angular will be resolving this controller it calls your get() method and loads data from server. So, you will have fast apllication with actual content always.

P.P.S. Try to use angular-ui-routing instead of default ng-route. ng-route is good, but it can not support subrouting well and also it has some other issues. angular-ui-routing solves all these messy things

Upvotes: 2

MrRobot614
MrRobot614

Reputation: 39

Try This:

routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );

Then also try this below your config:

   .controller('RootController', ['$rootScope', '$scope', '$route', '$routeParams', '$location', '$http',
    function ($rootScope, $scope, $route, $routeParams, $location, $http) {

        $scope.$on('$routeChangeSuccess', function (e, current, previous) {
            $scope.activeViewPath = $location.path();
        });

    }]);

Hope this will help. =)

Upvotes: 2

Abhilash Augustine
Abhilash Augustine

Reputation: 4208

Try this one to register your route,

routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );

Upvotes: 2

Related Questions