ASP.NET 5 Routing Navigation with AngularJS

Question

I'm using ASP.NET 5 with AngularJS. I've 2 actions with views in MVC (Home and Web). I've 4 client routing with Angular. All of these 4 client routing happens in first view (Home). In the first view, I want an anchor link to the second action in MVC (Web). In MVC, I'm using attribute routing. I can't navigate to the 2nd action from the view 1 Home, because it uses Angular Routing and if I put an ActionLink to 2nd action it redirects me to the 1st action with first view in Angular. My code is given below

Controller:

public class HomeController : Controller
{
    [Route("{*url}")]
    public IActionResult Index()
    {
        return View();
    }

    [Route("Home/Web")]
    public IActionResult Web()
    {
        return View();
    }
}

Angular File:

app.config(["$stateProvider", "$urlRouterProvider", "$locationProvider", function ($stateProvider, $urlRouterProvider, $locationProvider) {

$urlRouterProvider.otherwise('/');

$stateProvider
    .state('home', {
        url: '/',
        templateUrl: 'static/home.html'
    })
    .state('about', {
        url: '/about',
        templateUrl: 'static/about.html'
    })
    .state('contact', {
        url: '/contact',
        templateUrl: 'static/contact.html'
    })
    .state('tutorial', {
        url: '/tutorial',
        templateUrl: 'static/tutorial.html'
    })

$locationProvider.html5Mode(true);

}]);

Here is my Startup class with default routes in MVC:

public void Configure(IApplicationBuilder app)
    {
        app.UseStaticFiles();

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

Here is my _Layout.cshtml

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="/about">About</a>
                </li>
                <li>
                    <a href="/contact">Contact</a>
                </li>
                <li>
                    <a href="/tutorial">Tutorials</a>
                </li>
                <li>
                    @Html.ActionLink("Web", "Web", "Home")
                </li>
            </ul>
        </div>

There is no server configuration file such as web.config. I'm using instead attribute routing.

Answer 1

try to use the mvc controllers from angular in the following way:

In your angular file use the template URL for referencing the mvc controller:

app.config(["$stateProvider", "$urlRouterProvider", "$locationProvider",      function ($stateProvider, $urlRouterProvider, $locationProvider) {

$urlRouterProvider.otherwise('/');

$stateProvider
.state('home', {
    templateUrl: 'home/Home'
})
.state('about', {
    templateUrl: 'home/About'
})
.state('contact', {
    templateUrl: 'home/Contact'
})
.state('tutorial', {
    templateUrl: 'home/Tutorial'
})

$locationProvider.html5Mode(true);

}]);

And return the views as partial views in the mvc controller adding the functionality that you want

public class HomeController : Controller
{
    [Route("{*url}")]
    public IActionResult Home()
    {
        return View();
    }

    [Route("Home/About")]
    public IActionResult About()
    {
        return View();
    }

    [Route("Home/Contact")]
    public IActionResult Contact()
    {
        return View();
    }

    [Route("Home/Tutorial")]
    public IActionResult Tutorial()
    {
        return View();
    }
}

Hope it helps