Added expenses calc demo

.gitignore

@@ -7,3 +7,4 @@ dist
 /server/config/local.env.js
 npm-debug.log
 coverage
+cache.nedb

README.md

@@ -37,8 +37,9 @@ I haven't tested with newer versions but it should work anyway.
 
 ## For both envs
 ````
-npm install grunt bower -g
-git clone https://github.com/aotaduy/angular-course.git
+npm install grunt-cli bower -g
+git clone https://github.com/aotaduy/angular-example.git
+cd angular-example
 npm install
 bower install
 npm run update-webdriver
@@ -50,9 +51,13 @@ The movie db example application uses the REST API at https://www.themoviedb.org
 
 Before running ``grunt serve`` you should set the environment variable (this is a fake key you shuld add your own):
 ````
+In  Windows
 set MOVIEDB_API=72fa50138ba3dcfd588fd59a1375a810
 ````
-
+````
+In  Linux
+export MOVIEDB_API=72fa50138ba3dcfd588fd59a1375a810
+````
 ## To run the app
 ````
 grunt serve

bower.json

@@ -3,16 +3,18 @@
   "version": "0.0.0",
   "dependencies": {
     "angular": "~1.4.*",
-    "json3": "~3.3.1",
-    "es5-shim": "~3.0.1",
-    "bootstrap": "~3.1.1",
-    "angular-resource": ">=1.2.*",
+    "angular-animate": "~1.4.7",
+    "angular-bootstrap": "~0.14.0",
     "angular-cookies": ">=1.2.*",
+    "angular-resource": ">=1.2.*",
     "angular-sanitize": ">=1.2.*",
-    "angular-bootstrap": "~0.14.0",
+    "angular-ui-router": "~0.2.15",
+    "animate.css": "~3.4.0",
+    "bootstrap": "~3.1.1",
+    "es5-shim": "~3.0.1",
     "font-awesome": ">=4.1.0",
-    "lodash": "~2.4.1",
-    "angular-ui-router": "~0.2.15"
+    "json3": "~3.3.1",
+    "lodash": "~2.4.1"
   },
   "devDependencies": {
     "angular-mocks": ">=1.2.*",

client/.jshintrc

@@ -25,12 +25,14 @@
     "moment": true,
     "describe": true,
     "beforeEach": true,
+    "afterEach": false,
     "module": true,
     "inject": true,
     "it": true,
     "expect": true,
     "browser": true,
     "element": true,
-    "by": true
+    "by": true,
+    "sinon": false
   }
 }

client/app/app.less

@@ -17,6 +17,7 @@
 
 // injector
 @import 'components/movie-listing/movie-listing.less';
+@import 'components/movie-poster/movie-poster.less';
 @import 'components/movie/movie.less';
 @import 'components/search-box/search-box.less';
 @import 'pages/example/main.less';

client/app/components/movie-poster/movie-poster.directive.js

@@ -0,0 +1,16 @@
+(function() {
+    'use strict';
+
+    angular
+        .module('moviesApp')
+        .directive('moviePoster', moviePosterDirective);
+    function moviePosterDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'app/components/movie-poster/movie-poster.html',
+            scope: {
+                movie: '='
+            }
+        };
+    }
+})();

client/app/components/movie-poster/movie-poster.html

@@ -0,0 +1,2 @@
+<img class="poster" ng-src="http://image.tmdb.org/t/p/w154/{{movie.poster_path}}" alt="{{movie.title}}"
+     uib-popover="{{movie.title | limitTo: 100}}" popover-trigger="mouseenter">

client/app/components/movie-poster/movie-poster.less

@@ -0,0 +1,7 @@
+movie-poster {
+    display: block;
+    .poster {
+        width: 154px;
+        height: 231px;
+    }
+}

client/app/components/movie/movie.html

@@ -1,4 +1,2 @@
-<h4>{{movie.title}}</h4>
-<img class="poster" ng-src="http://image.tmdb.org/t/p/w154/{{movie.poster_path}}" alt="{{movie.title}}"
-     uib-popover="{{movie.overview | limitTo: 100}}" popover-trigger="mouseenter">
+<movie-poster movie="movie"></movie-poster>
 <a href="/movie/{{movie.id}}" class="btn btn-primary btn-xs" role="button">Read more</a>

client/app/components/movies-connector/moviesConnector.factory.js

@@ -20,13 +20,16 @@
             cachedConfiguration: null,
             topRatedMovies: topRatedMovies,
             configuration: configuration,
-            search: search
+            search: search,
+            movieInfo: movieInfo
         };
 
         function topRatedMovies() {
             return $http.get('/api/movies/');
         }
-
+        function movieInfo(movieId) {
+            return $http.get('/api/movies/info/' + movieId);
+        }
         function search(query) {
             return $http.get('/api/movies/search/' + query);
         }

client/app/pages/listing/listing-page.html

@@ -1,7 +1,6 @@
 <div class="row">
     <h2>Popular Movies {{listingVm.movies.length}}</h2>
     <movie-listing movies="listingVm.movies"></movie-listing>
-
 </div>
 
 <div class="row">

client/app/pages/movie/movie-page.controller.js

@@ -0,0 +1,20 @@
+(function() {
+    'use strict';
+
+    angular
+        .module('moviesApp')
+        .controller('MoviePageController', MoviePageController);
+
+    MoviePageController.$inject = [
+        'movie',
+        'moviesConnector'
+    ];
+
+    /* @ngInject */
+    function MoviePageController(movie, topMovies, moviesConnector){
+        var vm = this;
+        vm.movie = movie;
+
+
+    }
+})();

client/app/pages/movie/movie-page.debug.html

@@ -0,0 +1,3 @@
+<pre>
+{{movieVm.movie | json}}
+</pre>

client/app/pages/movie/movie-page.debug.route.js

@@ -0,0 +1,20 @@
+(function() {
+    'use strict';
+
+    angular
+        .module('moviesApp')
+        .config(configRouteMovieDebug);
+
+        configRouteMovieDebug.$inject = [
+            '$stateProvider'
+        ];
+
+        function configRouteMovieDebug($stateProvider) {
+
+        $stateProvider
+          .state('movie-page.debug', {
+                    url: '/debug',
+                    templateUrl: 'app/pages/movie/movie-page.debug.html',
+                });
+        }
+})();

client/app/pages/movie/movie-page.edit.html

@@ -0,0 +1,21 @@
+<h3>Editing</h3>
+<div class="row">
+	<div class="col-xs-12">
+		<h4>Title: </h4>
+		<input type="text" ng-model="movieVm.movie.title">
+		<h4>Overview: </h4>
+		<textarea  ng-model="movieVm.movie.overview" cols="80" rows="5">
+		</textarea>
+	</div>
+</div>  
+<div class="row">
+	<div class="col-xs-12">
+	<h4>Similar Movies </h4>
+	      <span
+	      class="btn btn-default btn-sm"
+	       ng-click="searchVm.itemSelected(result)"
+	       ng-repeat="similarMovie in movieVm.movie.similar.results">
+				{{similarMovie.title}} <button class="btn btn-danger btn-xs" ng-click"">X</button>
+	       </span>
+  </div>
+</div>

client/app/pages/movie/movie-page.edit.route.js

@@ -0,0 +1,20 @@
+(function() {
+    'use strict';
+
+    angular
+        .module('moviesApp')
+        .config(configRouteMovieEdit);
+
+        configRouteMovieEdit.$inject = [
+            '$stateProvider'
+        ];
+
+        function configRouteMovieEdit($stateProvider) {
+
+        $stateProvider
+          .state('movie-page.edit', {
+                    url: '/edit',
+                    templateUrl: 'app/pages/movie/movie-page.edit.html',
+                });
+        }
+})();

client/app/pages/movie/movie-page.html

@@ -0,0 +1,21 @@
+<h2>{{movieVm.movie.title}}</h2>
+<div class="row">
+    <div class="col-sm-3">
+    	<movie-poster movie="movieVm.movie"></movie>
+    </div>
+    <div class="col-sm-9">
+		<p>{{movieVm.movie.overview}}</p>
+		<p>Genres: <a ng-href="#" ng-click="alert('Not implemented yet')" ng-repeat="genre in movieVm.movie.genres">{{genre.name}}</a> </p>
+		<a ng-href="http://www.imdb.com/title/{{movieVm.movie.imdb_id}}">Check in IMDB</a>
+    </div>
+</div>
+<div class="form-group">
+    <div class="btn-group">
+       <a ui-sref="movie-page.similar"><label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Similar'">Similar</label></a>
+       <a ui-sref="movie-page.debug"><label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Middle'">Debug</label></a>
+       <a ui-sref="movie-page.edit"><label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Edit'">Edit</label></a>
+    </div>
+    <ui-view>
+    </ui-view>
+</div>
+<home-footer></home-footer>

client/app/pages/movie/movie-page.route.js

@@ -0,0 +1,37 @@
+(function() {
+    'use strict';
+
+    angular
+        .module('moviesApp')
+        .config(configRouteListing);
+
+        configRouteListing.$inject = [
+            '$stateProvider'
+        ];
+
+        function configRouteListing ($stateProvider) {
+
+        $stateProvider
+          .state('movie-page', {
+                    title: 'Movie',
+                    url: '/movie/:movieId',
+                    abstract: true,
+                    templateUrl: 'app/pages/movie/movie-page.html',
+                    controller: 'MoviePageController',
+                    controllerAs: 'movieVm',
+                    resolve: {
+                        movie: ['$stateParams', 'moviesConnector', 
+                            function($stateParams, moviesConnector) {
+                            if($stateParams.movieId) {
+                                return moviesConnector.movieInfo($stateParams.movieId)
+                                        .then(function (response) {
+                                            return response.data;
+                                        });
+                            } else {
+
+                            }
+                        }]
+                    }
+                });
+        }
+})();

client/app/pages/movie/movie-page.similar.html

@@ -0,0 +1,8 @@
+<h3>Similar Movies </h3>
+<div class="row">
+	<div ng-repeat="similarMovie in movieVm.movie.similar.results | limitTo: 6" class="col-md-2 col-sm-3">
+	<movie movie="similarMovie"></movie>
+	</div>
+</div>
+<div class="row">
+<div class="col-xs-12">

client/app/pages/movie/movie-page.similar.route.js

@@ -0,0 +1,20 @@
+(function() {
+    'use strict';
+
+    angular
+        .module('moviesApp')
+        .config(configRouteMovieSimilar);
+
+        configRouteMovieSimilar.$inject = [
+            '$stateProvider'
+        ];
+
+        function configRouteMovieSimilar($stateProvider) {
+
+        $stateProvider
+          .state('movie-page.similar', {
+                    url:'',
+                    templateUrl: 'app/pages/movie/movie-page.similar.html',
+                });
+        }
+})();

client/demo/custom-directives/index.html

@@ -0,0 +1,52 @@
+<html >
+    <head>
+        <script src="/bower_components/jquery/dist/jquery.js"></script>
+        <script src="/bower_components/angular/angular.js"></script>
+        <script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
+        <script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
+        <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
+        <!-- Include file with the controller -->
+        <script src="/demo/custom-directives/validate-password.directive.js"></script>
+        <script src="/demo/custom-directives/modal-button.directive.js"></script>
+        <script src="/demo/custom-directives/modal-button.controller.js"></script>
+        <style>
+            .min-size {
+                border: 2px solid red;
+                padding:10px;
+            }
+        </style>
+    </head>
+    <body ng-app="custom-directives">
+        <div class="container">
+            <nav class="navbar navbar-default">
+                <div class="navbar-header">
+                    <span class="navbar-brand">Custom Directives demo </span>
+
+                </div>
+            </nav>
+            <div class="row" ng-init="number=0">
+                <div class="col-sm-6 col-xs-12">
+                    <label>Text 4 - 10 </label>
+                    <input type="text" validate-password min-length="4" max-length="10" show-message="true" ng-model="modalTitle">
+
+                    <h3>{{modalTitle}}</h3>
+                    <label>Text 2 - 10 </label>
+                    <input type="text" validate-password min-length="2" max-length="10" show-message="false" ng-model="text">
+                    <h3>{{text}}</h3>
+                    <label>Number 0 - 5 </label>
+                    <input type="number" validate-password min-length="0" max-length="5" show-message="false" ng-model="number">
+
+                    <modal-button 
+                        title="modalTitle"
+                        button-text="Button Text"
+                        on-cancel="number = number + 1">
+                            <h2>This is a test </h2> 
+                            <p>This is a test to reproduce a modal with a transclusion directive</p>
+                            <h4> {{modalTitle}} this is a test: {{text}}</h4>
+                            <h5>{{number}}</h5>
+                    </modal-button>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>