From: Gustavo Martin Morcuende <gu.martinm@gmail.com>
Date: Sun, 13 Sep 2015 23:45:56 +0000 (+0200)
Subject: showcase: broadcast, emit, on, rootScope, scope
X-Git-Url: https://git.gumartinm.name/?a=commitdiff_plain;h=bccc59ec970d033e5c5ae3b009f779b32d89d8d5;p=JavaScriptForFun

showcase: broadcast, emit, on, rootScope, scope
---

diff --git a/angularjs/showcase/src/showcase/app/app.module.js b/angularjs/showcase/src/showcase/app/app.module.js
index ae78ee7..8cc85e8 100644
--- a/angularjs/showcase/src/showcase/app/app.module.js
+++ b/angularjs/showcase/src/showcase/app/app.module.js
@@ -23,7 +23,8 @@
 
     /* Feature areas */
     'app.welcome',
-    'app.cars'
+    'app.cars',
+    'app.users'
   ]);
 
 }());
diff --git a/angularjs/showcase/src/showcase/app/users/users-child.controller.js b/angularjs/showcase/src/showcase/app/users/users-child.controller.js
new file mode 100644
index 0000000..c7c4659
--- /dev/null
+++ b/angularjs/showcase/src/showcase/app/users/users-child.controller.js
@@ -0,0 +1,53 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('app.users')
+    .controller('UsersChildController', UsersChildController);
+
+  /**
+   * @ngdoc controller
+   * @name app.users.controller:UsersChildController
+   *
+   * @requires $rootScope
+   *
+   * <p>
+   * <br>
+   * {@link https://docs.angularjs.org/api/ng/service/$rootScope $rootScope}
+   * </p>
+   *
+   * @description
+   * Users controller.
+   */
+  /* @ngInject */
+  function UsersChildController($rootScope, $scope, USERS) {
+    var vm = this;
+    var emitFact = {
+      title: 'Snake and Scarlett',
+      fact: 'it is canon'
+    };
+
+    vm.getEmit = function () {
+      $scope.$emit(USERS.SCOPE.EMIT_FACT, emitFact);
+    };
+
+    // NEVER USE $rootScope.$on IN CONTROLLER BECAUSE IT IS NOT DESTROYED EVEN IF CONTROLLER WAS DESTROYED!!!
+    // YOU WILL END UP HAVING AS MANY EVENT LISTENERS AS TIMES THIS CONTROLLER IS CREATED!!!!
+    // $rootScope.$on(USERS.ROOTSCOPE.BROADCAST, usersChildOnRootBroadcast);
+
+    // LISTENING FOR EVENTS IN $scope IS THE RIGHT THING BECAUSE THESE EVENT LISTENERS ARE DESTROYED
+    // AT THE SAME TIME AS THIS CONTROLLER :)
+    $scope.$on(USERS.ROOTSCOPE.BROADCAST, usersChildOnScopeBroadcast);
+
+    // function usersChildOnRootBroadcast(events, broadcastUser) {
+    //   vm.broadcastUser = broadcastUser;
+    //   console.log('usersChildOnRootBroadcast, events.name: ' + events.name);
+    // }
+
+    function usersChildOnScopeBroadcast(events, broadcastUser) {
+      vm.broadcastUser = broadcastUser;
+      console.log('usersChildOnScopeBroadcast, events.name: ' + events.name);
+    }
+
+  }
+})();
diff --git a/angularjs/showcase/src/showcase/app/users/users.constants.js b/angularjs/showcase/src/showcase/app/users/users.constants.js
new file mode 100644
index 0000000..6fa1c3a
--- /dev/null
+++ b/angularjs/showcase/src/showcase/app/users/users.constants.js
@@ -0,0 +1,15 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('app.users')
+    .constant('USERS', {
+      ROOTSCOPE: {
+        BROADCAST: 'USERS_ROOTSCOPE_BROADCAST'
+      },
+      SCOPE: {
+        EMIT_FACT: 'USERS_SCOPE_EMIT_FACT'
+      }
+    });
+
+})();
diff --git a/angularjs/showcase/src/showcase/app/users/users.controller.js b/angularjs/showcase/src/showcase/app/users/users.controller.js
new file mode 100644
index 0000000..280c616
--- /dev/null
+++ b/angularjs/showcase/src/showcase/app/users/users.controller.js
@@ -0,0 +1,51 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('app.users')
+    .controller('UsersController', UsersController);
+
+  /**
+   * @ngdoc controller
+   * @name app.users.controller:UsersController
+   *
+   * @requires $rootScope
+   *
+   * <p>
+   * <br>
+   * {@link https://docs.angularjs.org/api/ng/service/$rootScope $rootScope}
+   * </p>
+   *
+   * @description
+   * UsersController controller.
+   */
+  /* @ngInject */
+  function UsersController($rootScope, $scope, USERS) {
+    var vm = this;
+    var rootScopeBroadcastUser = {
+      name: 'Snake',
+      lastName: 'Eyes',
+      city: 'classified'
+    };
+    var scopeBroadcastUser = {
+      name: 'Shana',
+      lastName: 'M. O\'Hara',
+      city: 'Atlanta'
+    };
+
+    vm.getRootScopeBroadcast = function () {
+      $rootScope.$broadcast(USERS.ROOTSCOPE.BROADCAST, rootScopeBroadcastUser);
+    };
+    vm.getScopeBroadcast = function () {
+      $scope.$broadcast(USERS.ROOTSCOPE.BROADCAST, scopeBroadcastUser);
+    };
+
+    $scope.$on(USERS.SCOPE.EMIT_FACT, usersOnEmitFact);
+
+    function usersOnEmitFact(events, emitFact) {
+      vm.emitFact = emitFact;
+      console.log('usersOnEmitFact, events.name: ' + events.name);
+    }
+  }
+
+})();
diff --git a/angularjs/showcase/src/showcase/app/users/users.controller.spec.js b/angularjs/showcase/src/showcase/app/users/users.controller.spec.js
new file mode 100644
index 0000000..971701b
--- /dev/null
+++ b/angularjs/showcase/src/showcase/app/users/users.controller.spec.js
@@ -0,0 +1,58 @@
+describe('app.users', function() {
+  'use strict';
+
+  var $rootScope;
+  var $scope;
+  var USERS;
+  var UsersController;
+
+  beforeEach(function() {
+    module('app.users');
+
+    inject(function($controller, _$rootScope_, _USERS_) {
+      $rootScope = _$rootScope_;
+      USERS = _USERS_;
+      $scope = $rootScope.$new();
+
+      jasmine.createSpy($rootScope, '$rootScope.$broadcast');
+      jasmine.createSpy($scope, '$scope.$broadcast');
+      UsersController = $controller('UsersController', {
+        $rootScope: $rootScope,
+        $scope: $scope,
+        USERS: _USERS_
+      });
+    });
+  });
+
+  describe('UsersController controller', function () {
+
+    it('should be created successfully', function () {
+      expect(UsersController).toBeDefined();
+    });
+
+    it('should be called $rootScope.$broadcast', function () {
+      var rootScopeBroadcastUser = {
+        name: 'Snake',
+        lastName: 'Eyes',
+        city: 'classified'
+      };
+
+      UsersController.getRootScopeBroadcast();
+
+      expect($rootScope.$broadcast).toHaveBeenCalledWith(USERS.ROOTSCOPE.BROADCAST, rootScopeBroadcastUser);
+    });
+
+    it('should be called $scope.$broadcast', function () {
+      var scopeBroadcastUser = {
+        name: 'Shana',
+        lastName: 'M. O\'Hara',
+        city: 'Atlanta'
+      };
+
+      UsersController.getScopeBroadcast();
+
+      expect($scope.$broadcast).toHaveBeenCalledWith(USERS.ROOTSCOPE.BROADCAST, scopeBroadcastUser);
+    });
+  });
+
+});
diff --git a/angularjs/showcase/src/showcase/app/users/users.html b/angularjs/showcase/src/showcase/app/users/users.html
new file mode 100644
index 0000000..ca0f256
--- /dev/null
+++ b/angularjs/showcase/src/showcase/app/users/users.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<div class="container" ng-controller="UsersController as vm">
+  <div>title = {{vm.emitFact.title}}</div>
+  <div>fact = {{vm.emitFact.fact}}</div>
+  <button type="button" class="btn btn-primary" ng-click="vm.getRootScopeBroadcast()">
+    $rootScope.$broadcast
+  </button>
+
+  <button type="button" class="btn btn-primary" ng-click="vm.getScopeBroadcast()">
+    $scope.$broadcast
+  </button>
+
+  <div class="container" ng-controller="UsersChildController as vm">
+    <div>name = {{vm.broadcastUser.name}}</div>
+    <div>lastname = {{vm.broadcastUser.lastName}}</div>
+    <div>city = {{vm.broadcastUser.city}}</div>
+
+    <button type="button" class="btn btn-primary" ng-click="vm.getEmit()">
+      $scope.$emit fact
+    </button>
+  </div>
+
+</div>
diff --git a/angularjs/showcase/src/showcase/app/users/users.module.js b/angularjs/showcase/src/showcase/app/users/users.module.js
new file mode 100644
index 0000000..0ea1180
--- /dev/null
+++ b/angularjs/showcase/src/showcase/app/users/users.module.js
@@ -0,0 +1,20 @@
+(function() {
+  'use strict';
+
+  /**
+   * @ngdoc overview
+   * @name app.users
+   *
+   * @requires app.core
+   *
+   * @description
+   * # app.users
+   *
+   * ## Module users.
+   * Module in charge of dealing with users.
+   */
+  angular.module('app.users', [
+    'app.core'
+  ]);
+
+})();
diff --git a/angularjs/showcase/src/showcase/app/users/users.route.js b/angularjs/showcase/src/showcase/app/users/users.route.js
new file mode 100644
index 0000000..62ca965
--- /dev/null
+++ b/angularjs/showcase/src/showcase/app/users/users.route.js
@@ -0,0 +1,37 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('app.users')
+    .config(route);
+
+  /**
+   * @ngdoc service
+   * @name app.users.route
+   *
+   * @requires $stateProvider
+   * @requires $urlRouterProvider
+   *
+   * <p>
+   * <br>
+   * {@link http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$stateProvider $stateProvider} <br>
+   * {@link http://angular-ui.github.io/ui-router/site/#/api/ui.router.router.$urlRouterProvider $urlRouterProvider}
+   * </p>
+   *
+   *
+   * @description
+   * Router configuration for users application.
+   */
+  /* @ngInject */
+  function route($stateProvider, $urlRouterProvider) {
+    var state = 'users';
+    var config = {
+      abstract: false,
+      url: '/users',
+      templateUrl: 'app/users/users.html'
+    };
+
+    $urlRouterProvider.otherwise(state);
+    $stateProvider.state(state, config);
+  }
+}());
diff --git a/angularjs/showcase/src/showcase/app/users/users.route.spec.js b/angularjs/showcase/src/showcase/app/users/users.route.spec.js
new file mode 100644
index 0000000..0131620
--- /dev/null
+++ b/angularjs/showcase/src/showcase/app/users/users.route.spec.js
@@ -0,0 +1,24 @@
+describe('app.users', function() {
+  'use strict';
+
+  describe('state', function() {
+    var view = {
+      users: 'app/users/users.html'
+    };
+    var $state;
+
+    beforeEach(function() {
+      module('app.users');
+
+      inject(function(_$state_) {
+        $state = _$state_;
+      });
+    });
+
+    it('should map /users route to users View template', function() {
+      expect($state.get('users').templateUrl).toEqual(view.users);
+    });
+
+  });
+
+});
diff --git a/angularjs/showcase/src/showcase/index.html b/angularjs/showcase/src/showcase/index.html
index 8eeeb35..cd6019f 100644
--- a/angularjs/showcase/src/showcase/index.html
+++ b/angularjs/showcase/src/showcase/index.html
@@ -59,6 +59,11 @@
     <script src="/src/showcase/app/welcome/welcome.module.js"></script>
     <script src="/src/showcase/app/welcome/welcome.route.js"></script>
     <script src="/src/showcase/app/welcome/welcome.controller.js"></script>
+    <script src="/src/showcase/app/users/users.module.js"></script>
+    <script src="/src/showcase/app/users/users.route.js"></script>
+    <script src="/src/showcase/app/users/users.controller.js"></script>
+    <script src="/src/showcase/app/users/users.constants.js"></script>
+    <script src="/src/showcase/app/users/users-child.controller.js"></script>
     <script src="/src/showcase/app/cars/cars.module.js"></script>
     <script src="/src/showcase/app/cars/cars.service.js"></script>
     <script src="/src/showcase/app/cars/cars.route.js"></script>