error when refreshing page angularjs ui router

Question

I'm new to angularjs and i'm making a website using ASP.NET MVC and AngularJs.I used angularjs ui router for route from one page to another.
With ui-sref tag every thing is ok but when user refreshes the browser page or enter url it fails to match to a state.
The question is how to set states and what actions needed in my controllers. here are my codes.if any other code is required tell me.

my controller

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

    public ActionResult NewsListPage()
    {
        return Redirect("#NewsListPage");
    }

    public ActionResult NewsDetailPage(int? newsId)
    {
        return Redirect("#NewsDetailPage");
    }

my main angular file including module creation and config

var app = angular.module('abtinApp', ['ui.router']);

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

    $stateProvider
        .state('A',
        {
            url: '/News/NewsListPage',
            templateUrl: '/Angular/NewsListPage'
        })
        .state('B',
        {
            url: '/News/NewsDetailPage/:newsId',
            templateUrl: '/Angular/NewsDetailPage'
        })
        .state('C',
        {
            url: '^/News/NewsDetailPage/:newsId',
            templateUrl: '/Angular/NewsDetailPage'
        });

    $urlRouterProvider.otherwise('/News/NewsListPage');
    $locationProvider.html5Mode({ enabled: true, requireBase: false });

}
]);

my index.cshtml

...
<div ng-app="abtinApp">
            <a ui-sref=".A">Main</a>
            <a ui-sref=".B">Detail</a>
            <div ui-view></div>
        </div>
...

angular controller

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

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

and NewsDetailPage.cshtml

<div ng-controller="NewsDetailController">
    <h3>Details</h3>

    <h3>{{newsId}}</h3>
</div>

and NewsListPage.cshtml

<h3>News</h3>
<div ng-controller="NewsController">
<div ng-repeat="newsItem in newsToShow">
<h3>
    <a ui-sref="B({newsId: '{{newsItem.Id}}'})">   {{newsItem.Title}}</a>
</h3>
<p>
    {{newsItem.NewsSummary}}
</p>
</div>
</div>

there is nothing especial in my angular controllers. thank you.

github.com/angular-ui/ui-router/wiki/…. Specifically, either the IIS rewrites in web.config, or the C# rewrites in Global.asax. — Claies
also, you should be aware of the complications of using requireBase: false; Without a <base> tag, the initial URL will need to match exactly in every instance, making relative URLs relative to the server instead of relative to other pages within the app. — Claies
do you have an understanding of how html5Mode works? The code in the ui-router FAQ is a sample of possible ways to configure your server, but you should have some understanding of what the code is trying to accomplish.... — Claies
@Claies i don't understand what to do with that link,could you explain? — user3903656

Unknown Unknown · Accepted Answer · 2015-09-12T16:35:37

After searching a lot and wasting some time,i found out by removing
$locationProvider.html5Mode({ enabled: true, requireBase: false });
every thing is fine but the new problem will be the ugly urls that is not important to me.
still any other answer will be appreciated.

error when refreshing page angularjs ui router

1 Answers