Question

所以我试图在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>

当我在“网络”标签中查看＆＃34; / users＆＃34; route，它加载users.html。对于＆＃34; /＆＃34;这不会发生。路线。我希望它能加载main.html，但我什么都没得到。

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

的index.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中正确配置。

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

Answer 1

写作时

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

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

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

检查documentation。

AngularJS模板无法加载/渲染

1 个答案: