AngularJS路由失效及Bootstrap无法正常使用问题求助

我来帮你一步步排查这两个头疼的问题——AngularJS路由失效、点击按钮显示不了AddController的消息，还有Bootstrap无法正常使用的情况：

一、先解决AngularJS路由不工作的问题 #

1. 先确认依赖引入顺序是否正确 #

AngularJS的路由模块是单独的包，必须在核心AngularJS之后引入，顺序错了直接失效：

<!-- 先引入AngularJS核心库 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<!-- 再引入路由模块 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>

2. 检查主模块是否注入了路由依赖 #

你的主应用模块必须声明依赖ngRoute，不然路由功能根本不会生效：

// demo.js里的主模块定义，一定要加['ngRoute']
var app = angular.module('myApp', ['ngRoute']);

3. 验证路由配置与视图容器 #

• 路由配置里要正确关联AddController，并且指定模板（或模板路径）：

app.config(function($routeProvider) {
  $routeProvider
    .when('/add', {
      // 可以直接写模板内容，也可以用templateUrl指向html文件
      template: '<h3>{{message}}</h3>',
      controller: 'AddController'
    })
    .otherwise({redirectTo: '/'}); // 默认跳转主页
});

• 你的index.html里必须有ng-view指令，这是路由内容的渲染容器：

<!-- 一定要加这个，路由匹配的内容会在这里显示 -->
<div ng-view></div>

4. 确认AddController的注册方式 #

控制器必须正确挂载到你的主模块上，别用全局函数的方式（旧版本虽然支持，但容易出问题）：

// 正确的注册方式，绑定到myApp模块
app.controller('AddController', function($scope) {
  $scope.message = "这是AddController里的消息！";
});

5. 按钮跳转的正确姿势 #

点击按钮跳转路由，推荐用AngularJS的$location服务或者ng-href：

<!-- 方式1：用ng-click配合$location -->
<button ng-click="goToAddPage()" class="btn btn-primary">添加</button>
<!-- 方式2：用ng-href直接跳转 -->
<a ng-href="#/add" class="btn btn-primary">添加</a>

如果用ng-click，需要在主控制器里注入$location：

app.controller('MainController', function($scope, $location) {
  $scope.goToAddPage = function() {
    $location.path('/add');
  };
});

二、排查Bootstrap无法正常使用的问题 #

1. 依赖引入顺序要对 #

Bootstrap 3依赖jQuery，所以引入顺序必须是：

<!-- 先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 再引入Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- 最后引入Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

如果用Bootstrap 5，不需要jQuery，但要引入Popper.js：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

2. 检查兼容性 #

AngularJS 1.x和Bootstrap 3的兼容性最好，用Bootstrap 4/5可能会有指令冲突的问题，建议先换Bootstrap 3测试是否正常。

3. 排查样式覆盖问题 #

有时候自定义的CSS会覆盖Bootstrap的样式，按F12打开浏览器开发者工具，查看元素的样式面板，确认Bootstrap的类是否被正确应用。

三、完整可运行的示例代码 #

index.html #

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS路由测试</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <!-- AngularJS核心 -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <!-- AngularJS路由 -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- Bootstrap JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <!-- 自定义JS -->
  <script src="demo.js"></script>
</head>
<body ng-controller="MainController" class="container mt-5">
  <h2>主页</h2>
  <button ng-click="goToAdd()" class="btn btn-success">点击显示AddController消息</button>
  <!-- 路由渲染容器 -->
  <div ng-view class="mt-3"></div>
</body>
</html>

demo.js #

var app = angular.module('myApp', ['ngRoute']);

// 路由配置
app.config(function($routeProvider) {
  $routeProvider
    .when('/add', {
      template: '<div class="alert alert-info">{{message}}</div>',
      controller: 'AddController'
    })
    .when('/', {
      template: '<p>这是主页内容</p>'
    })
    .otherwise({redirectTo: '/'});
});

// 主控制器
app.controller('MainController', function($scope, $location) {
  $scope.goToAdd = function() {
    $location.path('/add');
  };
});

// AddController
app.controller('AddController', function($scope) {
  $scope.message = "AddController中的消息成功显示啦！";
});

你可以按照上面的步骤逐一排查，先把依赖和模块注入的问题解决，再验证路由和控制器的关联，最后检查Bootstrap的引入。如果还是有问题，可以把你的截图和具体代码细节补充出来，我再帮你进一步分析。

内容的提问来源于stack exchange，提问作者Ronak Dumaniya