1

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.

Improve this question
9
  • github.com/angular-ui/ui-router/wiki/…. Specifically, either the IIS rewrites in web.config, or the C# rewrites in Global.asax. Commented Sep 12, 2015 at 15:24
  • 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. Commented Sep 12, 2015 at 15:29
  • @Claies : you mean i copy the c# code in my golbal.asax? Commented Sep 12, 2015 at 15:31
  • 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.... Commented Sep 12, 2015 at 15:35
  • @Claies i don't understand what to do with that link,could you explain? Commented Sep 12, 2015 at 15:36

1 Answer 1

Reset to default
1

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.

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

Comments