Использование JSON для отображения содержимого из базы данных

Question

На моем сайте пользователи могут использовать поле ввода, чтобы вставить название фильма в базу данных. Теперь я хочу показать этот заголовок на главной странице веб-сайта.

я сделал шаблон для показа его,

%div{"ng-repeat" => "movie in movies"} 
    {{ movie.title }} 

Это контроллер,

angular.module('addMovieseat') 

    .controller('movieOverviewCtrl', [ 
    '$scope', function($scope) { 

     $scope.movies = [ 
     { 
      title: 'Star Wars' 
     } 
     ] 

    } 
    ]); 

И теперь название Star Wars отображается на главной странице. Но я не могу понять, как объединить это с моим файлом movies.json, который показывает значения из базы данных.

Мне кажется, мне нужно создать сервис и ввести эту услугу в movieOverCtrl, но я не могу найти пример для этого.

Answer 1

Используйте $http чтобы получить данные. Присвойте его свойству области видимости на успех. Угловые сделают все остальное.

function getMovies() { 
    $http.get('/movies') 
    .then(function (response) { 
     $scope.movies = response.movies; 
    }); 
} 

Answer 2

Вы можете определить сервис, который восстановить файл JSON с помощью $http службы. Затем вы можете ввести эту службу в свой контроллер, чтобы использовать ваши данные фильма в своих представлениях.

Заканчивать пример:

var app = angular.module('addMovieseat'); 
app.factory("movieService", function("$http") { 
    var movieService = { 
    retrieveMovies: function() { 
     return $http.get("your-movie-file.json"); // return promise to your json file 
    } 
    }; 
    return movieService; 
}); 
app.controller('movieOverviewCtrl', [ 
    '$scope', '$log', 'movieService' 
    function($scope, $log, movieService) { 
    function initCtrl() { 
     movieService.retrieveMovies().success(function(data, status, headers, config) { 
     $scope.movies = data; 
     }). 
     error(function(data, status, headers, config) { 
     // log error 
     }); 
    } 
    initCtrl(); 
    } 
]); 

Answer 3

В конце концов я Rememberd я сделал что-то вроде этого на уроке Codecademy AngularJs.

Контроллер,

angular.module('addMovieseat') 

    .controller('movieOverviewCtrl', [ 
    '$scope', 'movieService', function($scope, movieService) { 

     movieService.success(function(data) { 
     $scope.movies = data; 
     }); 
    } 
    ]); 

И serice,

angular.module('addMovieseat') 

    .factory('movieService', ['$http', function($http) { 
    return $http.get('movies.json') 
     .success(function(data) { 
     return data; 
     }) 
     .error(function(err) { 
     return err; 
     }); 
    }])