i´m new in AngularJS and i'm trying to do a Detail view from a list of movies , when you select one movie (clicking in the title) from the 'home' view its supposed to redirect you to the new view with the details of that selected movie ,but i can't figure out how to do it. i saw a lot of tutorials but any works for me , hope you can help me,thanks !!
here is part of the code: http://jsfiddle.net/3fu0gr81/
this is a example of my json file:
[{ "Title": "Birdman",
"Plot": "A washed-up actor, who once played an iconic superhero, battles his ego and attempts to recover his family, his career and himself in the days leading up to the opening of his Broadway play.",
"Year": "2014",
"Director": "Alejandro González Iñárritu",
"Genre": "Comedy",
"Duration": "119 min",
}]
myApp.controller('MovieDetail', ['$scope', '$routeParams','$http',function($scope,$routeParams,$http){
$http({
method: 'GET',
url: 'movie.json'
}).success(function(data){
$scope.movies = data;
});
}]);
here the $scope.movies containing all movies data
by using ng-repeat u can print this in view
<div ng-repeat="movie in movies">
<li>{{movie.name}}</li>
</div>
If u want particular movie means ,u have to filter with $routeParams.movieId
$scope.filterId = $routeParams.movieId;
and also u can get single record through service also
myApp.controller('MovieDetail', ['$scope', '$routeParams','$http',function($scope,$routeParams,$http){
$http({
method: 'GET',
url: 'movie.json',
params:{"id":"$routeParams.MovieId"}
}).success(function(data){
$scope.movies = data;
});
}]);
I refactored your code storing the movie data in the service and accessing it in the controller after the view is changed. You may notice I'm not using the $scope variable anywhere and that's personal preference. I feel that using controller as syntax is more semantic and easier to understand. If you have questions let me know.
The application follows this path now:
1) invoke the list method of the movie service to load the movie data using $http service
2) Store that data in a private object accessible by a method on the Movie service and pass it back to the controller
3) Create a link in the view for each movie title containing the title of the movie as a route parameter
4) In the details view use the $routeParam service to get the title of the movie clicked on and invoke the new getDetails method on the Movie service to return the details of that movie.
Working Plunk