Create a gist now

Instantly share code, notes, and snippets.

anonymous /app_index.js
Created Jun 1, 2017

What would you like to do?
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>
<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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment