刷新页面angularjs ui路由器时出错

时间:2015-09-12 15:21:50

标签: angularjs asp.net-mvc angular-ui-router

我是angularjs的新手,我正在使用ASP.NET MVC和AngularJs制作网站。我使用angularjs ui路由器从一个页面到另一个页面的路由。
使用ui-sref标记,每件事都可以,但是当用户刷新浏览器页面或输入url时,它无法匹配状态。
问题是如何设置状态以及控制器中需要的操作。 这是我的代码。如果需要任何其他代码告诉我。

我的控制器

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

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

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

我的主角度文件,包括模块创建和配置

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 });

}
]);

我的index.cshtml

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

角度控制器

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

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

和NewsDetailPage.cshtml

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

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

和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>

我的角度控制器中没有任何特别之处。 谢谢。

1 个答案:

答案 0 :(得分:1)

经过大量搜索并浪费了一些时间,我发现了删除
$ locationProvider.html5Mode({enabled:true,requireBase:false});
一切都很好,但新问题将是对我来说不重要的丑陋网址。
还是会有任何其他答案。