javascript - 当我使用 AngularJS $routeProvider 时，Node.js 页面转换不再起作用

Question

我使用 Node.js 作为服务器，它完全运行良好，除非我将 AngularJS 添加到堆栈中，这完全破坏了 Node.js 中的所有 URL。具体来说，我想通过响应选项卡的点击来切换 Bootstrap 3 导航栏中选项卡的 active ，但我希望 AngularJS 仅切换选项卡的事件/非事件，并且不'我不希望 AngularJS 独立于其他任何东西，而我希望 Node 来管理这些东西。

这是我的 Angular 代码:

"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("!");
}]);

和 Controller 代码:

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 导航栏中处于事件状态。但是，页面无法正确转换，因此实际的博客内容无法显示在屏幕上 - 它改变的只是选项卡切换。

事情更糟糕的是，当我点击屏幕上的其他内容(超出 Bootstrap 3 导航栏的控制范围)时，它仍然会导致转换中断，并且页面仍然是预先点击的状态。

那么我怎样才能正确地将页面转换到正确的页面，并且让 Angular 只切换导航栏选项卡的事件/非事件状态？我不使用 AngularJS 模板，只想用它来控制切换功能。

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

Answer 1

将 AngularJS 与 ngRoute 一起使用意味着 AngularJS 将尝试处理您的所有路由需求，但是您可以不使用它。将路由处理留给 Node:

• 取消 ngRoute 依赖项，然后完全删除 .config 部分。
• 从 Controller 中删除 $routeParams
• 在您的页面(由 Node 处理)中，您需要将 ng-controller="MyCtrl" 添加到您的 body 元素。

$location 现在应该可以正常工作，只需更新您的选项卡类即可。如果没有，请改用 $window.location.pathname。