From 5da7d46d11180589c233cb5fb9985391507d4c98 Mon Sep 17 00:00:00 2001 From: Gustavo Martin Morcuende Date: Sat, 29 Aug 2015 21:35:28 +0200 Subject: [PATCH] showcase: angularjs bootstrap modal --- .../app/rest/rest-error-modal.controller.js | 37 +++++++++++++ .../src/showcase/app/rest/rest-error-modal.html | 19 +++++++ .../src/showcase/app/rest/rest.controller.js | 62 +++++++++++++++++++--- .../showcase/src/showcase/app/rest/rest.service.js | 45 ++++++++-------- angularjs/showcase/src/showcase/index.html | 1 + 5 files changed, 136 insertions(+), 28 deletions(-) create mode 100644 angularjs/showcase/src/showcase/app/rest/rest-error-modal.controller.js create mode 100644 angularjs/showcase/src/showcase/app/rest/rest-error-modal.html diff --git a/angularjs/showcase/src/showcase/app/rest/rest-error-modal.controller.js b/angularjs/showcase/src/showcase/app/rest/rest-error-modal.controller.js new file mode 100644 index 0000000..30b1b0a --- /dev/null +++ b/angularjs/showcase/src/showcase/app/rest/rest-error-modal.controller.js @@ -0,0 +1,37 @@ +(function () { + 'use strict'; + + angular + .module('app.rest') + .controller('RestErrorModal', RestErrorModal); + + /** + * @ngdoc controller + * @name app.rest.controller:RestErrorModal + * + * @description + * Controller for error modal in rest application. + */ + /* @ngInject */ + function RestErrorModal($modalInstance, cars) { + var vm = this; + + vm.cars = cars; + vm.selected = { + car: vm.cars[0] + }; + + vm.ok = function () { + var isAllowedEvent = $modalInstance.close(vm.selected.car); + console.log('close: broadcasted event to the modal scope before the modal closes. ' + + 'Was it allowed?' + isAllowedEvent); + }; + + vm.cancel = function () { + var isAllowedEvent = $modalInstance.dismiss('cancel'); + console.log('dismiss: broadcasted event to the modal scope before the modal closes. ' + + 'Was it allowed?' + isAllowedEvent); + }; + } + +})(); diff --git a/angularjs/showcase/src/showcase/app/rest/rest-error-modal.html b/angularjs/showcase/src/showcase/app/rest/rest-error-modal.html new file mode 100644 index 0000000..c197706 --- /dev/null +++ b/angularjs/showcase/src/showcase/app/rest/rest-error-modal.html @@ -0,0 +1,19 @@ + +
+

REST error modal!

+
+
+ + + Selected: {{ vm.selected.car }} +
+
+ + +
\ No newline at end of file diff --git a/angularjs/showcase/src/showcase/app/rest/rest.controller.js b/angularjs/showcase/src/showcase/app/rest/rest.controller.js index 0c08dda..5ff3313 100644 --- a/angularjs/showcase/src/showcase/app/rest/rest.controller.js +++ b/angularjs/showcase/src/showcase/app/rest/rest.controller.js @@ -9,19 +9,21 @@ * @ngdoc controller * @name app.rest.controller:Rest * - * @requires $location - * @requires app.rest.cars + * @requires $modal + * @requires $timeout + * @requires app.rest.rest * *

*
- * {@link https://docs.angularjs.org/api/ng/service/$location $location} + * {@link http://angular-ui.github.io/bootstrap/#/modal $modal} + * {@link https://docs.angularjs.org/api/ng/service/$timeout $timeout} *

* * @description * Rest controller. */ /* @ngInject */ - function Rest($log, cars) { + function Rest($modal, $timeout, rest) { var vm = this; vm.example = { text: 'try to send data', @@ -32,17 +34,65 @@ function getCars() { // ES6 way. success and error are deprecated because they are not following the ES6 way. - cars.getAll().then( + rest.getAll().then( // Success function (value) { vm.cars = value; }, // Error function(reason) { - $log.debug('Rest controller error: ' + reason); + console.log('Rest controller error: ' + reason); + doModal('lg'); } ); } + + function doModal(size) { + var cars = ['car1', 'car2', 'car3']; + var modalInstance = $modal.open({ + animation: true, + templateUrl: 'app/rest/rest-error-modal.html', + controller: 'RestErrorModal as vm', + size: size, + backdrop: 'static', + keyboard: false, + resolve: { + cars: function () { + return cars; + } + } + }); + + modalInstance.result.then(function (selectedItem) { + vm.selected = selectedItem; + }, function (reason) { + if (reason === '$uibUnscheduledDestruction') { + console.log('Modal\'s scope destroyed by unexpected mechanism'); + } + console.log('Modal dismissed at: ' + new Date()); + console.log('Modal dismissed reason: ' + reason); + }); + + modalInstance.opened.then(function(value) { + console.log('Modal opened success at: ' + new Date()); + console.log('Modal opened success value: ' + value); + }, function(reason) { + console.log('Modal opened error at: ' + new Date()); + console.log('Modal opened error value: ' + reason); + }); + + modalInstance.rendered.then(function(value) { + console.log('Modal rendered success at: ' + new Date()); + console.log('Modal rendered success value: ' + value); + }, function(reason) { + console.log('Modal rendered error at: ' + new Date()); + console.log('Modal rendered error value: ' + reason); + }); + + $timeout(modalInstance.close('closed by tiemout'), 5000); + + $timeout(modalInstance.dismiss('closed by tiemout'), 10000); + } } })(); diff --git a/angularjs/showcase/src/showcase/app/rest/rest.service.js b/angularjs/showcase/src/showcase/app/rest/rest.service.js index 08c095b..3a7b54a 100644 --- a/angularjs/showcase/src/showcase/app/rest/rest.service.js +++ b/angularjs/showcase/src/showcase/app/rest/rest.service.js @@ -3,26 +3,26 @@ angular .module('app.rest') - .factory('cars', cars); + .factory('rest', rest); /** * @ngdoc service - * @name app.rest.cars + * @name app.rest.rest * * @requires $http - * @requires $log + * @requires $q * *

*
* {@link https://docs.angularjs.org/api/ng/service/$http $http}
- * {@link https://docs.angularjs.org/api/ng/service/$log $log} + * {@link https://docs.angularjs.org/api/ng/service/$q $q} *

* * @description * Rest service. */ /* @ngInject */ - function cars($http, $log, $q, API) { + function rest($http, $q, API) { return { getAll: getAll }; @@ -30,7 +30,7 @@ /** * @ngdoc method * @name getAll - * @methodOf app.rest.cars + * @methodOf app.rest.rest * * @description * Get cars from API REST. @@ -43,7 +43,7 @@ // .error(errorAlternative) // b) Using then from promise. ES6 way. .then(success, error, notify) - // Pattern: either use error callback or catch but not the same as the same time!!!! + // Pattern: either use error callback or catch but not both of them as the same time!!!! // .catch(failed) .finally(finalizer); @@ -74,7 +74,7 @@ // In this way, then next chained promise will use just its success callback. :( // What means, promise will be resolved immediately!!! If it is what you want go ahead. - //return resp.data; + // return resp.data; // Better return promise. :) Two options: @@ -91,10 +91,10 @@ // DO NOT USE IT!!! This way has been deprecated because it is not the ES6 way. function successAlternative(data, status, headers, config) { - $log.debug('XHR SuccessAlternative for getAll. SuccessAlternative, data: ' + data); - $log.debug('XHR SuccessAlternative for getAll. SuccessAlternative, status: ' + status); - $log.debug('XHR SuccessAlternative for getAll. SuccessAlternative, headers (it is a function): ' + headers); - $log.debug('XHR SuccessAlternative for getAll. SuccessAlternative, config: ' + config); + console.log('XHR SuccessAlternative for getAll. SuccessAlternative, data: ' + data); + console.log('XHR SuccessAlternative for getAll. SuccessAlternative, status: ' + status); + console.log('XHR SuccessAlternative for getAll. SuccessAlternative, headers (it is a function): ' + headers); + console.log('XHR SuccessAlternative for getAll. SuccessAlternative, config: ' + config); } function error(reason) { @@ -114,11 +114,11 @@ * status: 500 * statusText: "Internal Server Error" */ - $log.debug('XHR Error for getAll. Error: ' + reason.data); + console.log('XHR Error for getAll. Error: ' + reason.data); // In this way, then next chained promise will use just its success callback. :( // What means, promise will be resolved immediately!!! If it is what you want go ahead. - //return resp.data; + // return reason.data; // Better return promise. :) Three options: @@ -138,14 +138,14 @@ // DO NOT USE IT!!! This way has been deprecated because it is not the ES6 way. function errorAlternative(data, status, headers, config) { - $log.debug('XHR ErrorAlternative for getAll. ErrorAlternative, data: ' + data); - $log.debug('XHR ErrorAlternative for getAll. ErrorAlternative, status: ' + status); - $log.debug('XHR ErrorAlternative for getAll. ErrorAlternative, headers (it is a function): ' + headers); - $log.debug('XHR ErrorAlternative for getAll. ErrorAlternative, config: ' + config); + console.log('XHR ErrorAlternative for getAll. ErrorAlternative, data: ' + data); + console.log('XHR ErrorAlternative for getAll. ErrorAlternative, status: ' + status); + console.log('XHR ErrorAlternative for getAll. ErrorAlternative, headers (it is a function): ' + headers); + console.log('XHR ErrorAlternative for getAll. ErrorAlternative, config: ' + config); } function notify(notification) { - $log.debug('XHR Notification for getAll. Notification: ' + notification); + console.log('XHR Notification for getAll. Notification: ' + notification); } function failed(reason) { @@ -165,11 +165,11 @@ * status: 500 * statusText: "Internal Server Error" */ - $log.debug('XHR Failed for getAll. Reason: ' + reason); + console.log('XHR Failed for getAll. Reason: ' + reason); // In this way, then next chained promise will use just its success callback. // What means, promise will be resolved immediately!!! If it is what you want go ahead. - //return resp.data; + // return reason.data; // Better return promise. :) Three options: @@ -189,7 +189,8 @@ } function finalizer() { - + // This callback doesn't have any input parameter :( + console.log('XHR Finalizer for getAll.'); } } } diff --git a/angularjs/showcase/src/showcase/index.html b/angularjs/showcase/src/showcase/index.html index 4c19879..bfc7a9e 100644 --- a/angularjs/showcase/src/showcase/index.html +++ b/angularjs/showcase/src/showcase/index.html @@ -59,6 +59,7 @@ + -- 2.1.4