Code for AngularJS tutorial
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> |
<!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" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment