bbraithwaite/rootScope.html Secret

## rootScope.html
<html>
  <head>
    <title>rootScope Examples</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine-html.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/boot.min.js"></script>
    <script type="text/javascript" src="https://code.angularjs.org/1.4.0-rc.2/angular.js"></script>
    <script type="text/javascript" src="https://code.angularjs.org/1.4.0-rc.2/angular-mocks.js"></script>
  </head>
  <body>
    <script type="text/javascript">

      var app = angular.module('search', []);

      app.factory('searchService', function (){
        return {
          search: function(query) {
            // promise functionality here...
          }
        }
      });

      app.controller('SearchController', function ($scope, searchService) {
        searchService.search($scope.query)
          .then(function(data) {
            $scope.results = data;
          })
          .catch(function() {
            $scope.error = 'There has been an error!';
          });
      });

      app.controller('SearchControllerWithRootScope', function ($rootScope, $scope) {
        $rootScope.globalMenu = [
          'item 1',
          'item 2',
          'item 3'
        ];

        $scope.results = [
          'child item 1',
          'child item 2',
          'child item 3'
        ];
      });

      app.controller('NestedController', function ($scope) {
        // note that $scope.query is taken from the parent scope
        $scope.message = 'You searched for: ' + $scope.query;
      });

      app.directive('searchControl', function() {
        return {
          replace: true,
          restrict: 'E',
          scope: false, // sets isolated scope
          template: '<input type="search" placeholder="search...">'
        };
      });

      app.directive('searchControlScope', function() {
        return {
          replace: true,
          restrict: 'E',
          scope: true, // sets isolated scope to true!
          template: '<input type="search" placeholder="{{placeholder}}">'
        };
      });


      app.directive('searchResult', function() {
        return {
          replace: true,
          restrict: 'E',
          scope: {
            result: '='
          },
          template: '<div><h3>{{ result.title }}</h3></div>'
        };
      });

      describe('Directive Tests: Search Result', function () {

        var $compile;
        var $rootScope;

        beforeEach(module('search'));

        beforeEach(inject(function(_$rootScope_, _$compile_) {
          $rootScope = _$rootScope_;
          $compile = _$compile_;
        }));

        it('should render directive', function () {

          var innerHtml = '<!-- ngRepeat: result in results track by result.id --><div ng-repeat="result in results track by result.id" result="result" class="ng-scope ng-isolate-scope"><h3 class="ng-binding">Result 1</h3></div><!-- end ngRepeat: result in results track by result.id --><div ng-repeat="result in results track by result.id" result="result" class="ng-scope ng-isolate-scope"><h3 class="ng-binding">Result 2</h3></div><!-- end ngRepeat: result in results track by result.id -->'

          $rootScope.results = [{
            id: 1,
            title: 'Result 1'
          },
          {
            id: 2,
            title: 'Result 2'
          }];

          var element = $compile("<div><search-result ng-repeat='result in results track by result.id' result='result'></search-result></div>")($rootScope);

          $rootScope.$apply();

          expect(element.html()).toBe(innerHtml);
          expect($rootScope.$countChildScopes()).toBe(4);
          expect($rootScope.$countWatchers()).toBe(5);
        });

      });

      describe('Directive Tests: Simple', function () {

        var $compile;
        var $rootScope;

        beforeEach(module('search'));

        beforeEach(inject(function(_$rootScope_, _$compile_) {
          $rootScope = _$rootScope_;
          $compile = _$compile_;
        }));

        it('should render directive', function () {
          $rootScope.query = 'tutorials';
          var element = $compile("<search-control></search-control>")($rootScope);

          $rootScope.$digest();

          expect(element[0].outerHTML).toBe('<input type="search" placeholder="search..." class="ng-scope">');
          expect($rootScope.$countChildScopes()).toBe(0);
          expect($rootScope.$countWatchers()).toBe(0);
        });

      });

      describe('Directive Tests: Scope', function () {

        var $compile;
        var $rootScope;

        beforeEach(module('search'));

        beforeEach(inject(function(_$rootScope_, _$compile_) {
          $rootScope = _$rootScope_;
          $compile = _$compile_;
        }));

        it('should render directive', function () {
          $rootScope.placeholder = 'search';

          var element = $compile("<search-control-scope></search-control-scope>")($rootScope);

          $rootScope.$digest();

          expect($rootScope.$countChildScopes()).toBe(1);
          expect($rootScope.$countWatchers()).toBe(1);
        });

      });

      describe('Controller that uses rootScope and child Scope', function () {

        var $scope;
        var $rootScope;

        beforeEach(module('search'));

        beforeEach(inject(function($controller, _$rootScope_) {
          $rootScope = _$rootScope_;
          $scope = _$rootScope_.$new();

          $controller('SearchControllerWithRootScope', {
            $rootScope: $rootScope,
            $scope: $scope
          });
        }));

        it('should set rootScope properties', function () {
          expect($scope.globalMenu.length).toBe(3);
          expect($scope.results.length).toBe(3);
        });

      });

      describe('Controller that uses nested Controllers', function () {

        var $controller;
        var $childScope;
        var $scope;

        beforeEach(module('search'));

        beforeEach(inject(function(_$controller_, _$rootScope_) {
          $controller = _$controller_;
          $rootScope = _$rootScope_;
          $scope = _$rootScope_.$new();
        }));

        it('should set rootScope properties', function () {
          $childScope = $scope.$new();
          $scope.query = 'angular tutorials';
          $controller('NestedController', {
            $scope: $childScope
          });
          expect($childScope.message).toBe('You searched for: angular tutorials');
          expect($rootScope.$countChildScopes()).toBe(2);
          expect($rootScope.$countWatchers()).toBe(0);
        });

      });

      describe('Search Tests with Promises', function () {

        var $scope;
        var $rootScope;
        var $q;

        beforeEach(module('search'));

        beforeEach(inject(function($controller, _$rootScope_, _$q_, searchService) {
          $q = _$q_;
          $rootScope = _$rootScope_;
          $scope = _$rootScope_.$new();

          // Setup the Promise
          searchServiceDeferred = _$q_.defer();
          spyOn(searchService, 'search').and.returnValue(searchServiceDeferred.promise);
          $controller('SearchController', { $scope: $scope, searchService: searchService });
        }));

        it('should resolve promose', function () {
          // Resolve the promise and call $apply to start digest cycle.
          searchServiceDeferred.resolve([{ id: 1 }, { id: 2 }]);
          $rootScope.$apply();

          expect($scope.results).not.toBe(undefined);
          expect($scope.error).toBe(undefined);
        });

        it('should reject promise', function () {
          // Reject the promise and call $apply to start digest cycle.
          searchServiceDeferred.reject();
          $rootScope.$apply();

          expect($scope.results).toBe(undefined);
          expect($scope.error).toBe('There has been an error!');
        });

      });

    </script>

  </body>
</html>
	<html>
	<head>
	<title>rootScope Examples</title>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/jasmine-html.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.3/boot.min.js"></script>
	<script type="text/javascript" src="https://code.angularjs.org/1.4.0-rc.2/angular.js"></script>
	<script type="text/javascript" src="https://code.angularjs.org/1.4.0-rc.2/angular-mocks.js"></script>
	</head>
	<body>
	<script type="text/javascript">

	var app = angular.module('search', []);

	app.factory('searchService', function (){
	return {
	search: function(query) {
	// promise functionality here...
	}
	}
	});

	app.controller('SearchController', function ($scope, searchService) {
	searchService.search($scope.query)
	.then(function(data) {
	$scope.results = data;
	})
	.catch(function() {
	$scope.error = 'There has been an error!';
	});
	});

	app.controller('SearchControllerWithRootScope', function ($rootScope, $scope) {
	$rootScope.globalMenu = [
	'item 1',
	'item 2',
	'item 3'
	];

	$scope.results = [
	'child item 1',
	'child item 2',
	'child item 3'
	];
	});

	app.controller('NestedController', function ($scope) {
	// note that $scope.query is taken from the parent scope
	$scope.message = 'You searched for: ' + $scope.query;
	});

	app.directive('searchControl', function() {
	return {
	replace: true,
	restrict: 'E',
	scope: false, // sets isolated scope
	template: '<input type="search" placeholder="search...">'
	};
	});

	app.directive('searchControlScope', function() {
	return {
	replace: true,
	restrict: 'E',
	scope: true, // sets isolated scope to true!
	template: '<input type="search" placeholder="{{placeholder}}">'
	};
	});


	app.directive('searchResult', function() {
	return {
	replace: true,
	restrict: 'E',
	scope: {
	result: '='
	},
	template: '<div><h3>{{ result.title }}</h3></div>'
	};
	});

	describe('Directive Tests: Search Result', function () {

	var $compile;
	var $rootScope;

	beforeEach(module('search'));

	beforeEach(inject(function(_$rootScope_, _$compile_) {
	$rootScope = _$rootScope_;
	$compile = _$compile_;
	}));

	it('should render directive', function () {

	var innerHtml = '<!-- ngRepeat: result in results track by result.id --><div ng-repeat="result in results track by result.id" result="result" class="ng-scope ng-isolate-scope"><h3 class="ng-binding">Result 1</h3></div><!-- end ngRepeat: result in results track by result.id --><div ng-repeat="result in results track by result.id" result="result" class="ng-scope ng-isolate-scope"><h3 class="ng-binding">Result 2</h3></div><!-- end ngRepeat: result in results track by result.id -->'

	$rootScope.results = [{
	id: 1,
	title: 'Result 1'
	},
	{
	id: 2,
	title: 'Result 2'
	}];

	var element = $compile("<div><search-result ng-repeat='result in results track by result.id' result='result'></search-result></div>")($rootScope);

	$rootScope.$apply();

	expect(element.html()).toBe(innerHtml);
	expect($rootScope.$countChildScopes()).toBe(4);
	expect($rootScope.$countWatchers()).toBe(5);
	});

	});

	describe('Directive Tests: Simple', function () {

	var $compile;
	var $rootScope;

	beforeEach(module('search'));

	beforeEach(inject(function(_$rootScope_, _$compile_) {
	$rootScope = _$rootScope_;
	$compile = _$compile_;
	}));

	it('should render directive', function () {
	$rootScope.query = 'tutorials';
	var element = $compile("<search-control></search-control>")($rootScope);

	$rootScope.$digest();

	expect(element[0].outerHTML).toBe('<input type="search" placeholder="search..." class="ng-scope">');
	expect($rootScope.$countChildScopes()).toBe(0);
	expect($rootScope.$countWatchers()).toBe(0);
	});

	});

	describe('Directive Tests: Scope', function () {

	var $compile;
	var $rootScope;

	beforeEach(module('search'));

	beforeEach(inject(function(_$rootScope_, _$compile_) {
	$rootScope = _$rootScope_;
	$compile = _$compile_;
	}));

	it('should render directive', function () {
	$rootScope.placeholder = 'search';

	var element = $compile("<search-control-scope></search-control-scope>")($rootScope);

	$rootScope.$digest();

	expect($rootScope.$countChildScopes()).toBe(1);
	expect($rootScope.$countWatchers()).toBe(1);
	});

	});

	describe('Controller that uses rootScope and child Scope', function () {

	var $scope;
	var $rootScope;

	beforeEach(module('search'));

	beforeEach(inject(function($controller, _$rootScope_) {
	$rootScope = _$rootScope_;
	$scope = _$rootScope_.$new();

	$controller('SearchControllerWithRootScope', {
	$rootScope: $rootScope,
	$scope: $scope
	});
	}));

	it('should set rootScope properties', function () {
	expect($scope.globalMenu.length).toBe(3);
	expect($scope.results.length).toBe(3);
	});

	});

	describe('Controller that uses nested Controllers', function () {

	var $controller;
	var $childScope;
	var $scope;

	beforeEach(module('search'));

	beforeEach(inject(function(_$controller_, _$rootScope_) {
	$controller = _$controller_;
	$rootScope = _$rootScope_;
	$scope = _$rootScope_.$new();
	}));

	it('should set rootScope properties', function () {
	$childScope = $scope.$new();
	$scope.query = 'angular tutorials';
	$controller('NestedController', {
	$scope: $childScope
	});
	expect($childScope.message).toBe('You searched for: angular tutorials');
	expect($rootScope.$countChildScopes()).toBe(2);
	expect($rootScope.$countWatchers()).toBe(0);
	});

	});

	describe('Search Tests with Promises', function () {

	var $scope;
	var $rootScope;
	var $q;

	beforeEach(module('search'));

	beforeEach(inject(function($controller, _$rootScope_, _$q_, searchService) {
	$q = _$q_;
	$rootScope = _$rootScope_;
	$scope = _$rootScope_.$new();

	// Setup the Promise
	searchServiceDeferred = _$q_.defer();
	spyOn(searchService, 'search').and.returnValue(searchServiceDeferred.promise);
	$controller('SearchController', { $scope: $scope, searchService: searchService });
	}));

	it('should resolve promose', function () {
	// Resolve the promise and call $apply to start digest cycle.
	searchServiceDeferred.resolve([{ id: 1 }, { id: 2 }]);
	$rootScope.$apply();

	expect($scope.results).not.toBe(undefined);
	expect($scope.error).toBe(undefined);
	});

	it('should reject promise', function () {
	// Reject the promise and call $apply to start digest cycle.
	searchServiceDeferred.reject();
	$rootScope.$apply();

	expect($scope.results).toBe(undefined);
	expect($scope.error).toBe('There has been an error!');
	});

	});

	</script>

	</body>
	</html>