javascript - 如何使用 AngularJs 和 Bootstrap 创建 Tabs - 需要修改现有代码

Question

我在 stackoverflow 上找到了一个很好的示例，说明如何使用 AngularJS 和 Bootstrap 创建选项卡，但我遇到了问题。原始代码使用的是 Angular (1.0.4) 的旧库，如果我切换到当前的库 (1.4.7)，脚本将不再工作。

这里是原文code on Plunker

这是 original Post

Here is what I've tried so far to change:

var app = angular.module('plunker', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
  $routeProvider
      .when('/jobs', {
        templateUrl: 'jobs-partial.html',   
        controller: JobsCtrl
      })
      .when('/invoices', {
        templateUrl: 'invoices-partial.html',   
        controller: InvoicesCtrl
      })
      .when('/payments', {
        templateUrl: 'payments-partial.html',   
        controller: PaymentsCtrl
      })
      .otherwise({
        redirectTo: '/jobs'
      });
});

问题出在哪里？

Answer 1

AngularJS 1.2 及更高版本:

ngRoute is now its own module

AngularJS 1.3 及更高版本:

...$controller will no longer look for controllers on window. The old behavior of looking on window for controllers was originally intended for use in examples, demos, and toy apps. We found that allowing global controller functions encouraged poor practices, so we resolved to disable this behavior by default.

因此 [1] 添加 ngRoute 作为模块的依赖项 [2] 包含 angular-route.js 源文件 [3] 显式注册 Controller 帮我修好了:

http://plnkr.co/edit/KJyFqf2vf74IidY26vxu?p=preview

[1]

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

[2]

<script src="http://code.angularjs.org/1.4.7/angular-route.js"></script>

[3]

app.controller('TabsCtrl', TabsCtrl);
app.controller('JobsCtrl', JobsCtrl);
app.controller('InvoicesCtrl', InvoicesCtrl);
app.controller('PaymentsCtrl', PaymentsCtrl);