Тому що чим швидше ми зробимо щось що зможемо помацати поклацати – тим менше сили волі буде треба для підтримки мотивації. (Так, я знаю що писати таку публікацію два роки – то задовго, але краще пізно ніж ніколи. Сподіваюсь що хоча б тому хто буде підтримувати проекти на Angular 1 (а я не впевнений що їх багато мігрує на новіші версії) це знадобиться).
Варто мати встановленим NodeJS. Він має менеджер пакетів npm. І з його допомогою ми скачаємо всі необхідні бібліотеки. Ми ж перестали шукати софт на сайтах ще коли почали користуватись менеджерами пакетів в Linux, те ж саме ми робимо коли нам треба бібліотека для python, то чим розробка для браузерів гірша?
Тут я був написав кілька абзаців про те як за допомогою npm поставити bower (інший менеджер пакетів), але це трохи збочення, бо npm нас може й сам задовольнити. Тому поки що обійдемось. Let the hacking begin.
Створюємо порожню директорію для нашого проекту, і в ній виконуємо:
npm init
На всі питання даємо стандартну відповідь. Це створить нам файл package.json куди прописуватимуться залежності нашого проекту (встановлені бібліотеки), і директорію для зберігання коду цих бібліотек.g
Поставимо наприклад Angular, і одну бібліотеку для нього, angular-route, яка допомже нам писати односторінковий застосунок:
npm install angular --save npm install angular-route --save
--save просить окрім того що скачати код в node_modules/, також прописати нову залежність в package.json.
Тепер можемо закинути якийсь код в 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></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="app/index.js"></script>
</body>
</html>
Сторінка порожня, але то нічого, ми її динамічно наповнимо календарями за будь-який рік і місяць. Для цього треба створити файл app/index.js. В цьому файлі помістимо створення модуля main, який буде підтягувати інші модулі як залежності.
Модуль створюється викликом angular.module(name, dependencies_list), де name – стрічка що містить ім’я модуля за яким до нього звертатимемось при потребі (як от в html вище, ще ми згадуємо модуль "main" в атрибуті ng-app), а dependencies_list – модулі які треба мати перед тим як створити наш.
Далі метод config об’єкта модуля дозволить описати його ініціалізацію. Йому передається список залежностей які треба впровадити (inject dependency), а в кінці нього функція яка ці всі залежності використовує. Впровадження залежностей це не так страшно як звучить, це просто означає що angular сам за іменем знайде або створить об’єкт який нам треба, і передасть його як параметр.
Ініціалізуємо все так:
var app = angular.module('main', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: '<h1>Домашня</h1><p>Покажемо тут календар</p>',
})
.when('/about', {
template: '<h1>Про проект</h1><p>Тут буде пояснення як все працює</p>',
})
.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();
};
},
});
});
$routeProvider.when('/'), каже нашому роутеру (системі яка пов’язує адреси та вміст сторінки), прив’язати певні адреси до певних сторінок і контролерів до тих сторінок. Вони не цікаві, бо містять лише параметр template – що показати. $routeProvider.otherwise(), каже що показувати якщо ми перейдемо на якусь невідому адресу. Він містить також параметри controller, який задає функцію яка заповнить свій контекст this всім чим захоче, і це все буде доступним в шаблоні під іменем яке ми задаємо в controllerAs. currentPage містить url хеша сторінки яка відкрита в браузері, функція goBack поверне користувача на один крок назад в історії переходів.
Про те як це все прив’язується до шаблону – читайте в коротенькому вступі до AngularJS.
Тепер, якщо ми оновимо нашу сторінку в браузері, її адреса закінчуватиметься так: /index.html#!/. Все що йде після символа “дієз” (#) називається хешем, і це частина адреси, зміна якої не викликає перезавантаження сторінки. Хешем маршрутизуються односторінкові застосунки, бо якщо URL перед ним не змінюється (а він не змінюється, браузер не відішле новий запит). Знак оклику – то SEO від Google, не зважайте.
Ми можемо змінити сторінку на /index.html#!/about або на якусь іншу. Але з клавіатури це робити важко (особливо якщо на телефоні, давайте додамо навігацію.
Можна додати до index.html в блок navдва посилання, і побачити як за різними адресами показують різний вміст:
<nav>
<a href="#!/">
</a>
<a href="#!/about">Про проект</a>
</nav>
Ось CSS аби ті посилання виглядали гарно (можна покласти його в app/style.css, ми ж його вже підвантажуємо в index.html):
* {
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; /* витирає нижню границю елемента nav */
margin-bottom: -1px; /* треба перевіститись на 1px вниз щоб її перетерти */
}
Воно ще не до кінця гарно, але скоро буде, ще трохи покращень. Наш код якось не дуже гарно виглядає, давайте переформатуємо трішки. Для початку, створимо директорію app/templates, і замінимо елемент nav таким:
<nav ng-include="'app/templates/navigation.html'"></nav>
Ну а в navigation.html покладемо попередній вміст елемента nav:
<div>
<a href="#!/" class="active"></a>
<a href="#!/about">Про проект</a>
</div>
Друга проблема – ми описуємо вміст сторінок прямо в головному модулі. Це з одного боку добре, бо всі сторінки завантажуються зразу, але з іншого боку – не добре, бо в JavaScript нема багаторядкових стрічок, та й підсвітка html синтаксису, яка допомагає швидше побачити помилки, всередині стрічок не працює. Щоб виправити цю проблему, заміюємо параметр template в обох when на
templateUrl: 'app/templates/home.html'
...
templateUrl: 'app/templates/about.html'
І переносимо вміст який треба відобразити у вказані файли. Ок, виглядає супер, може нарешті геренуватимемо календар динамічно?
Для цього нам треба функцію яка його малюватиме. Колись я написав модуль з такою функцією на CoffeScript: ось код. Щоб додати скомпільоване джерело цього модуля собі на сторінку, можна використати сервіс CDN http://rawgit.com/ :
<script src="https://rawgit.com/bunyk/bunyk.github.com/master/dodecahedron/cal.js"></script>
Тепер, якщо в консолі ми напишемо
cal.text(2017, 5)
То отримаємо:
"Червень 2017
Пн Вт Ср Чт Пт Сб Нд
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
Як вставити це на сторінку? Директива! Вставимо на нашу сторінку app/templates/home.html такий код:
<calendar
ng-repeat="month in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]"
year="2017"
month="{{month}}"
></calendar>
Директива може бути елементом, може бути атрибутом елемента, може навіть прив’язуватись як клас, але найпопулярнішими є директиви як елементи. За замовчуванням, браузер не знає що то за елемент calendar, тому не відобразить нічого. Нам треба описати директиву. В фалі app/index.js додаємо:
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);
};
},
};
});
Для краси відображення місяців можна додати до стилів
.month {
width: 180px;
height: 130px;
padding: 5px;
margin: 10px;
float: left;
border: 1px solid #eee;
}
Тепер, було б добре якби календар був не лише на один рік. Це вже зовсім просто. Додаємо нову сторінку:
.when('/:year/', {
templateUrl: 'app/templates/home.html',
controllerAs: 'vm',
controller: function($routeParams) {
var vm = this;
vm.year = +$routeParams.year; // перетворюємо на int
},
})
Тут контролер просто отримує параметр з URL, і записує його собі, аби він був доступний в шаблоні. Шаблон теж перепишемо, аби він показував календар за вибраний рік, і додамо посилання на наступний і попередній роки:
<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>
Що показувати на домашній сторінці? Давайте показувати поточний рік. Для цього можемо описати роут без шаблону, з одним лише контролером який робить перенаправлення:
.when('/', {
template: '',
controller: function($location) {
var redirect = '/' + (new Date()).getFullYear() + '/';
$location.path(redirect);
}
})
І це все! Ми маємо календар на всі роки:
Вміст всіх файлів можна подивитись тут, я тільки замінив “/” на “_”, бо Gist не дозволяє таке в іменах файлів.
Якщо ви успішно пройшли цей вступ, маєте досвід програмування на JavaScript чи інших мовах, присилайте резюме за адресою roman@proofpilot.com, там ви потрібні. 
Filed under: Кодерство, Павутина Tagged: Angular, JavaScript
