Commit 55c3288cc62e53424645b549dc1ecfcbcc2d321b

Authored by Pesah Arthur
1 parent 5d9d406b

Add commentaries to the code

app/scripts/app.js
1 1 'use strict';
2 2  
  3 +// Load the main module (the application) and its dependancies
3 4 angular.module('movieSearch', [
4 5 'ngCookies',
5 6 'ngResource',
6 7 'ngRoute',
7   - ])
  8 +]) // no ';' here!
8 9  
9 10 .config(function ($routeProvider) {
10 11 $routeProvider
11   - .when('/', {
12   - templateUrl: 'views/all.html',
13   - controller: 'searchCtrl'
  12 + .when('/', { // The root of the website (http://127.0.0.1:9000/#/)
  13 + templateUrl: 'views/all.html', // it loads this template...
  14 + controller: 'searchCtrl' // ... with this controller
14 15 })
15   - .when('/detail/:idMovie', {
  16 + .when('/detail/:idMovie', { // :idMovie is a variable (ex: 'tt1234567')
16 17 templateUrl: 'views/detail.html',
17 18 controller: 'detailCtrl'
18 19 })
19 20 .otherwise({
20   - redirectTo: '/'
  21 + redirectTo: '/' // if the url doesn't make sense, redirect to the root
21 22 });
22 23 });
... ...
app/scripts/controllers.js
1 1 angular.module('movieSearch')
2 2  
3 3 .controller('searchCtrl', function searchCtrl($scope, searchFactory) {
  4 + // load the list of the movies from the resource in searchFactory
4 5 $scope.items = searchFactory.allMoviesResource.get(successFn, errorFn);
5 6  
6 7 function successFn() {
7   - $scope.items = $scope.items["Search"]
  8 + $scope.items = $scope.items["Search"] // first key of the dictionary loaded contains an array
8 9 console.log($scope.items)
9 10 }
10 11 function errorFn() {
... ... @@ -13,6 +14,7 @@ angular.module('movieSearch')
13 14 })
14 15  
15 16 .controller('detailCtrl', function searchCtrl($scope, $routeParams, searchFactory) {
  17 + // rootParams : $rootParams.idMovie contains the value of idMovie passed in the url (ex : 'tt1234567')
16 18 $scope.movie = searchFactory.detailMovieResource.get({idMovie: $routeParams.idMovie});
17 19  
18 20 function successFn() {
... ...
app/scripts/filter.js
... ... @@ -3,7 +3,7 @@ angular.module('movieSearch')
3 3 .filter('searchFor', function(){
4 4 return function(arr, searchString){
5 5  
6   - if(!searchString){
  6 + if(!searchString){ // if nothing is typed in the search bar
7 7 return arr;
8 8 }
9 9  
... ...
app/scripts/services.js
... ... @@ -2,10 +2,14 @@ angular.module('movieSearch')
2 2  
3 3 .factory('searchFactory', function($resource) {
4 4  
  5 + // url for all movies with 'la' inside
5 6 var allMoviesResource = $resource('http://www.omdbapi.com/?s=la&y=&plot=short&r=json&page=1');
  7 + // i=:idMovie (look at the url) means that we can pass idMovie as a parameter to the resource
6 8 var detailMovieResource = $resource('http://www.omdbapi.com/?i=:idMovie&plot=short&r=json',
7 9 {idMovie:'@idMovie'}
8 10 );
  11 +
  12 + // a factory always return a dictionary of the variables and functions we want to access outside of the factory
9 13 return {
10 14 allMoviesResource: allMoviesResource,
11 15 detailMovieResource: detailMovieResource
... ...
app/views/all.html
1 1 <div class="bar">
  2 + <!-- ng-model means that searchString becomes an element of the $scope -->
2 3 <input type="text" ng-model="searchString" placeholder="Enter your search terms" />
3 4 </div>
4 5 <ul>
5   - <li ng-repeat="i in items | searchFor:searchString">
  6 + <li ng-repeat="i in items | searchFor:searchString"> <!-- Loop and filter (look at filter.js) -->
6 7 <a href="#/detail/{{i.imdbID}}"><img ng-src="{{i.Poster}}" /></a>
7 8 <p>{{i.Title}}</p>
8 9 </li>
... ...