ASP.NET MVC AngularJS SPA URL路由无法解析为正确的视图

时间:2013-12-28 01:07:28

标签: asp.net-mvc angularjs routing

我正在尝试将URL路由跳转到角度spa设置中的正确页面/视图

我的索引页设置如下:

<html data-ng-app="app">
  <body>
    <div>
      <div data-ng-include="'/app/layout/shell.html'"></div>
    </div>
  </body>
</html>

如下的shell页面:

<div data-ng-controller="ShellCtrl as vm">
<header>
    <div data-ng-include="'/app/layout/topnav.html'"></div>
</header>
<section id="content" class="content">
    <div data-ng-view></div>
</section>
</div>

topnav.html包含一个导航栏,链接指向不同的页面,如:

 <ul class="nav navbar-nav"> 
            <li class=""><a href="#/about"><span class="glyphicon glyphicon-info-sign"></span> About</a></li>
        </ul>

现在,当我点击“关于”链接时,它会在内容部分加载我的关于页面,就像它应该创建URL一样

http://localhost/#/about"

我的routeprovider设置如下:

app.config(['$routeProvider', '$locationProvider',
  function ($routeProvider, $locationProvider) {
      //$locationProvider.html5Mode(true);

      $routeProvider.
       when('/', {
           templateUrl: 'app/partials/home.html',
           controller: "HomeCtrl"
       }).
        when('/about', {
            templateUrl: 'app/partials/about.html',
            controller: 'AboutCtrl'
        }).
        when('/contact', {
            templateUrl: 'app/partials/contact.html'
        }).
        otherwise({
            redirectTo: '/'
        });

  }]);

现在我可以切换到我的应用程序中的页面,但每当我只是将url放入一个新窗口以“标记”到about页面时,它不起作用,它不会加载about视图。事实上,当我加载

http://localhost/  

一开始它没有加载我的家庭观点。

我是否错过了一个关键部分,因为没有获取URL路由以从URL正确加载我的视图?

2 个答案:

答案 0 :(得分:0)

请记住,如果您正在使用Angular Js,那么所有页面加载等都在index.html页面中。

如果您直接从网址加载页面,它将无法加载,因为它需要一些javascripts,如路由,配置等运行,这些都与您的索引html页面绑定。

您可以在“属性”窗口中将启动页面指定为#。

希望这能回答你的问题

答案 1 :(得分:0)

添加&#34; /&#34;在你的角度hrefs之前:

<ul class="nav navbar-nav"> 
        <li class=""><a href="/#/about"><span class="glyphicon glyphicon-info-sign"></span> About</a></li>
</ul>