AngularJS ng-view 不加载模板文件内容答案

【问题标题】：AngularJS ng-view not loading template file contentAngularJS ng-view 不加载模板文件内容
【发布时间】：2013-06-05 04:08:30
【问题描述】：

我正在尝试设置一个演示 Angular 应用程序，但由于某种原因，我的部分 (partials/test.html) 内容没有加载到布局文件中。这是 index.html：

<!DOCTYPE html>
<html lang="en" ng-app="btq">
   <head>
      <meta charset="utf-8" />
      <title>NgView Test</title>
   </head>
   <body>
      <p>Some stuff on the page.</p>
      <div ng-view></div>
      <script src="js/angular.js"></script>
      <script src="js/app.js"></script>
   </body>
</html>

AngularJS 是 1.0.7 版本。 app.js 包含以下内容：

'use strict';

// Declare app level module which depends on filters, and services
angular.module('btq', []).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/dashbaord', {templateUrl: 'partials/test.html', controller: 'DashboardCtrl'});
    $routeProvider.otherwise({redirectTo: '/dashboard'});
  }]);

/* Controllers */

angular.module('btq.controllers', []).
  controller('DashboardCtrl', [function() {

  }]);

我显然遗漏了一些简单的东西。任何帮助，将不胜感激！

【问题讨论】：

标签： javascript html angularjs angularjs-module angularjs-config

【解决方案1】：

改变

angular.module('btq.controllers', [])

到

angular.module('btq')

否则，这会在您的 app.js 中创建第二个应用程序

【讨论】：

这样做会导致部分内容无法加载。将其保留为 btw.controllers 会加载部分内容，但也会引发错误：Argument 'DashboardCtrl' is not a function, got undefined
啊，我明白了，我需要像这样将 btq.controllers 传递给 btq 模块：angular.module('btq', ['btq.controllers'])
那行得通。这样您就可以创建两个模块并将第二个模块作为依赖项注入第一个模块中。另一种选择是为两者使用一个模块。看我的更新，我的回答有错别字。第二个[] 不应该在那里。

【解决方案2】：

可能是因为“错字”。你在这里写的是“dashbaord”而不是“dashboard”：

$routeProvider.when('/dashbaord' , ...

【讨论】：

肯定有错别字，不敢相信我没看懂。谢谢！