'v4.0'

.gitignore

@@ -0,0 +1 @@
+node_modules

app/app.config.js

@@ -0,0 +1,45 @@
+// bootstrap theme
+
+app.run(['editableOptions', '$rootScope', '$location', function(editableOptions, $rootScope, $location) {
+	editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
+	$rootScope.$on('$routeChangeSuccess', function() {
+		$rootScope.currentMenuItem = $location.path() || '/home';
+	});
+}]);
+
+
+// translations settings
+
+app.config(['$translateProvider', function($translateProvider) {
+	
+	$translateProvider.useStaticFilesLoader({
+		prefix: 'i18n/',
+		suffix: '.json'
+	});
+	$translateProvider.preferredLanguage(localStorage.getItem('preferredLanguage') || 'en');
+}]);
+
+// check authorization
+app.config(['$httpProvider', function($httpProvider) {
+
+	$httpProvider.interceptors.push(['$q', '$location', function($q, $location) {
+		return {
+			request: function(config) {
+				config.headers = config.headers || {};
+	
+				if (localStorage.getItem('authToken')) {
+					config.headers.Authorization = 'Bearer ' + localStorage.getItem('authToken');
+				}
+
+				return config;
+			},
+			responseError: function(response) {
+				if (response.status === 401) {
+					$location.path('/');
+				}
+
+				return $q.reject(response);
+			}
+		};
+	}]);
+}]);

app/app.module.js

@@ -0,0 +1,7 @@
+window.app = angular.module('application', [
+	'ngRoute',
+	'cgNotify',
+	'ui.bootstrap',
+	'xeditable',
+	'pascalprecht.translate'
+]);

app/app.routes.js

@@ -0,0 +1,26 @@
+app.config(function($routeProvider, $locationProvider) {
+	$locationProvider.hashPrefix('');
+
+	$routeProvider
+	.when('/', {
+		templateUrl: 'app/views/home.template.html',
+		/*controller: 'Home'*/
+	})
+	.when('/login', {
+		templateUrl: 'app/views/login.template.html',
+		controller: 'Login'
+	})
+	.when('/books', {
+		templateUrl: 'app/views/books-list.template.html',
+		controller: 'BooksList'
+	})
+	.when('/books/:id', {
+		templateUrl: 'app/views/books-details.template.html',
+		controller: 'BookDetails'
+	})
+	.when('/authors', {
+		templateUrl: 'app/views/authors.template.html',
+		controller: 'Authors'
+	})
+	.otherwise('/');
+})

app/constants/webApi.com.js

@@ -0,0 +1,3 @@
+app.constant('webApi', {
+	DOMAIN: 'http://helloworld.filonitta.fe4.a-level.com.ua'
+});

app/controllers/addBook.controller.js

@@ -0,0 +1,39 @@
+(function(){
+    'use strict';
+    app.controller('AddBook', addBookController);
+    function addBookController($scope, $uibModalInstance, booksRepository){
+        $scope.newBook = {
+            title: '',
+            author_id: null,
+            date: "",
+            cost: '',
+            rate: '',
+            intro: ''
+        }
+        booksRepository.getAuthors()
+        .then(function(response){
+            $scope.authors = response.data.map(function(author){
+                return {
+                    id: author.id,
+                    name: author.firstname + ' ' + author.lastname
+                }
+            })
+        });
+        $scope.cancel = function(){
+            $uibModalInstance.dismiss('cancel'); 
+            // $uibModalInstance.close(false);  
+        };
+        $scope.ok = function(){
+            $uibModalInstance.close($scope.newBook);
+        }
+
+    }
+    
+
+    addBookController.$inject = [
+        '$scope',
+        '$uibModalInstance',
+        'books.repository',
+        '$uibModalInstance'
+    ];   
+})()

app/controllers/authors.controller.js

@@ -0,0 +1,62 @@
+(function() {
+'use strict';
+
+app.controller('Authors', ['$scope', 'books.repository', '$uibModal', 'utils', '$timeout', function($scope, booksRepository, $uibModal, utils, $timeout) {
+    $scope.authors = [];
+    booksRepository.getAuthors().then(function(response) {
+        $scope.authors = response.data;
+    }, function(error) {
+        utils.notify({message: error.data.message, type: 'danger'});
+    });
+
+    $scope.deleteAuthor = function(authorId) {
+        var modalInstance = $uibModal.open({
+            templateUrl: 'app/modals/confirm/add-book.template.html',
+            controller: 'Confirm',
+            size: 'sm'
+        });
+
+        modalInstance.result.then(function(result) {
+            if (!result) return;
+            var author = $scope.authors.filter(function(author) { return author.id === authorId })[0],
+                index = $scope.authors.indexOf(author);
+            booksRepository.deleteAuthor(authorId).then(function(response) {
+                $scope.authors.splice( index, 1 );
+                utils.notify({message: 'Author has been successfully deleted', type: 'success'});
+            }, function(error) {});
+        }, function() {});
+    };
+
+    $scope.addAuthor = function() {
+        $scope.inserted = {
+            id: 0,
+            firstname: 'Вася',
+            lastname: 'Пупкин'
+        };
+        
+        $scope.authors.push($scope.inserted);
+    };
+
+    $scope.saveAuthor = function(data, authorId) {
+        if (authorId) {
+            booksRepository.updateAuthorById(authorId, data).then(function(response) {
+                utils.notify({message: 'Author successfully updated', type: 'success'});
+            }, function(error) {});
+        } else {
+            booksRepository.addAuthor(data).then(function(response) {
+                $scope.authors[$scope.authors.length - 1] = response.data;
+                utils.notify({message: 'Author successfully added', type: 'success'});
+            }, function(error) {});
+        }
+    };
+
+    $scope.deleteFromArray = function(author, editableForm) {
+        if (!author.id) {
+            $scope.authors.splice($scope.authors.indexOf(author), 1);
+            editableForm.$removeEditable();
+        } else {
+            editableForm.$cancel();
+        }
+    };
+}]);
+})();

app/controllers/bookdetails.controller.js

@@ -0,0 +1,52 @@
+(function ()
+{
+    'use strict';
+
+    app.controller('BookDetails', ['$scope', 'books.repository', '$routeParams','utils', function ($scope, booksRepository, $routeParams, utils)
+            {
+                var details = {};
+                booksRepository.getBookById($routeParams.id)
+                .then(function(response) {
+                    $scope.details = response.data;
+                    $scope.details.date = new Date($scope.details.date)
+                    console.log($scope.details)
+                }, function(error) {
+                    utils.notify({
+                        message: error.statusText,
+                        type: 'danger'
+                    })
+                }
+                    )
+
+                $scope.isEditeMode = false;
+                $scope.edite = function(){
+                    $scope.isEditeMode = true;
+                    details = angular.copy($scope.details)
+                }
+                $scope.noEdite = function(){
+                    $scope.isEditeMode = false;
+                    $scope.details = angular.copy(details)
+                }
+                booksRepository.getAuthors()
+                .then(function(response){
+                    $scope.authors = response.data.map(function(author){
+                        return {
+                            id: author.id,
+                            name: author.firstname + ' ' + author.lastname
+                        }
+                    })
+                })
+                $scope.save = function(){
+                    booksRepository.updateBookById($scope.details.id, $scope.details)
+                    $scope.isEditeMode = false;
+                };
+                $scope.getAuthorsById = function(id){
+                    if(!$scope.authors || !id) return;
+                    return $scope.authors.filter(function(item){
+                        return item.id === id;
+                    })[0].name;
+                }
+            }
+        ]);
+}
+)();

app/controllers/bookslist.controller.js

@@ -0,0 +1,64 @@
+(function() {
+'use strict';
+app.controller('BooksList', [
+'$scope', 'books.repository', '$uibModal', 'utils', '$rootScope',
+
+function($scope, booksRepository, $uibModal, utils, $rootScope) {
+    $scope.sortField = 'id';
+    
+    var searchResult = sessionStorage.getItem('searchResult');
+
+    if (searchResult) {
+        searchResult = JSON.parse(searchResult);
+        $scope.books = searchResult;
+        sessionStorage.removeItem('searchResult');
+    } else {
+        booksRepository.getBooks().then(function(response) {
+            $scope.books = response.data;
+        }, function(error) {});
+    }
+
+    $scope.sortBy = function(field) {
+        $scope.sortField = $scope.sortField === field ? '-' + $scope.sortField : field;
+    };
+
+    $scope.deleteBook = function(bookId) {
+        var modalInstance = $uibModal.open({
+            templateUrl: 'app/modals/confirm/confirm.template.html',
+            controller: 'Confirm',
+            size: 'sm'
+        });
+
+        modalInstance.result.then(function(result) {
+            if (!result) return;
+            var book = $scope.books.filter(function(book) { return book.id === bookId })[0],
+                index = $scope.books.indexOf(book);
+            booksRepository.deleteBook(bookId).then(function(response) {
+                $scope.books.splice( index, 1 );
+                utils.notify({message: 'Book has been successfully deleted', type: 'success'});
+            }, function(error) {});
+        }, function() {});
+    };
+
+    $scope.addBook = function() {
+        var modalInstance = $uibModal.open({
+            templateUrl: 'app/modals/add-book/add-book.template.html',
+            controller: 'AddBook',
+            size: 'lg'
+        });
+
+        modalInstance.result.then(function(data) {
+            booksRepository.addBook(data).then(function(response) {
+                $scope.books.push(response.data);
+                utils.notify({message: 'Book has been successfully added', type: 'success'});
+            }, function(error) {});
+        }, function() {});
+    };
+
+    $scope.$on('searchEvent', function(event, data) {
+        $scope.books = data;
+        sessionStorage.removeItem('searchResult');
+    });
+
+}]);
+})();

app/controllers/header.controller.js

@@ -0,0 +1,28 @@
+
+
+(function() {
+'use strict';
+app.controller('Header', headerController);
+
+function headerController($scope, booksRepository, $location, $rootScope, utils) {
+    
+    $scope.isLogged = function() {
+            return localStorage.getItem('authToken') ? true : false;
+        };
+
+    $scope.search = function() {
+        booksRepository.searchBy($scope.searchString).then(function(response) {
+            sessionStorage.setItem('searchResult', JSON.stringify(response.data));
+            $location.path('/books');
+            $rootScope.$broadcast('searchEvent', response.data);
+        }, function(error) {});
+    }
+}
+headerController.$inject = [
+    '$scope',
+    'books.repository',
+    '$location',
+    '$rootScope',
+    'utils'
+];
+})();

app/controllers/login.controller.js

@@ -0,0 +1,33 @@
+(function ()
+{
+    'use strict';
+
+    app.controller('Login', ['$scope', 'account.repository', '$location','utils',function ($scope, accountRepository, $location, utils)
+            {
+                $scope.user =
+                {
+                    login: 'admin@gmail.com',
+                    password: 'qQ1!1111'
+                };
+
+                $scope.login = function ()
+                {
+                    accountRepository.login($scope.user)
+                    .then(function (response)  {
+                        console.log(response)
+                        $location.path('/');
+                        localStorage.setItem('authToken', response.data.authToken);
+                        utils.notify({
+                            message: 'hello, dude ' + response.data.login,
+                            type: 'succes'
+                        })
+                    }, function (error)
+                    {
+                        
+                    }
+                    )
+                };
+            }
+        ]);
+}
+)();

app/controllers/main.controller.js

@@ -0,0 +1,13 @@
+(function ()
+{
+    'use strict';
+
+    app.controller('Main', function ($scope)
+    {
+        
+
+    }
+    );
+
+}
+)();

app/directives/lang-switcher/lang-switcher.directive.js

@@ -0,0 +1,44 @@
+(function() {
+'use strict';
+
+app.directive('langSwitcher', langSwitcherController);
+
+function getCurrentlanguage(key) {
+	return this.languages.filter((function(item) { return item.key === key }))[0];
+}
+
+function langSwitcherController() {
+	return {
+		restrict: 'E',
+		templateUrl: './app/directives/lang-switcher/lang-switcher.template.html',
+		scope: {},
+		link: function(scope, element, attr) {},
+		controller: ['$scope', '$translate', '$rootScope', function($scope, $translate, $rootScope) {
+			$scope.languages = [
+				{ key: 'en', value: 'En' },
+				{ key: 'ru', value: 'Ru' },
+				{ key: 'ua', value: 'Ua' }
+			];
+			$scope.showMenu = false;
+			$scope.toggleMenu = function() {
+				$scope.showMenu = !$scope.showMenu;
+			}
+			var key = localStorage.getItem('preferredLanguage') || 'en';
+			$scope.currentLang = getCurrentlanguage.call($scope, key);
+			$scope.changeLanguage = function(key) {
+				$scope.currentLang = getCurrentlanguage.call($scope, key);
+				$translate.use(key);
+				localStorage.setItem('preferredLanguage', key);
+				$rootScope.$broadcast('changeLang', key);
+				$scope.showMenu = !$scope.showMenu;
+			};
+			$scope.$on('changeLang', function(event, value) {
+				if ($scope.currentLang.key !== value) {
+					$scope.currentLang = getCurrentlanguage.call($scope, value);
+				}
+			});
+		}],
+	}
+}
+langSwitcherController.$inject = [];
+})();

app/directives/lang-switcher/lang-switcher.template.html

@@ -0,0 +1,10 @@
+<div class="lang-switcher">
+	<button ng-click="toggleMenu()">
+		<img ng-src="./app/directives/lang-switcher/images/{{currentLang.key}}.png" alt="{{currentLang.value}}" title="{{currentLang.value}}">
+	</button>
+	<ul class="switcher-menu" ng-class="{'shown': showMenu}">
+		<li ng-repeat="lang in languages" ng-click="changeLanguage(lang.key)">
+			<img ng-src="./app/directives/lang-switcher/images/{{lang.key}}.png" alt="{{lang.value}}" title="{{lang.value}}"> 
+		</li>
+	</ul>
+</div>

app/modals/add-book.template.html

@@ -0,0 +1,28 @@
+<div class="modal-header">
+	<h3 class="modal-title">{{'Add new book' | translate}} </h3>
+</div>
+<div class="modal-body">
+	<form>
+		<div class="form-group">
+			<input type="text" placeholder="Title" class="form-control" ng-model="newBook.title">
+		</div>
+		<div class="form-group">
+			<select class="form-control" ng-model="newBook.author_id" ng-options="author.id as author.name for author in authors">
+				<option value="" disabled>-- Select author --</option>
+			</select>
+		</div>
+		<div class="form-group">
+			<input type="number" placeholder="Cost" class="form-control" ng-model="newBook.cost">
+		</div>
+		<div class="form-group">
+			<input type="number" placeholder="Rate" class="form-control" min="0" max="10" ng-model="newBook.rate">
+		</div>
+		<div class="form-group">
+			<textarea rows="10" placeholder="Intro" class="form-control" ng-model="newBook.intro"></textarea>
+		</div>
+	</form>
+</div>
+<div class="modal-footer">
+	<button class="btn btn-danger" ng-click="cancel()">Cancel</button>
+	<button class="btn btn-success" ng-click="ok()">Ok</button>
+</div>

app/modals/confirm/confirm.controller.js

@@ -0,0 +1,16 @@
+app.controller('Confirm', confirmController);
+
+function confirmController($scope, $uibModalInstance) {
+	$scope.cancel = function() {
+		$uibModalInstance.close(false);
+	};
+
+	$scope.ok = function() {
+		$uibModalInstance.close(true);
+	}
+}
+
+confirmController.$inject = [
+	'$scope',
+	'$uibModalInstance',
+];

app/modals/confirm/confirm.template.html

@@ -0,0 +1,10 @@
+<div class="modal-header">
+	<h3 class="modal-title">Confirm</h3>
+</div>
+<div class="modal-body">
+	Are you sure?
+</div>
+<div class="modal-footer">
+	<button class="btn btn-danger" ng-click="cancel()">Cancel</button>
+	<button class="btn btn-success" ng-click="ok()">Ok</button>
+</div>

app/services/account.factory.js

@@ -0,0 +1,16 @@
+(function() {
+
+'use strict';
+
+app.factory('account.repository', ['webApi', '$http', function(webApi, $http) {
+	return {
+		login: _login,
+	};
+
+	function _login(data) {
+		return $http.post(webApi.DOMAIN + '/api/v2/login', data);
+	}
+
+}]);
+
+})();

app/services/books.factory.js

@@ -0,0 +1,51 @@
+(function() {
+
+'use strict';
+
+app.factory('books.repository', ['webApi', '$http', function(webApi, $http) {
+	return {
+		getBooks: _getBooks,
+		getBookById: _getBookById,
+		getAuthors: _getAuthors,
+		updateBookById: _updateBookById,
+		addBook: _addBook,
+		addAuthor: _addAuthor,
+		deleteBook: _deleteBook,
+		searchBy: _searchBy
+	};
+
+	function _getBooks() {
+		return $http.get(webApi.DOMAIN + '/api/v2/books');
+	};
+
+	function _getBookById(id) {
+		return $http.get(webApi.DOMAIN + '/api/v2/books/' + id);
+	};
+
+	function _getAuthors() {
+		return $http.get(webApi.DOMAIN + '/api/v2/authors');
+	};
+
+	function _updateBookById(id, book) {
+		return $http.put(webApi.DOMAIN + '/api/v2/books/' + id, book);
+	};
+
+	function _addBook(data){
+		return $http.post(webApi.DOMAIN + '/api/v2/books', data);
+	}
+
+	function _addAuthor(data) {
+		return $http.post(webApi.DOMAIN + '/api/v2/authors', data);
+	}
+
+	function _deleteBook(id){
+		return $http.delete(webApi.DOMAIN + '/api/v2/books/' + id);
+	}
+
+	function _searchBy(string) {
+		return $http.get(webApi.DOMAIN + '/api/v2/search?string=' + string);
+	}
+
+}]);
+
+})();

app/services/utils.services.js

@@ -0,0 +1,18 @@
+(function(){
+    'use strict';
+    app.service('utils', ['notify', function(notify){
+        this.notify = function(data){
+            notify.closeAll();
+            var defaults = {
+                message: '',
+                type: 'alert',
+                duration: 3000
+            }
+            data = angular.extend(defaults, data);
+            notify({
+                message: data.message,
+                classes: 'alert alert-' + data.type
+            })
+        }
+    }]);
+})();

app/views/authors.template.html

@@ -0,0 +1,40 @@
+<div class="page-header"><h1>{{'Authors' | translate}}</h1></div>
+
+<div class="form-group text-right">
+    <button class="btn btn-primary" ng-click="addAuthor()"><i class="glyphicon glyphicon-plus"></i> {{'Add author' | translate}}</button>
+</div>
+
+<table class="table table-striped table-hover">
+   
+    <thead>
+        <th>{{'Firstname' | translate}}</th>
+        <th>{{'Lastname' | translate}}</th>
+        <th></th>
+    </thead>
+
+    <tr ng-repeat="author in authors track by $index">
+        
+        <td><a href="" editable-text="author.firstname" e-form="editableForm" e-ng-model="author.firstname" e-name="firstname">{{author.firstname || '–'}}</a></td>
+        
+        <td><a href="" editable-text="author.lastname" e-form="editableForm" e-ng-model="author.lastname" e-name="lastname">{{author.lastname || '–'}}</a></td>
+        
+        <td class="text-right">
+           
+            <span ng-show="!editableForm.$visible">
+                <button class="btn btn-warning btn-xs" ng-click="editableForm.$show()"><i class="glyphicon glyphicon-pencil"></i></button>
+                <button class="btn btn-danger btn-xs" ng-click="deleteAuthor(author.id)"><i class="glyphicon glyphicon-trash"></i></button>
+            </span>
+           
+            <form editable-form name="editableForm" onaftersave="saveAuthor($data, author.id)" shown="inserted == author">
+               
+                <span ng-show="editableForm.$visible">
+                    <button type="submit" class="btn btn-primary btn-xs" ng-disabled="editableForm.$waiting"><i class="glyphicon glyphicon-ok"></i></button>
+                    <button type="button" class="btn btn-danger btn-xs" ng-disabled="editableForm.$waiting" ng-click="deleteFromArray(author, editableForm);"><i class="glyphicon glyphicon-remove"></i></button>
+                </span>
+           
+            </form>
+        </td>
+    </tr>
+</table>
+
+<div class="text-center" ng-if="!authors.length">{{'No data' | translate}}</div>

app/views/books-details.template.html

@@ -0,0 +1,33 @@
+<h1 class='page-header'>{{'Book details' | translate }}</h1>
+<div class="book-details" ng-if='!isEditeMode'>
+    <button class="btn-primary"  ng-click="edite()"><i class="glyphicon glyphicon-pencil"></i></button>
+    <h3>{{details.title}}</h3>
+    <h3>Author: {{getAuthorsById(details.author_id)}}</h3>
+    <span>({{details.date}})</span>
+    <span><i class="glyphicon glyphicon-heart">{{details.rate}}</i>${{details.cost}}</span>
+    <img ng-src='{{details.image || "./app/img/noBook.png"}}' class="imgDetail">
+    <p>{{details.intro}}</p>
+</div>
+<div class="edite-detail" ng-if='isEditeMode'>
+        <button class="btn-success"  ng-click="save()"><i class="glyphicon glyphicon-pencil"></i></button>
+        <button class="btn-danger"  ng-click="noEdite()"><i class="glyphicon glyphicon-remove"></i></button>
+        <div class="form-group">
+            <label for="title"></label>
+            <input type="text" class="form-control" ng-model='details.title' id="title">
+        </div>
+        <div class="form-group">
+            <label for="date"></label>
+            <input type="date" ng-model='details.date' class="form-control" id="date">
+        </div>
+        <div class="form-group">
+            <label for="text"></label>
+            <textarea type="text" ng-model="details.intro"  class="form-control" id='text' rows="10" ></textarea>
+        </div>
+        <div class="form-group">
+                <label for="text"></label>
+                <select ng-model="details.author_id" ng-options="author.id as author.name for author in authors">
+
+                </select>
+        </div>
+        
+</div>

app/views/books-list.template.html

@@ -0,0 +1,32 @@
+<div class="page-header">
+  <h1>{{'Books list' | translate}} </h1>
+</div>
+<button class="btn btn-primary pull-right" style="margin-bottom: 20px" ng-click="addBook()"><i class="glyphicon glyphicon-plus"></i>{{'Add new book' | translate}}</button>
+<input type="text" placeholder="Filter" class="form-control" ng-model="searchString" /><br />
+<table class="table table-hover">
+  <thead>
+    <tr>
+      <th ng-click="sortBy('title')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'title', 'glyphicon-chevron-down' : sortField === '-title'}"></i> {{'Title' | translate}}</th>
+      <th ng-click="sortBy('author')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'author', 'glyphicon-chevron-down' : sortField === '-author'}"></i>{{'Author ' | translate}}</th>
+      <th ng-click="sortBy('date')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'date', 'glyphicon-chevron-down' : sortField === '-date'}"></i>{{'Date' | translate}}</th>
+      <th ng-click="sortBy('cost')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'cost', 'glyphicon-chevron-down' : sortField === '-cost'}"></i>{{'Cost' | translate}}</th>
+      <th ng-click="sortBy('rate')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'rate', 'glyphicon-chevron-down' : sortField === '-rate'}"></i>{{'Rate' | translate}}</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr ng-repeat="book in books | orderBy:sortField | filter: searchString track by $index">
+      <td>{{book.title}}</td>
+      <td>{{book.author | uppercase}}</td>
+      <td>{{book.date | date: 'longDate'}}</td>
+      <td>{{book.cost | currency}}</td>
+      <td>{{book.rate | number : 1 }}</td>
+      <td>
+        <a href="#/books/{{book.id}}" class="btn btn-info btn-xs"><i class="glyphicon glyphicon-eye-open"></i></a>
+        <button class="btn-danger btn-xs" ng-click="deleteBook(book)"><i class="glyphicon glyphicon-trash"></i></button>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<div class="text-center" ng-if="!books.length">
+  {{'No data' | translate }}
+</div>

app/views/footer.template.html

@@ -0,0 +1,5 @@
+<footer class="navbar-default navbar-fixed-bottom p-t-5 p-b-40">
+	<div class="container">
+		<lang-switcher></lang-switcher>
+	</div>
+</footer>

app/views/header.template.html

@@ -0,0 +1,28 @@
+<nav class="navbar navbar-default" role="navigation" ng-controller="Header">
+    <div class="container-fluid">
+        <div class="navbar-header">
+            <a class="navbar-brand" href="#">AngularJS</a>
+        </div>
+        <div id="navbar" class="navbar-collapse collapse in" aria-expanded="true" aria-hidden="false">
+            <ul class="nav navbar-nav">
+               <li ng-class="{active: currentMenuItem === '/'}"><a href="#/">{{'Home' | translate }}</a></li>
+               <li ng-class="{active: currentMenuItem === '/books'}"><a href="#/books">{{'Books' | translate }}</a></li>
+               <li ng-class="{active: currentMenuItem === '/authors'}"><a href="#/authors">{{'Authors' | translate }}</a></li>
+            </ul>
+            <ul class="nav navbar-nav navbar-right">
+               <li ng-if="!isLogged()" ng-class="{active: currentMenuItem == '/login'}">
+                 <a href="#/login">Authorization</a>
+               </li>
+               <li class="p-t-15 p-r-15 p-l-15">
+                   <lang-switcher></lang-switcher>
+               </li>
+               <li>
+               <form class="form-inline text-right m-t-5" ng-submit="search()">
+                 <input class="form-control" type="text" placeholder="{{'Search' | translate}}" ng-model="searchString">
+                <button class="btn btn-secondary" type="submit">{{'Search' | translate}}</button>
+              </form>
+              </li>
+            </ul>
+        </div>
+    </div>
+</nav>

app/views/home.template.html

@@ -0,0 +1 @@
+<h2>Our home page</h2>

app/views/login.template.html

@@ -0,0 +1,15 @@
+<div class="row m-t-100">
+	<div class="col-xs-4 col-xs-offset-4">
+		<h3 class="text-center m-b-30">Authorization</h3>
+		<form class="well" ng-submit="login()">
+			<div class="form-group">
+				<input type="text" placeholder="Email" class="form-control" ng-model="user.login">
+			</div>
+			<div class="form-group">
+				<input type="password" placeholder="Password" class="form-control" ng-model="user.password">
+			</div>
+
+			<button class="btn btn-primary btn-block">Login</button>
+		</form>
+	</div>
+</div>

entry.js

@@ -0,0 +1,4 @@
+import './app/app.module.js';
+import './app/app.config.js';
+import './app/app.routes.js';
+// import './css/style.scss';

i18n/en.json

@@ -0,0 +1,27 @@
+{
+	"Authors": "Authors",
+	"Home": "Home",
+	"Books": "Books",
+	"Authors": "Authors",
+	"Search": "Search",
+	"No data": "No data",
+	"Title": "Title",
+	"Author": "Author",
+	"Date": "Date",
+	"Cost": "Cost",
+	"Rate": "Rate",
+	"Add book": "Add book",
+	"Filter": "Filter",
+	"Books list": "Books list",
+	"Firstname": "Firstname",
+	"Lastname": "Lastname",
+	"Add author": "Add author",
+	"Home": "Home",
+	"Add new book": "Add new book",
+	"Select author": "Select author",
+	"Intro": "Intro",
+	"Cancel": "Cancel",
+	"Ok": "Ok",
+	"Confirm": "Confirm",
+	"Are you sure?": "Are you sure?"
+}

i18n/ru.json

@@ -0,0 +1,27 @@
+{
+	"Authors": "Авторы",
+	"Home": "Домашняя страница",
+	"Books": "Книги",
+	"Authors": "Авторы",
+	"Search": "Поиск",
+	"No data": "Нет данных",
+	"Title": "Название",
+	"Author": "Автор",
+	"Date": "Дата",
+	"Cost": "Цена",
+	"Rate": "Рейтинг",
+	"Add book": "Добавить книгу",
+	"Filter": "Фильтр",
+	"Books list": "Список книг",
+	"Firstname": "Имя",
+	"Lastname": "Фамилия",
+	"Add author": "Добавить автора",
+	"Home": "Главная страница",
+	"Add new book": "Добавить новую книгу",
+	"Select author": "Выбрать автора",
+	"Intro": "Описание",
+	"Cancel": "Отмена",
+	"Ok": "Ok",
+	"Confirm": "Подтверждение",
+	"Are you sure?": "Вы уверены?"
+}

index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+
+<html lang="en" ng-app="application">
+
+<head>
+	<meta charset="UTF-8">
+	<base href="/">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<title>AngularJS</title>
+	<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.extraFiles.css %>">
+
+</head>
+
+<body ng-controller="Main">
+	
+	<div class="container">
+		<ng-include src="'app/views/header.template.html'"></ng-include>
+		<div ng-view></div>
+		<ng-include src="'app/views/footer.template.html'"></ng-include>
+	</div>
+	
+</body>
+
+</html>

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "2018-06-01",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.html",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "server": "webpack-dev-server --color --watch-content-base --open"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "bootstrap": "^3.3.7",
+    "angular": "^1.6.6",
+    "@cgross/angular-notify": "^2.5.1",
+    "angular-route": "^1.7.0",
+    "angular-translate": "^2.18.1",
+    "angular-translate-loader-static-files": "^2.18.1",
+    "angular-ui-bootstrap": "^2.5.6",
+    "angular-xeditable": "^0.8.1"
+  },
+  "bundleDependencies": [
+    "angular",
+    "@cgross/angular-notify",
+    "angular-route",
+    "angular-translate",
+    "angular-translate-loader-static-files",
+    "angular-ui-bootstrap",
+    "angular-xeditable"
+  ],
+  "devDependencies": {
+    "css-loader": "^0.28.11",
+    "html-webpack-plugin": "^3.2.0",
+    "node-sass": "^4.9.0",
+    "sass-loader": "^7.0.2",
+    "style-loader": "^0.21.0",
+    "webpack": "^3.11.0",
+    "webpack-cli": "^2.1.4",
+    "webpack-dev-server": "^2.11.2"
+  }
+}

webpack.config.js

@@ -0,0 +1,71 @@
+const path = require('path');
+const glob = require('glob');
+
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+const config = {
+	context: path.resolve(__dirname, './'),
+	entry: {
+		'0_vendor': require('./package.json').bundleDependencies,
+		'1_app': './entry.js',
+		'2_files': toArray(glob.sync('./app/**/*.js'), 'app.module.js'),
+		// 'style': './css/style.scss'
+	},
+	output: {
+		filename: '[name].bundle.js'
+	},
+	devServer: {
+		contentBase: path.join(__dirname, './'),
+		compress: true,
+		port: 9000,
+		stats: 'errors-only',
+		watchOptions: { aggregateTimeout: 300, poll: 1000 }
+	},
+	resolve: {
+		alias: {
+			'node_modules': path.join(__dirname, 'node_modules'),
+		}
+	},
+	plugins: [
+		new HtmlWebpackPlugin({
+			template: 'index.html',
+			chunksSortMode: function(a, b) {
+				return (a.names[0] > b.names[0])? 1 : -1;
+			},
+			inject: 'body',
+			extraFiles: {
+				css: './css/style.css'
+			}
+		})
+	],
+	module: {
+		rules: [
+			// {test: /\.css$/, use: ['style-loader', 'css-loader']}
+			/*{
+				test: /\.(s*)css$/,
+				use: [
+					'style-loader', // creates style nodes from JS strings
+					'css-loader', // translates CSS into CommonJS
+					'sass-loader' // compiles Sass to CSS
+				]
+			}*/
+		]
+	}
+};
+module.exports = config;
+
+function toObject(paths) {
+	var result = {};
+	paths.forEach(function(path) {
+		result[path.split('/').slice(-1)[0]] = path;
+	});
+	return result;
+}
+
+function toArray(paths, ignorePath) {
+	var result = [];
+	paths.forEach(function(path) {
+		if (path.indexOf(ignorePath) !== -1) return;
+		result.push(path);
+	});
+	return result;
+}