Select .state on page reload angularjs(using angular-ui-router)

Question

I am developing a ASP.NET MVC 5 application. I am loading a partial view through angular 'ui.router' on a div in a parent page. Routing is working great until I refresh the page - than a partial view is loading on a whole page but I want it to still load as a partial.

This is my code. A parent view, FirstPage.cshtml:

<html ng-app="myApp">
<head>
    <base href="/">
    <title>First Page</title>
    <script src="/Scripts/Angular/angular.js"></script>
    <script src="/Scripts/Angular/angular-ui-router.js"></script>
    <script src="/Scripts/app.js"></script>
</head>
<body>
    <h1>First Page</h1>
    <ul id="myMenu">
        <li ui-sref="customer">Customer</li>
    </ul>
    <div ui-view="containerOne"></div>
</body>
</html>

This is my app.js:

var myApp = angular.module("myApp", ['ui.router']);

var proposalConfig = function ($stateProvider, $locationProvider) {

$locationProvider.hashPrefix('!').html5Mode(true);

$stateProvider
    .state('customer', {
        url: 'Proposal/Customers',
        views: {
            "containerOne": {
                templateUrl: '/Proposal/Customers'
            }
        }
    });
}

proposalConfig.$inject = ['$stateProvider', '$locationProvider'];

myApp.config(proposalConfig);

My RouteConfig.cs:

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

routes.MapRoute(
    name: "ProposalCustomers",
    url: "Proposal/Customers",
    defaults: new { controller = "Proposal", action = "Customers" });

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

My ProposalController.cs:

public ActionResult Customers()
{
    return View();
}

public ActionResult FirstPage()
{
    return View();
}

My Views/Proposal/Customers.cshtml:

<h2>Customer list</h2>

I hope my problem is clear.

EDIT:

I changed my RouteConfig.cs following the solution from this article:

http://www.codeproject.com/Articles/806500/Getting-started-with-AngularJS-and-ASP-NET-MVC-P

to have a default route like this:

routes.MapRoute(
            name: "Default",
            url: "{*url}",
            defaults: new { controller = "Proposal", action = "FirstPage" }

When I refresh a page that has a route exactly like my controller/action, it still loads that specific route on a whole page instead as a partial. If I change a .state url to something else page refresh is working. But still if I put manually a controller/action path in the URL, it shows a view on a whole page instead as a partial.

Is there a way to avoid this?

Pankaj Parkar · Accepted Answer · 2015-03-06 10:49:23Z

0

You need to change you ng-view to ui-view as you are using angular $stateProvider not angular $routeProvider

HTML

<body>
    <h1>First Page</h1>
    <ul id="myMenu">
        <li ui-sref="customer">Customer</li>
    </ul>
    <div ui-view=""></div>
</body>

You stateProvider should be change which is currently using single view and you declared it as like you are using nested-views

Config

var myApp = angular.module("myApp", ['ui.router']);

var proposalConfig = function($stateProvider, $locationProvider, $urlRouterProvider) {

    $locationProvider.hashPrefix('!').html5Mode(true);

    $urlRouterProvider.otherwise('/Proposal/Customers'); //default redirection if no route matched

    $stateProvider.state('customer', {
        url: '/Proposal/Customers',
        templateUrl: '/Proposal/Customers',
        controller: 'someController' //if you want
    });

}

proposalConfig.$inject = ['$stateProvider', '$locationProvider'];

myApp.config(proposalConfig);

Hope this could help you, Thanks.

edited Mar 6, 2015 at 10:49

answered Mar 6, 2015 at 10:37

Pankaj Parkar

136k23 gold badges241 silver badges306 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kiriz Over a year ago

I mistyped here...in my solution i have ui-view and it is not working.

Paul · Accepted Answer · 2015-03-09 00:31:30Z

0

Ok, so what I'm guessing is happening is you mapped a route in your MVC application to serve the same route as your angular application, in this instance, you mapped 'Proposal/Customers' in your MVC router and in your Angular-UI-Router.

So what is happening is that if you're already in your Angular application, the Angular router has control and as you navigate around, it is loading the template as a child template and putting the HTML into the correct location. When you refresh, you're sending that route to the MVC router, though, and it's serving the HTML as the page.

EDIT

Forgot to mention, this is happening because you've got html5 routing turned on.

edited Mar 9, 2015 at 0:31

answered Mar 7, 2015 at 5:17

Paul

2862 silver badges9 bronze badges

2 Comments

kiriz Over a year ago

Yes I know whats the problem, but I don't know the way to solve it. :) Do you know? :)

Paul Over a year ago

The only solution I know of is to either force a mapping to your AngularJS starting point in your MVC routes (i.e. change your MVC routing) or not use HTML5 routing in your AngularJS App. If you use a # symbol, MVC automatically ignores it. If there is a different way around it, I don't know it at the moment. Maybe somebody with some intricate knowledge of MVC route mapping can recommend a viable solution.

Collectives™ on Stack Overflow

Select .state on page reload angularjs(using angular-ui-router)

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related