psdcoder/angular-popups

## angular-popups
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div aaa>aaa</div>
  <!-- global state view -->
  <div ui-view>
    <div ui-view="content">

    </div>
  </div>
  <script type="text/javascript">
    function AppConfig($locationProvider, $routeProvider, $stateProvider, $urlRouterProvider) {
      $locationProvider.html5Mode(true).hashPrefix('!');

      $stateProvider
        .state('global', {
            abstract: true,
            controller: function () {
				console.log('global state');
		    }
        })
        .state('home', {
          parent: 'global',
          url: '/home',
          views: {
            content: {
 				controller: function () {
 					console.log('home state');
 				},
                template: '<h1>home</h1> <br> <a ui-sref="home.modal">to modal</a> <br> <a ui-sref="home">to home</a><div ui-view="modal"></div>'
            }
          },
          resolve: {
          	someData: function () {
          		return 'someData';
          	}
          }
        })
        .state('home.modal', {
          parent: 'home',
          url: '/modal',
          onEnter: function () {
              console.log('open modal');
          },
          views: {
            modal: {
            	controller: function (ModalService, someData) {
            		ModalService.open();
 					console.log('open modal in controller. with resolved data. Data: ', someData);
 				},
                template: 'modal content <br>  <a ui-sref="home">to home</a>'
            }
          }
        })
        .state('404', {
          parent: 'global',
          url: '/404',
          views: {
            content: {
            	controller: function () {
 					console.log('404 state');
 				},
                template: '<h1>404 page</h1>'
            }
          }
        })

      $urlRouterProvider.otherwise('404');
    }

    AppConfig.$inject = ['$locationProvider', '$routeProvider', '$stateProvider', '$urlRouterProvider'];

    function a1() {
      return {
        restrict: 'EA',
        link: function () {
          console.log('a1');
        }
      }
    }

    function a2() {
      return {
        restrict: 'EA',
        link: function () {
          console.log('a2');
        }
      }
    }
    function ModalService() {
    	this.open = function() {
    		console.log('open modal from ModalService');
    	}
    }

    angular.module('app', ['ngRoute', 'ui.router']).config(AppConfig);
    angular.module('app').directive('aaa', a1);
    angular.module('app').directive('aaa', a2);
    angular.module('app').service('ModalService', ModalService);
  </script>
</body>
	<!DOCTYPE html>
	<html ng-app="app">

	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>

	<body>
	<div aaa>aaa</div>
	<!-- global state view -->
	<div ui-view>
	<div ui-view="content">

	</div>
	</div>
	<script type="text/javascript">
	function AppConfig($locationProvider, $routeProvider, $stateProvider, $urlRouterProvider) {
	$locationProvider.html5Mode(true).hashPrefix('!');

	$stateProvider
	.state('global', {
	abstract: true,
	controller: function () {
	console.log('global state');
	}
	})
	.state('home', {
	parent: 'global',
	url: '/home',
	views: {
	content: {
	controller: function () {
	console.log('home state');
	},
	template: '<h1>home</h1> <br> <a ui-sref="home.modal">to modal</a> <br> <a ui-sref="home">to home</a><div ui-view="modal"></div>'
	}
	},
	resolve: {
	someData: function () {
	return 'someData';
	}
	}
	})
	.state('home.modal', {
	parent: 'home',
	url: '/modal',
	onEnter: function () {
	console.log('open modal');
	},
	views: {
	modal: {
	controller: function (ModalService, someData) {
	ModalService.open();
	console.log('open modal in controller. with resolved data. Data: ', someData);
	},
	template: 'modal content <br> <a ui-sref="home">to home</a>'
	}
	}
	})
	.state('404', {
	parent: 'global',
	url: '/404',
	views: {
	content: {
	controller: function () {
	console.log('404 state');
	},
	template: '<h1>404 page</h1>'
	}
	}
	})

	$urlRouterProvider.otherwise('404');
	}

	AppConfig.$inject = ['$locationProvider', '$routeProvider', '$stateProvider', '$urlRouterProvider'];

	function a1() {
	return {
	restrict: 'EA',
	link: function () {
	console.log('a1');
	}
	}
	}

	function a2() {
	return {
	restrict: 'EA',
	link: function () {
	console.log('a2');
	}
	}
	}
	function ModalService() {
	this.open = function() {
	console.log('open modal from ModalService');
	}
	}

	angular.module('app', ['ngRoute', 'ui.router']).config(AppConfig);
	angular.module('app').directive('aaa', a1);
	angular.module('app').directive('aaa', a2);
	angular.module('app').service('ModalService', ModalService);
	</script>
	</body>