v1.4

app/app.config.js

@@ -0,0 +1,5 @@
+app.run(function($rootScope, $location) {
+	$rootScope.$on('$routeChangeSuccess', function() {
+		$rootScope.currentMenuItem = $location.path() || '/';
+	});
+});

app/app.module.js

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

app/app.routes.js

@@ -0,0 +1,14 @@
+app.config(function($routeProvider, $locationProvider) {
+	$locationProvider.hashPrefix('');
+	$routeProvider
+	.when('/', {
+		templateUrl: 'app/views/home.template.html',
+		controller: 'Home'
+	})
+	.when('/books', {
+		templateUrl: 'app/views/books-list.template.html',
+		controller: 'BooksList'
+	})
+		.otherwise('/');
+	
+});

app/controllers/books-list.controller.js

@@ -4,19 +4,14 @@ app.controller('BooksList', function($scope) {
 	console.log("OK");
 	$scope.sortField = 'index';
 	$scope.sortBy = function(field) {
-	console.log(field);
 	$scope.sortField = ($scope.sortField === field) ? '-' + field : field;
 }
 $scope.deleteBook = function(bookId) {
-		console.log(bookId);
-		console.log($scope.books);
-
-		if ($scope.books.find(x => x.id === bookId)) {
-			$scope.books.splice(bookId, 1);
-		} 
-		else if ($scope.books.lenght === 0) return
-		else return
-		
+ function findBookId(element, index, array) {
+     if (element.id === bookId) return true
+ }
+ var index = $scope.books.findIndex(findBookId);
+ $scope.books.splice(index, 1);
 	}
 
 	$scope.books = [

app/controllers/header.controller.js

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

app/controllers/home.controller.js

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

app/views/books-list.template.html

@@ -0,0 +1,28 @@
+ <div class="container" ng-controller="BooksList">
+  <h1>Books list</h1>
+<input type="text" name="book" ng-model='searchString' placeholder="Search...">
+<table class="table table-striped 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>
+    </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><button class="btn btn-danger btn-xs" ng-click="deleteBook(book.id)">x</button></td>
+    </tr>
+  </tbody>
+</table>
+  </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">
+    footer
+    </div>
+</footer>

app/views/header.template.html

@@ -0,0 +1,16 @@
+<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</a></li>
+ <li ng-class="{active: currentMenuItem == '/books'}"><a href="#/books">Books</a></li>
+            </ul>
+            <ul class="nav navbar-nav navbar-right">
+               <li></li>
+            </ul>
+        </div>
+    </div>
+</nav>

app/views/home.template.html

@@ -0,0 +1,8 @@
+<div>
+HOME</br>
+HOME</br>
+HOME</br>
+HOME</br>
+HOME</br>
+<h1>HOME</h1>
+</div>

index.html

@@ -1,51 +1,31 @@
 <!DOCTYPE html>
 <html lang="en" ng-app='fea5'>
 <head>
-	<meta charset="UTF-8">
-	<title>AngularJS</title>
-		<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
+  <meta charset="UTF-8">
+  <title>AngularJS</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"/>
 </head>
-<body>
-	<div class="container" ng-controller="BooksList">
-	<h1>Books list</h1>
-<input type="text" name="book" ng-model='searchString' placeholder="Search...">
-<table class="table table-striped 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>
-    </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><button class="btn btn-danger btn-xs" ng-click="deleteBook(book.id)">x</button></td>
-    </tr>
-  </tbody>
-</table>
+<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'"> </ng-include>
 
-
-	</div>
-
-
-	<script src="node_modules/angular/angular.js"></script>
-	<script src="app/app.module.js"></script>
-	<script src="app/controllers/main.controller.js"></script>
-	<script src="app/controllers/books-list.controller.js"></script>
+  <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/main.controller.js"></script>
+  <script src="app/controllers/books-list.controller.js"></script>
+  <script src="app/controllers/header.controller.js"></script>
+  <script src="app/controllers/home.controller.js"></script>
+  <script src="node_modules/angular-route/angular-route.min.js"></script>
 
 </body>
 </html>

package-lock.json

@@ -102,6 +102,11 @@
       "resolved": "https://registry.npmjs.org/angular/-/angular-1.6.6.tgz",
       "integrity": "sha1-/Vo8+0N844LYVO4BEgeXl4Uny2Q="
     },
+    "angular-route": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/angular-route/-/angular-route-1.7.1.tgz",
+      "integrity": "sha512-UK4Ky6llpNMMMp4y+CJlg4rQFWz+mvt/0iGc6HHX6MbilkAp13vgwJ2kuAjb0qgRcn121FU9y4z8pt6fzjS/NQ=="
+    },
     "ansi-escapes": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz",

package.json

@@ -7,7 +7,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "server": "webpack-dev-server --color --watch-content-base --open"
   },
-  "author": "",
+  "author": "test",
   "license": "ISC",
   "devDependencies": {
     "html-webpack-plugin": "^3.2.0",
@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "angular": "^1.6.6",
+    "angular-route": "^1.7.1",
     "bootstrap": "^3.3.7"
   }
 }