Javascript 当我使用AngularJS$routeProvider时，Node.js页面转换不再有效

我使用Node.js作为服务器，除非我将AngularJS添加到堆栈中，否则它完全可以正常工作，这完全破坏了我在Node.js中的所有URL。具体来说，我想在Bootstrap 3导航栏中切换选项卡的

活动

，并响应选项卡的点击，但我只希望AngularJS切换选项卡的活动/非活动，不希望AngularJS站在其他任何位置，这是我希望Node管理的

这是我的代码：

"use strict";

var MyApp = angular.module("MyApp", ["ngRoute"]);
MyApp.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider) {
    $routeProvider.
        when("/contact", {controller: MyCtrl}).
        when("/blog", {controller: MyCtrl});

    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix("!");
}]);

和控制器代码：

function MyCtrl($scope, $routeParams, $location) {
    $scope.isActive = function(viewLocation) {
        return viewLocation === $location.path();
    };
}

和HTML代码：

<div class="collapse navbar-collapse" ng-controller="MyCtrl">
  <ul class="nav navbar-nav">
    <li ng-class="{ active: isActive('/')}"><a href="/">Home</a></li>
    <li ng-class="{ active: isActive('/blog')}"><a href="/blog">Blog</a></li>
    <li ng-class="{ active: isActive('/contact')}"><a href="/contact">Contact</a></li>
  </ul>
</div>

但是，当我在Chrome浏览器中点击任何选项卡时，切换可以正常工作-例如，当我点击博客选项卡时，它在Bootstrap 3导航栏中处于活动状态。但是，页面没有正确地进行转换，因此实际的博客内容无法显示在屏幕上-它所更改的只是选项卡切换

更糟糕的是，当我点击屏幕上的另一个内容时，它不在Bootstrap3NavBar的控制范围内，那么它仍然会使转换中断，页面仍然处于预点击状态

那么，如何才能正确地将页面转换到正确的页面，并仅切换导航栏选项卡的活动/非活动状态？我不使用AngularJS模板，只希望它控制切换功能

---

请注意，即使通过点击进行的转换不起作用，当我在浏览器窗口中键入URL并按下return键时，转换也能正常工作。奇怪。

将AngularJS与

ngRoute

一起使用意味着AngularJS将尝试处理您的所有路由需求，但是您可以不用它。要将路由处理留给节点，请执行以下操作：

• 删除您的

  ngRoute

  依赖项，然后完全删除

  .config

  部分
• 从控制器中删除

  $routeParams

• 在页面（由节点处理）中，需要将

  ng controller=“MyCtrl”

  添加到正文元素中

---

$location

现在只需更新选项卡类就可以了。如果没有，请改用

$window.location.pathname

。

太棒了！这很有魅力。至于

$location

，当我注入它时，页面不会自动刷新。所以我使用了

$window.location.pathname

。非常感谢你的回答！还有一个问题-使用

ngRoute

并同时将路由保留到后端节点是不可行的吗？也许如果我在

$routeProvider

中设置了一个模板，它可以工作，但没有模板就无法实现，对吗？您可以使用

ngRoute

通过

templateUrl

和

$routeProvider

从后端提取数据，但此方法只希望从后端交付部分页面。有关更多详细信息，请查看文档中的示例（右下角）：