【发布时间】：2015-12-22 17:45:05
【问题描述】：
我在 Heroku 中部署了一个简单的 AngularJS 应用程序（在本地运行良好），然后看起来“ng-repeat”由于某种原因停止工作，heroku 日志中没有错误。希望有人能给点提示。
项目来源：
在本地运行：
- npm 安装。
- 节点索引.js
在 Heroku 上运行它：
git 克隆
heroku 创建
git add .
git commit -m "初始提交"
git push heroku master
heroku ps:scale web=1
heroku 打开
index.js
var express = require('express');
var app = express();
var path = require('path');
app.set('port', (process.env.PORT || 5000));
app.use(express.static(__dirname + '/scripts'));
app.use(express.static(__dirname + '/scripts/lib'));
app.use(express.static(__dirname + '/scripts/services'));
app.use(express.static(__dirname + '/scripts/controllers'));
app.get('/',function(req,res){
res.sendFile(path.join(__dirname+'/index.html'));
//__dirname : It will resolve to your project folder.
});
app.listen(app.get('port'), function() {
console.log('Node app is running on port', app.get('port'));
});index.html
<html ng-app="albumsApp">
<head>
<meta charset="utf-8">
<title>Albums Store</title>
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/3.3.0/ekko-lightbox.min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<!-- JS Libs -->
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="ekko-lightbox.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-animate.min.js"></script>
<script src="lodash.min.js"></script>
<!-- modules / services / controllers -->
<script src="app.module.js"></script>
<script src="album_service.js"></script>
<script src="album.js"></script>
<script src="user.js"></script>
<!-- lightbox delegation -->
<script type="text/javascript">
$(document).ready(function ($) {
// delegate calls to data-toggle="lightbox"
$(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
if (window.console) {
return console.log('Checking our the events huh?');
}
},
onNavigate: function(direction, itemIndex) {
if (window.console) {
return console.log('Navigating '+direction+'. Current item: '+itemIndex);
}
}
});
});
//Programatically call
$('#open-image').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox();
});
});
</script>
</head>
<body>
<h1>Albums Library</h1>
Search: <input ng-model="query" type="text"/>
<div ng-controller="albumCtrl">
<table class="pure-table pure-table-bordered">
<thead>
<tr>
<th><a href="" ng-click="sortField = 'id'; reverse = !reverse" >Album ID</a></th>
<th>Album Title</th>
<th><a href="" ng-click="sortField = 'userId'; reverse = !reverse" >User Name</a></th>
</tr>
</thead>
<tr ng-repeat="album in albums | orderBy:sortField:!reverse | filter:query">
<td>{{album.id}}</td>
<td>
<div id="title_container" class="pure-g">
<div class="pure-u-3-5">{{album.title}}</div>
<div class="pure-u-1-5"><input type="checkbox" ng-model="shouldShow" /></div>
<div class="pure-u-1-5" ng-show="shouldShow">
<a href="{{album.url}}" data-toggle="lightbox">
<img ng-src="{{album.thumbnailUrl}}" class="img-responsive">
</a>
</div>
</div>
</td>
<td>{{album.userId}}</td>
</tr>
</table>
</div>
<!-- testing data
<div ng-controller="userCtrl" class="pure-u-1-2">
<table class="pure-table pure-table-bordered">
<thead>
<tr>
<th><a href="" ng-click="sortField = 'id'; reverse = !reverse" >User ID</a></th>
<th><a href="" ng-click="sortField = 'name'; reverse = !reverse" >User Name</a></th>
<th>Email</th>
</tr>
</thead>
<tr ng-repeat="user in users | orderBy:sortField:!reverse | filter:query">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
</tr>
</table>
</div>
-->
</body>
</html>package.json
{
"name": "angularjs-study",
"version": "1.0.0",
"description": "project for AngularJS self-studying with fake data from JSONplaceholder & faker.js",
"main": "index.js",
"scripts": {
"start": "node index.js"
},
"dependencies": {
"express": "4.13.3",
"gzippo": "^0.2.0",
"path": "^0.12.7"
},
"engines": {
"node": "0.12.7"
},
"repository": {
"type": "git",
"url": "git+https://github.com/igxz/angularjs-study.git"
},
"keywords": [
"angularjs",
"node",
"heroku",
"express"
],
"author": "Stephen Zhang",
"license": "MIT",
"bugs": {
"url": "https://github.com/igxz/angularjs-study/issues"
},
"homepage": "https://github.com/igxz/angularjs-study#readme"
}脚本/服务/album_service.js
angular
.module('albumsApp')
.factory('albumService', albumService);
function albumService($http){
return {
fetch_all_albums: function(){
return $http.get('http://jsonplaceholder.typicode.com/albums');
},
fetch_all_users: function(){
return $http.get('http://jsonplaceholder.typicode.com/users');
},
fetch_all_photos: function(){
return $http.get('http://jsonplaceholder.typicode.com/photos');
},
id_to_name: function(albums, users){
angular.forEach(albums, function(album){
var userName = _.select(users, function(u){
return u.id === album.userId;
})[0].name;
album.userId = userName;
});
},
add_photo_urls: function(albums, photos){
angular.forEach(albums, function(album){
var matchedPhoto = _.select(photos, function(p){
return p.albumId === album.id;
})[0];
var thumbnailUrl = matchedPhoto.thumbnailUrl;
var url = matchedPhoto.url;
// add key/value
album['thumbnailUrl'] = thumbnailUrl;
album['url'] = url;
});
}
};
}过程文件
web: node index.js我得到了本地和 Heroku 输出的屏幕截图，但我没有足够的声望在这里发帖：（
已解决
它可以在没有代码更新的情况下在 Netify 上运行，我想这可能是 heroku env 问题，Netify 使过程变得更加容易 可以从http://json-placeholder-example.netlify.com/访问它
【问题讨论】：
-
控制台中有什么？
-
你是说heroku控制台吗？
-
尝试减少您的问题或将其部署到人们可以看到的地方。因为大多数阅读本文的人可能不会费心在 git 上查看您的整个代码存储库，然后运行 heroku 来查找您的问题。而且您关于“ng-repeat 停止工作”的说法非常含糊。
-
@StephenZ 没有浏览器控制台
-
让它在没有代码更新的情况下在 Netify 上运行，我想这可能是 heroku env 问题，Netify 使过程更容易，可以从json-placeholder-example.netlify.com访问