v2.0

app/app.config.js

@@ -1,17 +1,18 @@
 app.run(function($rootScope, $location) {
 	$rootScope.$on('$routeChangeSuccess', function() {
-		$rootScope.currentMenuItem = $location.path() || '/';
+		$rootScope.currentMenuItem = $location.path() || '/home';
 	});
-});
 
+});
 
 // 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');
 				}

app/app.module.js

@@ -1,4 +1,3 @@
 var app = angular.module('fea5', [
 	'ngRoute'
-
 	]);

app/app.routes.js

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

app/controllers/bookdetails.controller.js

@@ -0,0 +1,16 @@
+(function ()
+{
+    'use strict';
+
+    app.controller('BookDetails', ['$scope', 'books.repository', '$routeParams', function ($scope, booksRepository, $routeParams)
+            {
+                booksRepository.getBookById($routeParams.id)
+                .then(function(response) {
+                    console.log(response.data);
+                }, function(error) {
+                    alert(error)}
+                    )
+            }
+        ]);
+}
+)();

app/controllers/books-details.controller.js

@@ -1,38 +0,0 @@
-(function () {
-'use strict';
-app.controller('BooksDetails', [
-	'$scope',           //зависимости
-	'books.repository', 
-	'$routeParams', 
-	function($scope, booksRepository, $routeParams) {
-	$scope.sortField = 'index';
-	$scope.sortBy = function(field) {
-	$scope.sortField = ($scope.sortField === field) ? '-' + field : field;
-}
-
-$scope.deleteBook = function(bookId) {
- function findBookId(element, index, array) {
-     if (element.id === bookId) return true
- }
- var index = $scope.books.findIndex(findBookId);
- $scope.books.splice(index, 1);
-	}
-	//запрос на сервер по книги)
-booksRepository.getBooks().then(function(responce) {
-$scope.books = responce.data;
-	console.log($scope.books);
-}, function(error) {
-	console.log(error);
-});
-//$routeParams.id  - взять id книги с адресной строки
-booksRepository.getBookById($routeParams.id).then(function(responce) {
-$scope.books = responce.data;
-	console.log(responce.data);
-}, function(error) {
-});
-
-}]);
-
-
-
-})();

app/controllers/books-list.controller.js

@@ -1,27 +0,0 @@
-(function () {
-'use strict';
-app.controller('BooksList', ['$scope', 'books.repository', function($scope, booksRepository) {
-	$scope.sortField = 'index';
-	$scope.sortBy = function(field) {
-	$scope.sortField = ($scope.sortField === field) ? '-' + field : field;
-}
-$scope.deleteBook = function(bookId) {
- function findBookId(element, index, array) {
-     if (element.id === bookId) return true
- }
- var index = $scope.books.findIndex(findBookId);
- $scope.books.splice(index, 1);
-	}
-booksRepository.getBooks().then(function(responce) {
-				$scope.books = responce.data;
-									console.log($scope.books);
-								}, function(error) {
-									console.log(error);
-});
-
-
-}]);
-
-
-
-})();

app/controllers/bookslist.controller.js

@@ -0,0 +1,39 @@
+(function ()
+{
+    'use strict';
+
+    app.controller('BooksList', ['$scope', 'books.repository', function ($scope, booksRepository)
+            {
+                $scope.sortField = 'title';
+
+                $scope.sortBy = function (field)
+                {
+                    if ($scope.sortField == field)
+                    {
+                        $scope.sortField = '-' + field;
+                    }
+                    else
+                    {
+                        $scope.sortField = field;
+                    }
+                };
+
+                $scope.deleteBook = function (book)
+                {
+                    $scope.books.splice($scope.books.indexOf(book), 1);
+                };
+
+                booksRepository.getBooks()
+                .then(function (response)
+                {
+                    $scope.books = response.data;
+                }, function (error)
+                {
+                    alert(error);
+                }
+                );
+            }
+        ]);
+
+}
+)();

app/controllers/header.controller.js

@@ -1,16 +1,14 @@
-(function () {
-'use strict';
-app.controller('Header', headerController);
+(function ()
+{
+    'use strict';
+
+    app.controller('Header', function ($scope)
+    {
+        $scope.isLogged = function() {
+        	return localStorage.getItem('authToken') ? true : false;
+        };
+    }
+    );
 
-function headerController($scope) {
-
-	$scope.isLogged = function() {
-		return localStorage.getItem('authToken') ? true : false;
-	};
 }
-
-headerController.$inject = [
-	'$scope'
-];
-
-})();
+)();

app/controllers/home.controller.js

@@ -1,8 +0,0 @@
-(function () {
-'use strict';
-app.controller('Home', function($scope) {
-	console.log("HOme");
-});
-
-
-})();

app/controllers/login.controller.js

@@ -1,23 +1,29 @@
-(function () {
-'use strict';
-app.controller('Login', ['$scope', 'account.repository', '$location', function($scope, accountRepository, $location) {
-	$scope.user = {
-		login: "admin@gmail.com",
-		password: "qQ1!1111"
-	};
+(function ()
+{
+    'use strict';
 
-	$scope.login = function() {
-accountRepository.login($scope.user).then(function(responce){
-	$location.path('/'); //адресс куда переходить после логина
-console.log('responce', responce.data);
-localStorage.setItem('authToken', responce.data.authToken);
-}, function(error){
-	
-})
-	};
+    app.controller('Login', ['$scope', 'account.repository', '$location', function ($scope, accountRepository, $location)
+            {
+                $scope.user =
+                {
+                    login: 'admin@gmail.com',
+                    password: 'qQ1!1111'
+                };
 
-
-}]);
-
-
-})();
+                $scope.login = function ()
+                {
+                    accountRepository.login($scope.user)
+                    .then(function (response)  {
+                        $location.path('/');
+                        localStorage.setItem('authToken', response.data.authToken);
+                        //console.log(localStorage.authToken);
+                    }, function (error)
+                    {
+                        alert(error)
+                    }
+                    )
+                };
+            }
+        ]);
+}
+)();

app/controllers/main.controller.js

@@ -1,32 +1,13 @@
-(function () {
-'use strict';
-app.controller('Main', function($scope) {
-	console.log("OK");
-	console.log($scope);
-	$scope.style = {
-		width: 100,
-		height: 100,
-		background: "red",
-	}
-	$scope.x = 2;
-	$scope.y = 3;
-	$scope.color = 'red';
-	$scope.data = ['apples', 'oranges', 'berries'];
-	console.log($scope);
+(function ()
+{
+    'use strict';
 
-	$scope.sum = function() {
-		$scope.result = $scope.x + $scope.y;
-		console.log(this.x);
-	}
-	$scope.addItem = function() {
-		$scope.data.push($scope.item);
-		$scope.item = "";
-	}
-	$scope.deleteItem = function(index) {
-	$scope.data.splice(index, 1);
+    app.controller('Main', function ($scope)
+    {
+        
 
-	}
-});
+    }
+    );
 
-
-})();
+}
+)();

app/services/account.factories.js

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

app/services/books.factories.js

@@ -1,21 +1,22 @@
 (function() {
+
 'use strict';
 
-app.factory('books.repository', function(webApi, $http) {
+app.factory('books.repository', ['webApi', '$http', function(webApi, $http) {
 	return {
 		getBooks: _getBooks,
-		getBookById: _getBookById
+		getBookById: _getBookById,
+		//updateBookById: _updateBookById
 	};
 
 	function _getBooks() {
 		return $http.get(webApi.DOMAIN + '/api/v2/books');
 	}
+
 	function _getBookById(id) {
 		return $http.get(webApi.DOMAIN + '/api/v2/books/' + id);
 	}
 
-});
-
-
+}]);
 
 })();

app/views/books-details.template.html

@@ -1 +1 @@
-<h1>BOOK DETAILS</h1>
+<h2>Book Details</h2>

app/views/books-list.template.html

@@ -1,31 +1,31 @@
- <div class="container" ng-controller="BooksList">
+<div class="page-header">
   <h1>Books list</h1>
-<input type="text" name="book" ng-model='searchString' placeholder="Search...">
-<table class="table table-striped table-hover">
+</div>
+<input type="text" placeholder="Filter" class="form-control" ng-model="searchString" /><br />
+<table class="table table-hover">
   <thead>
     <tr>
-      <th scope="col">Index</th>
-      <th scope="col" ng-click="sortBy('title')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'title', 'glyphicon-chevron-down' : sortField === '-title'}"></i> Title</th>
-      <th scope="col" ng-click="sortBy('author')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'author', 'glyphicon-chevron-down' : sortField === '-author'}"></i>Author</th>
-      <th scope="col" ng-click="sortBy('date')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'date', 'glyphicon-chevron-down' : sortField === '-date'}"></i>Date</th>
-      <th scope="col" ng-click="sortBy('cost')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'cost', 'glyphicon-chevron-down' : sortField === '-cost'}"></i>Cost</th>
-      <th scope="col" ng-click="sortBy('rate')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'rate', 'glyphicon-chevron-down' : sortField === '-rate'}"></i>Rate</th>
-      <th></th>
+      <th ng-click="sortBy('title')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'title', 'glyphicon-chevron-down' : sortField === '-title'}"></i> Title</th>
+      <th ng-click="sortBy('author')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'author', 'glyphicon-chevron-down' : sortField === '-author'}"></i>Author</th>
+      <th ng-click="sortBy('date')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'date', 'glyphicon-chevron-down' : sortField === '-date'}"></i>Date</th>
+      <th ng-click="sortBy('cost')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'cost', 'glyphicon-chevron-down' : sortField === '-cost'}"></i>Cost</th>
+      <th ng-click="sortBy('rate')"><i class="glyphicon" ng-class="{'glyphicon-chevron-up' : sortField === 'rate', 'glyphicon-chevron-down' : sortField === '-rate'}"></i>Rate</th>
     </tr>
   </thead>
   <tbody>
-   <tr ng-repeat="book in books | filter: searchString | orderBy: sortField track by $index">
-<td>{{$index}}</td>
-<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</a>
-<button class="btn btn-danger btn-xs" ng-click="deleteBook(book.id)">x</button></td>
+    <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>
+<div class="text-center" ng-if="!books.length">
+  No Data
+</div>

app/views/footer.template.html

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

app/views/header.template.html

@@ -5,12 +5,13 @@
         </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</a></li>
- <li ng-class="{active: currentMenuItem == '/books'}"><a href="#/books">Books</a></li>
-
+               <li ng-class="{active: currentMenuItem === '/'}"><a href="#/">Home</a></li>
+               <li ng-class="{active: currentMenuItem === '/books'}"><a href="#/books">Books</a></li>
             </ul>
             <ul class="nav navbar-nav navbar-right">
-                <li ng-if="!isLogged()" ng-class="{active: currentMenuItem == '/login'}"><a href="#/login" >Login</a></li>
+               <li ng-if="!isLogged()" ng-class="{active: currentMenuItem == '/login'}">
+                 <a href="#/login">Authorization</a>
+               </li>
             </ul>
         </div>
     </div>

app/views/home.template.html

@@ -1,7 +1 @@
-<div>
-HOME</br>
-HOME</br>
-HOME</br>
-HOME</br>
-HOME</br>
-</div>
+<h2>Our home page</h2>

index.html

@@ -1,38 +1,31 @@
 <!DOCTYPE html>
-<html lang="en" ng-app='fea5'>
+<html lang="en" ng-app="fea5" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
-  <meta charset="UTF-8">
-  <title>AngularJS test</title>
-    <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
-    <link rel="stylesheet" type="text/css" href="css/style.css"/>
+  <meta charset="UTF-8" />
+  <title>Angular JS</title>
+  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
+  <link rel="stylesheet" href="css/style.css">
 </head>
-<body ng-controller="Main">
-<div class="container">
-<h2>{{$bookss[0].title}}</h2>
-<ng-include src="'app/views/header.template.html'"> </ng-include>
-<div ng-view></div>
+	<body ng-controller="Main">
+	  <div class="container">	  
+	    <ng-include src="'app/views/header.template.html'"></ng-include>
+	    <div ng-view></div>	
+	    <div ng-include src="'app/views/footer.template.html'"></div>
+	  </div>
 
+	  <script src="node_modules/angular/angular.js"></script> 
+	  <script src="node_modules/angular-route/angular-route.min.js"></script>
+	  <script src="app/app.module.js"></script> 
+	  <script src="app/constants/webApi.com.js"></script>
+	  <script src="app/app.config.js"></script> 
+	  <script src="app/app.routes.js"></app>.js"></script> 
+	  <script src="app/controllers/main.controller.js"></script>
+	  <script src="app/controllers/bookslist.controller.js"></script>
+	  <script src="app/controllers/header.controller.js"></script>
+	  <script src="app/services/books.factory.js"></script>
+	  <script src="app/controllers/bookdetails.controller.js"></script>
+	  <script src="app/controllers/login.controller.js"></script>
+	  <script src="app/services/account.factory.js"></script>
 
-
-</div>
-
-
-<ng-include src="'app/views/footer.template.html'"> </ng-include>
-
-  <script src="node_modules/angular/angular.js"></script>
-  <script src="app/app.module.js"></script> 
-  <script src="app/app.routes.js"></script>
-  <script src="app/app.config.js"></script> 
-  <script src="app/controllers/header.controller.js"></script>
-  <script src="app/controllers/main.controller.js"></script>
-  <script src="app/controllers/books-list.controller.js"></script>
-  <script src="app/controllers/books-details.controller.js"></script>
-  <script src="app/controllers/login.controller.js"></script>
-  <script src="app/controllers/home.controller.js"></script>
-  <script src="node_modules/angular-route/angular-route.min.js"></script>
-  <script src="app/constants/webapi.constant.js"></script>
-  <script src="app/services/books.factories.js"></script>
-  <script src="app/services/account.factories.js"></script>
-
-</body>
-</html>
+	</body>
+</html>

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "helloworld",
+  "name": "2018-06-01",
   "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "helloworld",
+  "name": "2018-06-01",
   "version": "1.0.0",
   "description": "",
   "main": "webpack.config.js",
@@ -7,7 +7,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "server": "webpack-dev-server --color --watch-content-base --open"
   },
-  "author": "test",
+  "author": "",
   "license": "ISC",
   "devDependencies": {
     "html-webpack-plugin": "^3.2.0",