finished directives

OdeToCode · Jun 3, 2014 · 721ef4a · 721ef4a
1 parent 66748d5
commit 721ef4a
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 27 deletions.
diff --git a/clients/ng/default.html b/clients/ng/default.html
@@ -16,9 +16,26 @@
     </nav>
 
     <div class="row" ng-controller="MoviesController">
-
+                 
         <div class="col-md-12">
 
+
+            <div contenteditable ng-model="myContent">
+                Some content
+            </div>
+
+            <div ng-repeat="alert in alerts">
+                <alert type="{{alert.type}}" 
+                       reason="alert.reason" 
+                       close="closeAlert($index)">
+                    <div>{{alert.message}}</div>
+                </alert>                
+            </div>
+
+                <br/>
+
+            <button ng-click="changeAlert()">Change Alert</button>                     
+
             <input type="text" ng-model="searchTerm" />
 
             <select ng-model="ordering">
@@ -60,10 +77,13 @@
     </div>
 
     <script src="/bower_components/angular/angular.js"></script>    
-    <script src="scripts/atTheMovies.js"></script>
 
-    <script src="scripts/HelloController.js"></script>
     <script src="scripts/movieService.js"></script>
+
+    <script src="scripts/atTheMovies.js"></script>
+    <script src="scripts/alert.js"></script>
+    <script src="scripts/HelloController.js"></script>
+
     <script src="scripts/MoviesController.js"></script>
     <script src="scripts/allJson.js"></script>
 </body>

diff --git a/clients/ng/scripts/MoviesController.js b/clients/ng/scripts/MoviesController.js
@@ -1,15 +1,40 @@
 (function() {
 
-    var MoviesController = function ($scope, movieService, $log) {
+    var MoviesController = function (
+            $scope, movieService,
+            $log, $location, $anchorScroll) {
 
-        var onMovies = function(response) {
-            $scope.movies = response.data;
+
+        $scope.closeAlert = function(index) {
+            $scope.alerts.splice(index, 1);
+        };
+
+        $scope.alerts = [
+            {
+                type: "warning",
+                message: "This is a warning from MovieController",
+                reason: ""
+            },
+            {
+                type: "info",
+                message: "This is some information",
+                reason: ""
+            }
+        ];
+
+        var onMovies = function(movies) {
+            $scope.movies = movies;
         };
 
         var onError = function(reason) {
-            $scope.error = "There was a problem";
+            $scope.error = reason;
         };
 
+
+        $scope.createError = function() {
+            throw "oops!!!";
+        };
+
         movieService.getAll()
             .then(onMovies, onError);
 
@@ -24,6 +49,8 @@
 
         $scope.edit = function(movie) {
             $scope.editableMovie = angular.copy(movie);
+            $location.hash("editForm");
+            $anchorScroll();
         };
 
         $scope.save = function(movie) {

diff --git a/clients/ng/scripts/alert.js b/clients/ng/scripts/alert.js
@@ -0,0 +1,22 @@
+(function() {
+
+    var module = angular.module("atTheMovies");
+    module.directive("alert", function() {
+
+        return {
+            restrict: "EA",
+            transclude: true,
+            scope: {
+                type: "@",
+                reason: "=",
+                close: "&"
+            },
+            replace: true,
+            controller: function(scope, element, attributes) {
+
+            },
+            templateUrl: "views/alert.html"           
+        };
+    });
+
+}());
diff --git a/clients/ng/scripts/atTheMovies.js b/clients/ng/scripts/atTheMovies.js
@@ -1,17 +1,23 @@
 (function() {
 
-    var module = angular.module("atTheMovies", []);
+    var module = angular.module("atTheMovies", ["atTheMovies.data"]);
 
-    module.config(function($httpProvider) {
-
+    module.config(function (movieServiceProvider) {
+        movieServiceProvider.setRootUrl("/api/movies");
+    });
+
+    module.config(function($provide) {
+        $provide.decorator("$exceptionHandler", function($delegate) {
+            return function(reason, cause) {
+                $delegate(reason, cause);
+            };
+        });
     });
 
     module.run(function($rootScope) {
         $rootScope.appConfig = {
             version: "v1.1"
         };
-
-
     });
 
 }());
diff --git a/clients/ng/scripts/movieService.js b/clients/ng/scripts/movieService.js
@@ -1,18 +1,79 @@
-(function() {
+(function () {
 
-   var movieService = function($http) {        
+    var module = angular.module("atTheMovies.data", []);
+    module.config(function ($provide) {
+        $provide.provider("movieService", function () {
 
-        return {            
-          getAll : function() {
-              return $http.get("/api/movies");
-          },
-          save : function(movie) {
-              return $http.put("/api/movies", movie);
-          }
-        };
-   };
+            var url;
 
-    var module = angular.module("atTheMovies");
-    module.factory("movieService", movieService);
+            this.setRootUrl = function (newUrl) {
+                url = newUrl;
+            };
 
-}());
+            this.$get = function ($http, $q, $timeout) {
+
+                var movies = null;
+
+                return {
+
+                    getAll: function () {
+
+                        if (movies) {
+                            return $q.when(movies);
+                        } else {
+
+                            return $http.get(url)
+                                .then(function (response) {
+                                    movies = response.data;
+                                    return movies;
+                                });
+                        }
+                    },
+                    save: function (movie) {
+                        return $http.put(url, movie);
+                    }
+                };
+            };
+
+        });
+    });
+}());
+
+
+
+//(function () {
+//    var movieService = function ($http, $q, $timeout) {
+//        var movies = null;
+//        return {
+//            getAll: function () {
+//                if (movies) {
+//                    return $q.when(movies);
+//                } else {
+//                    return $http.get("/api/movies")
+//                        .then(function(response) {
+//                            movies = response.data;
+//                            return movies;
+//                        });
+//                }
+//            },
+//            save: function (movie) {
+//                return $http.put("/api/movies", movie);
+//            }
+//        };
+//    };
+//    var module = angular.module("atTheMovies");
+//    module.factory("movieService", movieService);
+//}());
+
+
+//getMovie: function (id) {
+//    var deferred = $q.defer();
+//    $timeout(function() {
+//        if (id < 0) {
+//            deferred.reject("Could not fetch the movie");
+//        } else {
+//            deferred.resolve({ title: "This movie came from a promise" });
+//        }
+//    }, 2000);
+//    return deferred.promise;
+//},
diff --git a/clients/ng/views/alert.html b/clients/ng/views/alert.html
@@ -0,0 +1,6 @@
+<div class="alert alert-{{type}}">
+    <button class="close" ng-click="close()">x</button>
+    <div ng-transclude></div>    
+    <input type="text" ng-model="reason" />
+    {{ reason }} 
+</div>
diff --git a/clients/ng/views/edit.html b/clients/ng/views/edit.html
@@ -2,7 +2,7 @@
 
     <div ng-show="movieEdit.$invalid">Currently invalid</div>
 
-    <form name="movieEdit">
+    <form name="movieEdit" id="editForm">
         <input name="title" type="text" required="" ng-model="editableMovie.title" />
         <input name="year" type="number" ng-model="editableMovie.year" />
         <input name="rating" type="number" min="1" max="5" ng-model="editableMovie.rating" />