нг-повтор не работает после развертывания на героку

0

Я развернул простое приложение AngularJS (которое прекрасно работает на локальном компьютере) в Heroku, а затем выглядит как "ng-repeat" перестает работать по какой-то причине, ошибки журналов heroku нет. надеюсь, кто-то может дать некоторые намеки.

источник проекта:

запустить его на локальном компьютере:

  1. npm installn.
  2. node index.js

запустите его на герою:

  1. git clone

  2. heroku создать

  3. git add.

  4. git commit -m "initial commit"

  5. git push heroku master

  6. heroku ps: scale web = 1

  7. геройку открыть

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;
				});
			}
		};
}

PROCFILE

web: node index.js

Я получил скриншоты о том, как вывод выглядит как из local & heroku, так и у меня нет достаточной репутации для публикации здесь: (

решаемая

он работает над Netify без обновления кода, я думаю, что это может быть проблема heroku env, Netify делает процесс намного проще, к которому он может получить доступ из http://json-placeholder-example.netlify.com/

  • 1
    что-нибудь в консоли?
  • 0
    ты имел в виду героку консоли?
Показать ещё 4 комментария
Теги:
heroku

1 ответ

0

Если ng-repeat работал до и остановился, и ошибка не возникает, наиболее вероятная причина заключается в том, что данные не извлекаются. Протестируйте извлечение данных за пределами страницы, чтобы убедиться в этом.

Поделиться
  • 0
    Привет, Майк, на 'Heroku bash' я могу свернуть " jsonplaceholder.typicode.com/albums " ответом на полные загруженные данные, что означает, что, насколько я понимаю, мое приложение должно иметь доступ к данным.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню