AngularJS模板不加载/渲染答案

【问题标题】：AngularJS templates not loading/renderingAngularJS模板不加载/渲染
【发布时间】：2015-05-21 17:36:14
【问题描述】：

所以我正在尝试在 Chrome 上运行带有 Rails API 的 Angular 应用程序。

我正在尝试从它们各自的控制器呈现非常简单的视图。

我的 users.js 控制器：

'use strict';

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

rantlyApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/users', {
      templateUrl: '/views/users.html',
      controller: 'UsersCtrl'
    });
}])
.controller('UsersCtrl', ['$scope', '$http', function ($scope, $http) {
  $http.get('http://localhost:3000/api/users/').success(function(data) {
    $scope.users = data.users;
  });

  $scope.foos = ['foo', 'bar', 'baz'];
}]);

users.html 视图：

<div ng-controller='UsersCtrl'>
  <h1>Users</h1>

  <ul ng-repeat="user in users">
    <li>{{user.first_name}}</li>
  </ul>

  <ul ng-repeat="foo in foos">
    <li>{{foo}}</li>
  </ul>
</div>

用户页面呈现良好，我得到了我想要的所有数据。但是当我尝试加载我的主页时，我什么也得不到。没有错误，只是一个空白屏幕（尽管导航栏和我的 index.html 中的所有其他内容都可以正常加载）。

我的 main.js 控制器：

'use strict';

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

rantlyApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: '/views/main.html',
      controller: 'MainCtrl'
    });
}])
.controller('MainCtrl', ['$scope', function ($scope) {
  $scope.awesomeThings = [
    'foo',
    'bar',
    'baz'
  ];

  $scope.addThing = function() {
    $scope.awesomeThings.push($scope.newThing);
    $scope.newThing = '';
  };

}]);

main.html 视图：

<div ng-controller="MainCtrl">
  <form ng-submit='addThing()'>
    <div class="form-horizontal">
      <input type="text" ng-model="newThing">
      <input type="submit" value="Add Thing">
    </div>
  </form>
  <li ng-repeat='thing in awesomeThings'>
    {{thing}}
  </li>
  <h4>Awesome things: {{awesomeThings}}</h4>
  <h4>Cool things: {{coolThings}}</h4>
</div>

当我在“/users”路由的“网络”选项卡中查看检查器时，它会加载 users.html。 “/”路由不会发生这种情况。我希望它加载 main.html，但我什么也没得到。

奇怪的是，当我从 main.js 复制所有代码并将其放入 users.js 时，一切正常。这告诉我也许我没有将它正确加载到 index.html 页面中，但在我看来我是。

索引.html：（脚本在底部）

<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="styles/main.css">
  </head>

  <body ng-app="rantlyApp">

    <header class='nav-header' role='navigation'>
      <div class='content'>
        <a class="navbar-brand" href="#/">Rantly</a>
        <nav>
          <a href="#/">Rants</a>
          <a href="#/users">Users</a>
          <a href="#/styleguide">Styleguide</a>
          <a href="#/signup">Sign Up</a>
        </nav>
      </div>
    </header>

    <div class="container">
      <div ng-view=""></div>
    </div>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
    <script>
    !function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
      (A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
      r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
    }(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-XXXXX-X');
    ga('send', 'pageview');
    </script>

    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/services.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <script src="scripts/controllers/users.js"></script>
    <script src="scripts/controllers/about.js"></script>

  </body>
</html>

我对 Angular 非常陌生，所以我很可能错过了设置控制器的基本步骤。由于我的代码完全基于我所在的文件，所以我感觉我没有在 Angular 中正确配置某些东西。

非常感谢任何帮助。谢谢！

【问题讨论】：

标签： javascript html ruby-on-rails angularjs

【解决方案1】：

当你写作时

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

您正在创建一个名为 rantlyApp 的新模块并删除任何具有相同名称的旧模块。因此，当users.js 脚本运行时，它会覆盖您在main.js 中定义的内容。而是定义您的模块一次，然后使用以下命令检索它：

var rantlyApp = angular.module('rantlyApp');

检查documentation。

【讨论】：

啊，是的。我没有想到我每次都在我的控制器中创建具有新依赖项的新模块。我最初在我的 app.js 中定义了 angular 模块，其中包含一长串依赖项，并认为我每次都在我的每个控制器中引用它。谢谢！