Add commentaries to the code

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