因此，我尝试在 Chrome 上使用 Rails API 运行 Angular 应用。
我正在尝试从各自的 Controller 渲染非常简单的 View 。
我的 users.js Controller :
'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 View :
<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 Controller :
'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 View :
<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 页面中，但在我看来，我确实是这样。
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 非常陌生，所以我很可能错过了设置 Controller 的基本步骤。由于我的代码完全基于我所在的文件来工作，因此我感觉我没有在 Angular 中正确配置某些内容。
非常感谢任何帮助。谢谢!
最佳答案
当你写的时候
var rantlyApp = angular.module('rantlyApp', ['ngRoute']);
您正在创建一个名为 rantlyApp 的新模块，并删除任何同名的旧模块。因此，当 users.js 脚本运行时，它会覆盖您在 main.js 中定义的内容。
相反，定义您的模块一次，然后使用以下命令检索它:
var rantlyApp = angular.module('rantlyApp');
检查documentation .
关于javascript - AngularJS 模板未加载/渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29130464/