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"
  }
}