部署到heroku后,ng-repeat无法正常工作

时间:2015-09-25 00:17:25

标签: angularjs heroku

我将一个简单的AngularJS应用程序(在本地工作得很好)部署到Heroku中,然后看起来像" ng-repeat"由于某种原因停止工作,heroku日志没有错误。希望有人能给出一些提示。

项目来源:

在本地运行

  1. npm installn。
  2. node index.js
  3. 在heroku上运行:

    1. git clone

    2. heroku create

    3. git add。

    4. git commit -m" initial commit"

    5. git push heroku master

    6. heroku ps:scale web = 1

    7. heroku open

    8. 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>
      &#13;
      &#13;
      &#13;

      的package.json

      &#13;
      &#13;
      {
        "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"
      }
      &#13;
      &#13;
      &#13;

      脚本/服务/ album_service.js

      &#13;
      &#13;
      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;
      				});
      			}
      		};
      }
      &#13;
      &#13;
      &#13;

      Procfile

      &#13;
      &#13;
      web: node index.js
      &#13;
      &#13;
      &#13;

      我获得了本地和广播输出效果的屏幕截图。 heroku,bud我没有足够的声誉在这里发帖:(

      解决

      它正在Netify上工作而没有代码更新,我想那可能是heroku env问题,Netify让流程变得更容易 可以从http://json-placeholder-example.netlify.com/

      访问它

1 个答案:

答案 0 :(得分:0)

如果ng-repeat在之前和停止工作并且没有错误被抛出,最可能的原因是没有数据被检索。在页面外测试您的数据检索,看看是否是这种情况。