/app_index.js

## app_index.js
var app = angular.module('main', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            template: '',
            controller: function($location) {
                var redirect = '/' + (new Date()).getFullYear() + '/';
                $location.path(redirect);
            }
        })
        .when('/:year/', {
            templateUrl: 'app/templates/home.html',
            controllerAs: 'vm',
            controller: function($routeParams) {
                var vm = this;
                vm.year = +$routeParams.year;
            },
        })
        .when('/about', {
            templateUrl: 'app/templates/about.html'
        })
        .otherwise({
            template: '<h1>Не знайдено</h1>' +
                '<p>Сторінку "{{vm.currentPage}}" не знайдено</p>' +
                '<button ng-click="vm.goBack()">Назад</button>',
            controllerAs: 'vm',
            controller: function($location) {
                var vm = this;
                vm.currentPage = $location.path();

                vm.goBack = function() {
                    window.history.back();
                };
            },
        });
});

app.directive('calendar', function() {
    return {
        restrict: 'E', // шукати цю директиву тільки серед елементів
        scope: { // Задання scope, означає що директива має ізольований простір імен
            // і не бачитиме змінні ззовні, окрім тих які ми протягнемо
            year: '@', // Собачка означає що це одностороння прив'язка з обчисленням виразу
            month: '@', // так, хтось може написати month="{{2+2}}" і ми отримаємо "4"
        },
        bindToController: true, // передати змінні зі scope в контролер
        // template, як і в when, задає вигляд нашої директиви
        template: '<pre class="month">{{vm.month_table}}</pre>',
        controllerAs: 'vm', // ім'я контрорела всередині директиви
        controller: function($scope) {
            var vm = this;
            $scope.$watch('vm.year', update); // слідкувати за зміною параметра year
            $scope.$watch('vm.month', update); // і за month, виконати update якщо щось зміниться
            function update() {
                // Тут ми реагуємо на зміну параметрів, зміною іншої змінної, на яку відреагує
                // шаблон, і перемалює директиву
                vm.month_table = cal.text(vm.year, vm.month - 1);
            };
        },
    };
});

## app_style.css
* {
    margin: 0;
    padding: 0;
}
#content {
    padding: 50px;
}

nav {
    min-height: 50px;
    border-bottom: 1px solid black;
    width: 100%;
    position: relative;
}

nav div {
    position: absolute;
    bottom: 0;
    left: 0;
}

nav a {
    height: 100%;
    padding: 5px;
    display: block;
    float: left;
}

nav a.active {
    text-decoration: none;
    font-weight: bold;
    color: black;

    border: 1px solid black;
    border-radius: 5px 5px 0 0;

    border-bottom: 1px solid white; /* clear bottom border of nav block */
    margin-bottom: -1px;            /* we need to move 1px below to clear it */

}

.month {
    width: 180px;
    height: 130px;
    padding: 5px;
    margin: 10px;
    float: left;
    border: 1px solid #eee;
}

## app_templates_home.html
<h1>Календар {{vm.year}}</h1>
<p>
    <a href="#!/{{vm.year - 1}}">Попередній ({{vm.year - 1}})</a>
    <a href="#!/{{vm.year + 1}}">Наступний ({{vm.year + 1}})</a>
</p>
<calendar
    ng-repeat="month in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]"
    year="{{vm.year}}"
    month="{{month}}"
></calendar>

## app_templates_navigation.html
<div>
    <a href="#!/" class="active">🏠</a>
    <a href="#!/about">Про проект</a>
</div>

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Календар на 2016-тий рік</title>
        <link rel="stylesheet" href="app/style.css" />
    </head>
    <body ng-app="main">
        <nav ng-include="'app/templates/navigation.html'"></nav>
        <div id="content" ng-view></div>

        <script src="node_modules/angular/angular.js"></script>
        <script src="node_modules/angular-route/angular-route.js"></script>
        <script src="https://rawgit.com/bunyk/bunyk.github.com/master/dodecahedron/cal.js"></script>
        <script src="app/index.js"></script>
    </body>
</html>

## package.json
{
  "name": "tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "angular": "^1.6.4",
    "angular-route": "^1.6.4"
  }
}
	var app = angular.module('main', ['ngRoute']);

	app.config(function($routeProvider) {
	$routeProvider
	.when('/', {
	template: '',
	controller: function($location) {
	var redirect = '/' + (new Date()).getFullYear() + '/';
	$location.path(redirect);
	}
	})
	.when('/:year/', {
	templateUrl: 'app/templates/home.html',
	controllerAs: 'vm',
	controller: function($routeParams) {
	var vm = this;
	vm.year = +$routeParams.year;
	},
	})
	.when('/about', {
	templateUrl: 'app/templates/about.html'
	})
	.otherwise({
	template: '<h1>Не знайдено</h1>' +
	'<p>Сторінку "{{vm.currentPage}}" не знайдено</p>' +
	'<button ng-click="vm.goBack()">Назад</button>',
	controllerAs: 'vm',
	controller: function($location) {
	var vm = this;
	vm.currentPage = $location.path();

	vm.goBack = function() {
	window.history.back();
	};
	},
	});
	});

	app.directive('calendar', function() {
	return {
	restrict: 'E', // шукати цю директиву тільки серед елементів
	scope: { // Задання scope, означає що директива має ізольований простір імен
	// і не бачитиме змінні ззовні, окрім тих які ми протягнемо
	year: '@', // Собачка означає що це одностороння прив'язка з обчисленням виразу
	month: '@', // так, хтось може написати month="{{2+2}}" і ми отримаємо "4"
	},
	bindToController: true, // передати змінні зі scope в контролер
	// template, як і в when, задає вигляд нашої директиви
	template: '<pre class="month">{{vm.month_table}}</pre>',
	controllerAs: 'vm', // ім'я контрорела всередині директиви
	controller: function($scope) {
	var vm = this;
	$scope.$watch('vm.year', update); // слідкувати за зміною параметра year
	$scope.$watch('vm.month', update); // і за month, виконати update якщо щось зміниться
	function update() {
	// Тут ми реагуємо на зміну параметрів, зміною іншої змінної, на яку відреагує
	// шаблон, і перемалює директиву
	vm.month_table = cal.text(vm.year, vm.month - 1);
	};
	},
	};
	});
	* {
	margin: 0;
	padding: 0;
	}
	#content {
	padding: 50px;
	}

	nav {
	min-height: 50px;
	border-bottom: 1px solid black;
	width: 100%;
	position: relative;
	}

	nav div {
	position: absolute;
	bottom: 0;
	left: 0;
	}

	nav a {
	height: 100%;
	padding: 5px;
	display: block;
	float: left;
	}

	nav a.active {
	text-decoration: none;
	font-weight: bold;
	color: black;

	border: 1px solid black;
	border-radius: 5px 5px 0 0;

	border-bottom: 1px solid white; /* clear bottom border of nav block */
	margin-bottom: -1px; /* we need to move 1px below to clear it */

	}

	.month {
	width: 180px;
	height: 130px;
	padding: 5px;
	margin: 10px;
	float: left;
	border: 1px solid #eee;
	}
	<h1>Календар {{vm.year}}</h1>
	<p>
	<a href="#!/{{vm.year - 1}}">Попередній ({{vm.year - 1}})</a>
	<a href="#!/{{vm.year + 1}}">Наступний ({{vm.year + 1}})</a>
	</p>
	<calendar
	ng-repeat="month in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]"
	year="{{vm.year}}"
	month="{{month}}"
	></calendar>
	<div>
	<a href="#!/" class="active">🏠</a>
	<a href="#!/about">Про проект</a>
	</div>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Календар на 2016-тий рік</title>
	<link rel="stylesheet" href="app/style.css" />
	</head>
	<body ng-app="main">
	<nav ng-include="'app/templates/navigation.html'"></nav>
	<div id="content" ng-view></div>

	<script src="node_modules/angular/angular.js"></script>
	<script src="node_modules/angular-route/angular-route.js"></script>
	<script src="https://rawgit.com/bunyk/bunyk.github.com/master/dodecahedron/cal.js"></script>
	<script src="app/index.js"></script>
	</body>
	</html>
	{
	"name": "tutorial",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"author": "",
	"license": "ISC",
	"dependencies": {
	"angular": "^1.6.4",
	"angular-route": "^1.6.4"
	}
	}