.gitignore

@@ -0,0 +1 @@
+frontend/vendor

README.md

@@ -0,0 +1,22 @@
+# Objective
+
+I want to learn the following technologies:
+
+* [Bower](http://bower.io)
+* [AngularJS](http://angularjs.org)
+
+Later:
+
+* [Go](http://golang.org)
+* [Grunt](http://gruntjs.com)
+* [Sass](http://sass-lang.com)
+* [Slim Framework](http://www.slimframework.com/)
+* [W3.CSS](http://www.w3schools.com/w3css/) / [Bootstrap](http://getbootstrap.com)
+
+This repository is used to keep track of the progress.
+
+# Tutorials
+
+* [AngularJS Tutorial Step 0](https://docs.angularjs.org/tutorial/step_00)
+* [Managing Frontend Dependencies & Deployment Part 1: Bower](https://blog.engineyard.com/2014/frontend-dependencies-management-part-1)
+* [Node, Grunt, Bower and Yeoman -- A Modern web dev's Toolkit](http://juristr.com/blog/2014/08/node-grunt-yeoman-bower/)

angular/assets/js/EditorDirective.js

@@ -1,40 +0,0 @@
-angular.module('MyApp')
-
-.directive('edit', function ($parse) {
-	var directive = {}
-
-	directive.scope = true
-	directive.link = function (scope, element, attrs) {
-		scope.editor = {}
-		scope.item = {}
-
-		var callback = function (item) {}
-		var model = $parse(attrs.edit)
-		var editor = scope.editor
-
-		if (attrs.callback != null)
-			callback = $parse(attrs.callback)(scope)
-
-		editor.save = function () {
-			var data = model(scope)
-			callback(scope.item)
-			data[editor.key] = scope.item
-			editor.key = null
-		}
-
-		editor.revert = function () {
-			editor.key = null
-		}
-
-		scope.$watch('editor.key', function (value) {
-			if (value == null) {
-				scope.item = {}
-			} else {
-				var data = model(scope)
-				scope.item = angular.copy(data[value] || {})
-			}
-		})
-	}
-
-	return directive
-})

angular/assets/js/MyApp.js

@@ -1,30 +0,0 @@
-angular.module('MyApp', [])
-
-.controller('Demo', function ($scope) {
-	$scope.string1 = "Hello"
-	$scope.string2 = "World"
-
-	$scope.pagination = { limit: 5 }
-
-	$scope.demodata = [
-		{ Name: "Answer", Number: 42 },
-		{ Name: "Trek", Number: 47 },
-		{ Name: "Eight", Number: 8 },
-	]
-
-	$scope.moredata = []
-
-	$scope.remove = function (editor, array, index) {
-		array.splice(index, 1)
-		editor.key = null
-	}
-
-	$scope.log = function (x) {
-		console.log(x)
-	}
-
-	for (var i = 0; i < 100; i++) {
-		var x = Math.random().toString().substr(2, 8)
-		$scope.moredata.push({ Name: x, Number: x })
-	}
-})

angular/assets/js/PaginationDirective.js

@@ -1,115 +0,0 @@
-angular.module('MyApp')
-
-.directive('pagination', function ($parse) {
-	var util = {}
-	var directive = {}
-
-	directive.restrict = 'A'
-	directive.scope = true
-	directive.link = function (scope, element, attrs) {
-		scope.pages = []
-		if (scope.pagination == null)
-			scope.pagination = {}
-
-		var params = scope.pagination
-
-		if (params.page == null)
-			params.page = util.init.page
-		if (params.limit == null)
-			params.limit = util.init.limit
-		if (params.buttons == null)
-			params.buttons = util.init.buttons
-
-		var recalc = function() {
-			scope.pages = util.calculate(params);
-		}
-
-		scope.$watch('pagination.total', recalc);
-		scope.$watch('pagination.page', recalc);
-		scope.$watch('pagination.limit', recalc);
-	}
-
-	util.init = {
-		page: 1,
-		limit: 10,
-		buttons: [
-			// Arrow indices
-			{pos: 'arrows', current: 4, prev: 3, next: 5},
-			{pos: 4, diff: 0},
-			{pos: 5, diff: 1},
-			{pos: 6, diff: 2},
-			{pos: 7, diff: 5},
-			{pos: 8, diff: 'max'},
-			{pos: 3, diff: -1},
-			{pos: 2, diff: -2},
-			{pos: 1, diff: -5},
-			{pos: 0, diff: 'min'},
-		],
-	}
-
-	util.clamp = function (x, min, max) {
-		if (x < min) return min;
-		if (x > max) return max;
-		return x;
-	}
-
-	util.calculate = function (params) {
-		var result = [];
-		var pos = [];
-
-		params.buttons.forEach(function (button) {
-			if (button.pos === 'arrows') {
-				result.current = button.current
-				result.prev = button.prev
-				result.next = button.next
-				return
-			}
-
-			var page = 0
-
-			if (button.diff === 'min')
-				page = params.min
-			else if (button.diff === 'max')
-				page = params.max
-			else
-				page = util.clamp(params.page + button.diff, params.min, params.max)
-
-			if (pos.indexOf(page) !== -1)
-				page = 'hide'
-
-			pos.push(page)
-			result[button.pos] = page
-		})
-
-		return result;
-	}
-
-	return directive
-})
-
-.filter('paginate', function() {
-	return function(data, params) {
-		var result = data
-		var start = 0
-
-		var limit = params.limit
-		var page = params.page
-
-		var max = Math.max(1, Math.ceil(data.length / limit))
-		var page = Math.min(page, max)
-
-		if (limit !== -1) {
-			start = (page - 1) * limit
-			result = data.slice(start, start + limit)
-		}
-
-		params.total = data.length
-		params.start = start + 1
-		params.end = start + result.length
-		params.page = page
-		params.min = 1
-		params.max = max
-
-		return result;
-	};
-})

angular/assets/js/SubScopeDirective.js

@@ -1,53 +0,0 @@
-angular.module('MyApp')
-
-.directive('subScope', ['subScopeUtils', function (util) {
-	var directive = util.directive()
-
-	directive.link = function (scope, element, attrs, controller, transclude) {
-		var key = attrs.subScope
-		var model = util.model(key)
-
-		scope.$watch('string', function(value) {
-			if (value.indexOf('Got in:') === 0)
-				return // prevent infinite calls
-			model.assign(scope.$parent, 'Got out: ' + value)
-		})
-
-		scope.$parent.$watch(key, function(value) {
-			if (value.indexOf('Got out:') === 0)
-				return // prevent infinite calls
-			scope.string = 'Got in: ' + value
-		})
-
-		util.transcluder(scope, element, transclude)
-	}
-
-	return directive
-}])
-
-.factory('subScopeUtils', function ($parse) {
-	var util = {}
-
-	util.model = function (expression) {
-		return $parse(expression)
-	}
-
-	util.directive = function () {
-		var result = {}
-		result.scope = true
-		result.transclude = true
-		result.template = '<input style="color: red" ng-model="string">'
-		return result
-	}
-
-	util.transcluder = function (scope, element, transclude) {
-		var cloneLinker = function (clone) {
-			if (clone.length !== 0) // If transcluded element is non-empty,
-				element.empty() // Remove already appended template
-			element.append(clone)
-		}
-		transclude(scope, cloneLinker)
-	}
-
-	return util
-})

angular/index.html

@@ -1,87 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-<title>Angular Tests</title>
-</head>
-
-<body ng-app="MyApp" ng-controller="Demo">
-
-<h1>Scoping</h1>
-
-<div>
-	<div style="background:#eee">
-		<input ng-model="string1"><br>
-		<input ng-model="string2">
-	</div>
-
-	<div sub-scope="string1">
-		<input style="color: blue" ng-model="string">
-		Scope {{ ok }} (Scope ok)
-	</div>
-	<div sub-scope="string2"></div>
-</div>
-
-<h1>Editor</h1>
-
-<div>
-
-	<button ng-click="log(demodata)">Print</button>
-
-	<table edit="demodata" callback="log">
-		<thead>
-			<th><button ng-click="editor.key = demodata.length">➕ New</button></th>
-		</thead>
-		<tbody>
-			<tr ng-repeat-start="row in demodata">
-				<td><button ng-click="editor.key = $index">✏</button></td>
-				<td><button ng-click="remove(editor, demodata, $index)">🚫</button></td>
-				<td colspan="2">{{ row.Name }}</td>
-			</tr>
-			<tr ng-repeat-end ng-if="editor.key === $index || $last && editor.key === $index + 1">
-				<td><button ng-click="editor.save()">✔️</button></td>
-				<td><button ng-click="editor.revert()">❌</button></td>
-				<td><input ng-model="item.Name"></td>
-				<td><input ng-model="item.Number"></td>
-			</tr>
-		</tbody>
-	</table>
-</div>
-
-<h1>Pagination</h1>
-
-<div pagination>
-	<style>
-		.pagination button { width: 40px; }
-		.pagination .disabled { color: gray; }
-		.pagination .current { font-weight: bold; color: green; }
-	</style>
-
-	<button ng-click="log(pages)">Print</button>
-
-	<table>
-		<thead>
-			<th>Name</th>
-			<th>Number</th>
-		</thead>
-		<tbody>
-			<tr ng-repeat="row in moredata | paginate: pagination">
-				<td>{{ row.Name }}</td>
-				<td>{{ row.Number }}</td>
-			</tr>
-		</tbody>
-	</table>
-
-	<span class="pagination" ng-repeat="p in pages track by $index">
-		<button ng-class="{disabled: p === 'hide', current: $index === pages.current}" ng-click="pagination.page = p">{{ p }}</button>
-	</span>
-</div>
-
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular.min.js"></script>
-<script src="assets/js/MyApp.js"></script>
-<script src="assets/js/SubScopeDirective.js"></script>
-<script src="assets/js/EditorDirective.js"></script>
-<script src="assets/js/PaginationDirective.js"></script>
-</body>
-
-</html>

deploy/.bowerrc

@@ -0,0 +1,3 @@
+{
+  "directory": "../frontend/vendor"
+}

deploy/bower.json

@@ -0,0 +1,8 @@
+{
+	"name": "learn"
+	, "description": "Learn some stuff"
+	, "version": "0.0.0"
+	, "dependencies": {
+		"angular": "~1.5"
+	}
+}

frontend/assets/css/arterop.css

@@ -0,0 +1,7 @@
+.arterop-color-1 { background-color: #f81; }
+.arterop-color-2 { background-color: #f42; }
+.arterop-color-3 { background-color: #e22; }
+.arterop-color-4 { background-color: #b23; }
+.arterop-color-5 { background-color: #e08; }
+.arterop-color-6 { background-color: #916; }
+.arterop-gray { background-color: #666; }

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en" ng-app>
+<head>
+	<meta charset="utf-8">
+	<title>Angular tutorial</title>
+	<script src="vendor/angular/angular.min.js"></script>
+</head>
+<body>
+
+	<p>Nothing here {{'yet' + '!'}}</p>
+
+</body>
+</html>