v1.2

app/app.module.js

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

app/app.routes.js

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

app/controllers/books-list.controller.js

@@ -7,7 +7,7 @@ app.controller('BooksList', function($scope) {
 	console.log(field);
 	$scope.sortField = ($scope.sortField === field) ? '-' + field : field;
 }
-$scope.deleteBook = function(bookId) {
+$scope.deleteBook = (bookId) => {
 		console.log(bookId);
 		console.log($scope.books);
 

app/controllers/footer.controller.js

@@ -0,0 +1,15 @@
+(function () {
+'use strict';
+app.controller('Header', function($scope) {
+	console.log("OK");
+	$scope.sortField = 'index';
+	$scope.sortBy = function(field) {
+	console.log(field);
+	$scope.sortField = ($scope.sortField === field) ? '-' + field : field;
+}
+
+})
+
+
+
+})();

app/controllers/header.controller.js

@@ -0,0 +1,15 @@
+(function () {
+'use strict';
+app.controller('Header', function($scope) {
+	console.log("OK");
+	$scope.sortField = 'index';
+	$scope.sortBy = function(field) {
+	console.log(field);
+	$scope.sortField = ($scope.sortField === field) ? '-' + field : field;
+}
+
+})
+
+
+
+})();

app/controllers/home.controller.js

@@ -0,0 +1,32 @@
+(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);
+
+	$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/views/books-list.template.html

@@ -0,0 +1,30 @@
+<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,4 @@
+<footer class="navbar-default navbar-fixed-bottom p-t-5 p-b-40">
+    <div class="container">Hello World
+    </div>
+</footer>

app/views/header.template.html

@@ -0,0 +1,17 @@
+
+
+<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></li>
+            </ul>
+            <ul class="nav navbar-nav navbar-right">
+               <li></li>
+            </ul>
+        </div>
+    </div>
+</nav>

app/views/home.template.html

@@ -0,0 +1,3 @@
+<nav>
+home
+</nav>

css/style.css

@@ -0,0 +1,11 @@
+
+.b-95 {padding-bottom:95px}
+.p-l-95{padding-left:95px}
+.m-t-100{margin-top:100px}
+.m-r-100{margin-right:100px}
+.m-b-100{margin-bottom:100px}
+.m-l-100{margin-left:100px}
+.p-t-100{padding-top:100px}
+.p-r-100{padding-right:100px}
+.p-b-100{padding-bottom:100px}
+.p-l-100{padding-left:100px}

index.html

@@ -4,48 +4,22 @@
 	<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>
-
-
-
-
-
-
-	</div>
-
+<body ng-controller='Main'>  
+<ng-include src="'app/views/header.template.html'"></ng-include>
+<div ng-view>
+</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/controllers/main.controller.js"></script>
+  <script src="app/app.routes.js"></script>
+  <script src="app/controllers/header.controller.js"></script>
+	<script src="app/controllers/home.controller.js"></script>
+  <script src="app/controllers/footer.controller.js"></script>
 	<script src="app/controllers/books-list.controller.js"></script>
+  <script src="node_modules/angular-route/angular-route.min.js"></script>
 
 </body>
 </html>

package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "angular": "^1.6.6",
+    "angular-route": "^1.7.1",
     "bootstrap": "^3.3.7"
   }
 }