paunin/frontend-app_angtest.html

## frontend-app_angtest.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.2.26/angular-route.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="app2">
<div ng-controller="SayHelloController as hello">
    <button ng-click="sayHello('Dima')" ng-dblclick="sayHello('Dima',true)">{{text}}</button>
</div>
<h1>Router</h1>
<a href="#/route1/">Route 1</a> |
<a ng-href="#/route2/1/Dima">Route 2</a>

<div ng-view></div>

</body>
</html>

## frontend-app_app.js
angular.module('app', [])
    .provider('helloService', function () {
        var config = {
            symbol: '!'
        };
        return {
            setConfig: function (symbol) {
                config.symbol = symbol;
            },
            $get: ['$http', '$q', '$log', function ($http, $q, $log) {
                return {
                    say: function (name) {
                        return ('Hello ' + name + config.symbol);
                    },
                    sayAgain: function (name) {
                        var allqueries = $q.all([
                            $http.get('./index.html'),
                            $http.get('./index.html')
                        ]);

                        allqueries.then(
                            function (data) {
                                $log.info('HTTP Query ' + data[0].data)
                            },
                            function (data) {
                                $log.warn('Wrong http query!')
                            });

                        return ('Hello again ' + name + config.symbol);
                    }

                }
            }]
        }
    });

angular.module('app2', ['app', 'ngRoute'])
    .config(function (helloServiceProvider) {
        helloServiceProvider.setConfig('! :)')
    })
    .config(function ($routeProvider) {
        $routeProvider
            .when('/route1/', {
                templateUrl: 'tpls/route1.html'
            })
            .when('/route2/:userid/:username', {
                templateUrl: 'tpls/route2.html',
                controller: 'UserController',
                resolve: {
                    username: function ($route) {
                        return $route.current.params.username;
                    }
                }

            })
            .otherwise({
                templateUrl: 'tpls/noroute.html'
            })
    })
    .config(function ($locationProvider) {
        //$locationProvider.html5Mode(true);
    })
    .controller('SayHelloController', ['$scope', 'helloService','$rootScope', function ($scope, helloService, $rootScope) {
        $scope.text = 'HI!';
        $scope.sayHello = function (name, again) {
            $rootScope.$broadcast('myEvent','Event root parameter');
            $scope.$broadcast('myEvent','Event parameter');
            $scope.text = again && helloService.sayAgain(name) || helloService.say(name);
            console.log(helloService.say(name));

        };
    }])
    .controller('UserController', ['$scope', 'helloService', '$routeParams', 'username',
        function ($scope, helloService, $routeParams, username) {

            $scope.username = username;
            $scope.params = JSON.stringify($routeParams);
            $scope.sayHello = function () {
                alert($scope.helloText());
            };
            $scope.helloText = function () {
                return 'Hello Mr.' + $scope.username
            };
        }])
    .controller('DirectiveController',
        function () {
            this.sayYes = function () {
                alert('Yes');
            };
        })
    .directive('myDirective', function () {
        return {
            restrict: 'E',
            scope: {
                username: '@',
                helloText: '&'
            },
            templateUrl: 'tpls/directive.html',
            controller: ['$log', '$scope', function ($log, $scope) {

                this.makeDirective = function (text) {
                    $log.info(text+'[1]');
                };
                $scope.makeDirective = this.makeDirective;
            }]
        }
    })
    .directive('myDirective2', function () {
        return {
            restrict: 'E',
            require: '^myDirective',
            scope:{
                makeDirective2: '&makeDirective',
                helloText2: '&helloText',
                username: '@'
            },

            link: function(scope, element, attr, ctlr){
                scope.$on('myEvent', function(event, param){
                    console.log('catch event from scope '+param)
                });
                element.find('button').css({color : 'red'});
                scope.make = function(text){
                    ctlr.makeDirective(text+ '[2]');
                };


            },

            templateUrl: 'tpls/directive2.html'
        }
    });

## frontend-app_index.html
dima

## frontend-app_test2.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.2.26/angular-route.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="app2">
<div ng-controller="SayHelloController as hello">
    <button ng-click="sayHello('Dima')" ng-dblclick="sayHello('Dima',true)">{{text}}</button>
</div>
<h1>Router</h1>
<a href="#/route1/">Route 1</a> |
<a ng-href="#/route2/1/Dima">Route 2</a>

<div ng-view></div>


</body>
</html>

## frontend-app_tpls_directive.html
<button ng-click="makeDirective(helloText())">I.m.directive MAKE FUN</button>
<my-directive2 make-directive="makeDirective(helloText())" hello-text="helloText()"></my-directive2>

## frontend-app_tpls_directive2.html
<button ng-click="make(helloText2())">I.m.directive 2 button</button>
<button ng-click="makeDirective2(helloText2())">I.m.directive 2 button but run directive 1</button>

## frontend-app_tpls_noroute.html
<h2>No route :(</h2>

## frontend-app_tpls_route1.html
<h2>Route {{1+0}}</h2>

## frontend-app_tpls_route2.html
<h2>Route {{1+1}}</h2>
<div>{{params}}</div>
<div>{{username}}</div>
<button ng-click="sayHello()">Say hello from params</button>
<my-directive username="{{username}}" hello-text="helloText()"></my-directive>
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
	<script src="https://code.angularjs.org/1.2.26/angular-route.js"></script>
	<script src="app.js"></script>
	</head>
	<body ng-app="app2">
	<div ng-controller="SayHelloController as hello">
	<button ng-click="sayHello('Dima')" ng-dblclick="sayHello('Dima',true)">{{text}}</button>
	</div>
	<h1>Router</h1>
	<a href="#/route1/">Route 1</a> \|
	<a ng-href="#/route2/1/Dima">Route 2</a>

	<div ng-view></div>

	</body>
	</html>
	angular.module('app', [])
	.provider('helloService', function () {
	var config = {
	symbol: '!'
	};
	return {
	setConfig: function (symbol) {
	config.symbol = symbol;
	},
	$get: ['$http', '$q', '$log', function ($http, $q, $log) {
	return {
	say: function (name) {
	return ('Hello ' + name + config.symbol);
	},
	sayAgain: function (name) {
	var allqueries = $q.all([
	$http.get('./index.html'),
	$http.get('./index.html')
	]);

	allqueries.then(
	function (data) {
	$log.info('HTTP Query ' + data[0].data)
	},
	function (data) {
	$log.warn('Wrong http query!')
	});

	return ('Hello again ' + name + config.symbol);
	}

	}
	}]
	}
	});

	angular.module('app2', ['app', 'ngRoute'])
	.config(function (helloServiceProvider) {
	helloServiceProvider.setConfig('! :)')
	})
	.config(function ($routeProvider) {
	$routeProvider
	.when('/route1/', {
	templateUrl: 'tpls/route1.html'
	})
	.when('/route2/:userid/:username', {
	templateUrl: 'tpls/route2.html',
	controller: 'UserController',
	resolve: {
	username: function ($route) {
	return $route.current.params.username;
	}
	}

	})
	.otherwise({
	templateUrl: 'tpls/noroute.html'
	})
	})
	.config(function ($locationProvider) {
	//$locationProvider.html5Mode(true);
	})
	.controller('SayHelloController', ['$scope', 'helloService','$rootScope', function ($scope, helloService, $rootScope) {
	$scope.text = 'HI!';
	$scope.sayHello = function (name, again) {
	$rootScope.$broadcast('myEvent','Event root parameter');
	$scope.$broadcast('myEvent','Event parameter');
	$scope.text = again && helloService.sayAgain(name) \|\| helloService.say(name);
	console.log(helloService.say(name));

	};
	}])
	.controller('UserController', ['$scope', 'helloService', '$routeParams', 'username',
	function ($scope, helloService, $routeParams, username) {

	$scope.username = username;
	$scope.params = JSON.stringify($routeParams);
	$scope.sayHello = function () {
	alert($scope.helloText());
	};
	$scope.helloText = function () {
	return 'Hello Mr.' + $scope.username
	};
	}])
	.controller('DirectiveController',
	function () {
	this.sayYes = function () {
	alert('Yes');
	};
	})
	.directive('myDirective', function () {
	return {
	restrict: 'E',
	scope: {
	username: '@',
	helloText: '&'
	},
	templateUrl: 'tpls/directive.html',
	controller: ['$log', '$scope', function ($log, $scope) {

	this.makeDirective = function (text) {
	$log.info(text+'[1]');
	};
	$scope.makeDirective = this.makeDirective;
	}]
	}
	})
	.directive('myDirective2', function () {
	return {
	restrict: 'E',
	require: '^myDirective',
	scope:{
	makeDirective2: '&makeDirective',
	helloText2: '&helloText',
	username: '@'
	},

	link: function(scope, element, attr, ctlr){
	scope.$on('myEvent', function(event, param){
	console.log('catch event from scope '+param)
	});
	element.find('button').css({color : 'red'});
	scope.make = function(text){
	ctlr.makeDirective(text+ '[2]');
	};


	},

	templateUrl: 'tpls/directive2.html'
	}
	});
	<button ng-click="makeDirective(helloText())">I.m.directive MAKE FUN</button>
	<my-directive2 make-directive="makeDirective(helloText())" hello-text="helloText()"></my-directive2>
	<button ng-click="make(helloText2())">I.m.directive 2 button</button>
	<button ng-click="makeDirective2(helloText2())">I.m.directive 2 button but run directive 1</button>
	<h2>Route {{1+1}}</h2>
	<div>{{params}}</div>
	<div>{{username}}</div>
	<button ng-click="sayHello()">Say hello from params</button>
	<my-directive username="{{username}}" hello-text="helloText()"></my-directive>