noMaser

app/app.config.js

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

app/app.module.js

@@ -1 +1 @@
-var app = angular.module('MyApp', []);
+var app = angular.module('MyApp', ['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

@@ -6,7 +6,7 @@
 			$scope.sortFild = ($scope.sortFild === field)? '-'+ field : field;
 		};
 		$scope.deleteBook = function(index){
-			console.log(index.id)
+			console.log(index)
 			console.log($scope.books[0])
 			for (var i = 0; i < $scope.books.length; i++) {
 				if (index === $scope.books[i].id) {

app/controllers/header.controller.js

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

app/controllers/main.controller.js

@@ -2,51 +2,7 @@
 	'use strict';
 
 	app.controller('Main', function($scope){
-		 // $scope.phones = [{
-	  //       name: 'Nokia Lumia 630',
-	  //       year: 2014,
-	  //       price: 200,
-	  //       company: {
-	  //           name: 'Nokia',
-	  //           country: 'Финляндия'
-	  //       }
-	  //   },{
-	  //       name: 'Samsung Galaxy S 4',
-	  //       year: 2014,
-	  //       price: 400,
-	  //       company: {
-	  //           name: 'Samsung',
-	  //           country: 'Республика Корея'
-	  //       }
-	  //   },{
-	  //       name: 'Mi 5',
-	  //       year: 2015,
-	  //       price: 300,
-	  //       company: {
-	  //           name: 'Xiaomi',
-	  //           country: 'Китай'
-	  //       }
-	  //   }]
-	  $scope.lists = [
-	  	{text: 'Покормить кота',},
-	  	{text: 'Покормить кота',},
-	  	{text: 'Покормить кота',},
-	  	{text: 'Покормить кота',}
-	  ];
-	  $scope.style = {
-	  	width: 100,
-	  	height: 100,
-	  	background: 'red'
-	  }
-	  
-	  console.log($scope.lists)
-	    $scope.addItem = function(item){
-	    	$scope.lists.push($scope.item)
-	    	$scope.item = "";
-	    };
-	    $scope.deletItem = function(item){
-	    	$scope.lists.splice(item, 1);
-	    };
+		
 
 	})
 })();

app/views/books-list.teamplate.html

@@ -0,0 +1,30 @@
+<div ng-controller='BooksList' class="container">
+		<div class="page-header">
+			<h1>Books</h1>
+		</div>
+		<div class="page-boody">
+			<input type="text" ng-model='searchString' placeholder="Filter" class="form-control">
+			<table class="table table-hover container">
+				<thead>
+					<td ng-click='sortBy("title")'><i class="glyphicon" ng-class='{"glyphicon glyphicon-chevron-up": sortFild === "title", "glyphicon glyphicon-chevron-down": sortFild === "-title"}'></i>Title</td>
+					<td ng-click='sortBy("author")'><i class="glyphicon" ng-class='{"glyphicon glyphicon-chevron-up": sortFild === "author", "glyphicon glyphicon-chevron-down": sortFild === "-author"}'></i>Author</td>
+					<td ng-click='sortBy("date")'><i class="glyphicon" ng-class='{"glyphicon glyphicon-chevron-up": sortFild === "date", "glyphicon glyphicon-chevron-down": sortFild === "-date"}'></i>Date</td>
+					<td ng-click='sortBy("cost")'><i class="glyphicon" ng-class='{"glyphicon glyphicon-chevron-up": sortFild === "cost", "glyphicon glyphicon-chevron-down": sortFild === "-cost"}'></i>Price</td>
+					<td ng-click='sortBy("rate")'><i class="glyphicon" ng-class='{"glyphicon glyphicon-chevron-up": sortFild === "rate", "glyphicon glyphicon-chevron-down": sortFild === "-rate"}'></i>Rate</td>
+					<td></td>
+				</thead>
+				<tbody>
+					<tr ng-repeat='item in books | orderBy:sortFild  | filter: searchString'>
+						<td>{{item.title}}</td>
+						<td>{{item.author | uppercase}}</td>
+						<td>{{item.date | date: 'longDate'}}</td>
+						<td>{{item.cost}}</td>
+						<td>{{item.rate | number : 1}}</td>
+						<td>
+							<button class="btn btn-danger" ng-click='deleteBook(item.id)'></button>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>

app/views/books-list.template.html

@@ -0,0 +1,30 @@
+<div class="container">
+		<div class="page-header">
+			<h1>Books</h1>
+		</div>
+		<div class="page-boody">
+			<input type="text" ng-model='searchString' placeholder="Filter" class="form-control">
+			<table class="table table-hover container">
+				<thead>
+					<td ng-click='sortBy("title")'><i class="glyphicon" ng-class='{"glyphicon glyphicon-chevron-up": sortFild === "title", "glyphicon glyphicon-chevron-down": sortFild === "-title"}'></i>Title</td>
+					<td ng-click='sortBy("author")'><i class="glyphicon" ng-class='{"glyphicon glyphicon-chevron-up": sortFild === "author", "glyphicon glyphicon-chevron-down": sortFild === "-author"}'></i>Author</td>
+					<td ng-click='sortBy("date")'><i class="glyphicon" ng-class='{"glyphicon glyphicon-chevron-up": sortFild === "date", "glyphicon glyphicon-chevron-down": sortFild === "-date"}'></i>Date</td>
+					<td ng-click='sortBy("cost")'><i class="glyphicon" ng-class='{"glyphicon glyphicon-chevron-up": sortFild === "cost", "glyphicon glyphicon-chevron-down": sortFild === "-cost"}'></i>Price</td>
+					<td ng-click='sortBy("rate")'><i class="glyphicon" ng-class='{"glyphicon glyphicon-chevron-up": sortFild === "rate", "glyphicon glyphicon-chevron-down": sortFild === "-rate"}'></i>Rate</td>
+					<td></td>
+				</thead>
+				<tbody>
+					<tr ng-repeat='item in books | orderBy:sortFild  | filter: searchString'>
+						<td>{{item.title}}</td>
+						<td>{{item.author | uppercase}}</td>
+						<td>{{item.date | date: 'longDate'}}</td>
+						<td>{{item.cost}}</td>
+						<td>{{item.rate | number : 1}}</td>
+						<td>
+							<button class="btn btn-danger" ng-click='deleteBook(item.id)'></button>
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>

app/views/footer.teamplate.html

@@ -0,0 +1,5 @@
+<footer class="navbar-default navbar-fixed-bottom p-t-5 p-b-40">
+    <div class="container">
+    	dasfgmlsd
+    </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,3 @@
+<div class="container text-center">
+	<h1>Nu Tipo Knigi</h1>
+</div>

index.html

@@ -4,62 +4,22 @@
 	<meta charset="utf-8">
 	<title>My To Do Angular</title>
 	<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
+	<link rel="stylesheet" type="text/css" href="./css/style.css">
 </head>
 <body>
-	<!-- <div ng-controller='Main' class="container">
-		<div class="page-header">
-			<h1>Seleznev Do IT</h1>
-		</div>
-		<div class="content">
-			<input type="numder" ng-model='value'> {{value * 3}}
-			<input type="text" ng-model='item'>
-			<button ng-click='addItem()'>Add</button>
-			<ul>
-				<li ng-repeat='list in lists track by $index'>{text}<button class="btn-danger" ng-click='deletItem($index)'>X</button></li>
-			</ul>
-			<label>width</label>
-			<input type="numder" ng-model='style.width'>
-			<label>height</label>
-			<input type="numder" ng-model='style.height'>
-			<label>background</label>
-			<input type="text" ng-model='style.background'>
-			<div ng-style='{width: style.width + "px", height: style.height + "px", background: style.background}'></div>
-		</div>
-	</div> -->
-	
-	<div ng-controller='BooksList' class="container">
-		<div class="page-header">
-			<h1>Books</h1>
-		</div>
-		<div class="page-boody">
-			<input type="text" ng-model='searchString' placeholder="Filter" class="form-control">
-			<table class="table-bordered table-hover container">
-				<thead>
-					<td ng-click='sortBy("title")'><i class="glyphicon" ng-class='{"glyphicon glyphicon-chevron-up": sortFild === "title", "glyphicon glyphicon-chevron-down": sortFild === "-title"}'></i>Title</td>
-					<td ng-click='sortBy("author")'><i class="glyphicon" ng-class='{"glyphicon glyphicon-chevron-up": sortFild === "author", "glyphicon glyphicon-chevron-down": sortFild === "-author"}'></i>Author</td>
-					<td ng-click='sortBy("date")'><i class="glyphicon" ng-class='{"glyphicon glyphicon-chevron-up": sortFild === "date", "glyphicon glyphicon-chevron-down": sortFild === "-date"}'></i>Date</td>
-					<td ng-click='sortBy("cost")'><i class="glyphicon" ng-class='{"glyphicon glyphicon-chevron-up": sortFild === "cost", "glyphicon glyphicon-chevron-down": sortFild === "-cost"}'></i>Price</td>
-					<td ng-click='sortBy("rate")'><i class="glyphicon" ng-class='{"glyphicon glyphicon-chevron-up": sortFild === "rate", "glyphicon glyphicon-chevron-down": sortFild === "-rate"}'></i>Rate</td>
-					<td></td>
-				</thead>
-				<tbody>
-					<tr ng-repeat='item in books | orderBy:sortFild  | filter: searchString'>
-						<td>{{item.title}}</td>
-						<td>{{item.author | uppercase}}</td>
-						<td>{{item.date | date: 'longDate'}}</td>
-						<td>{{item.cost}}</td>
-						<td>{{item.rate | number : 1}}</td>
-						<td>
-							<button class="btn btn-danger" ng-click='deleteBook(item.id)'></button>
-						</td>
-					</tr>
-				</tbody>
-			</table>
-		</div>
+	<div class="container" ng-controller='Main'>
+		<ng-include src='"app/views/header.template.html"'></ng-include>
+		<ng-view></ng-view>
+		<!-- <ng-include src='"app/views/books-list.teamplate.html"'></ng-include> -->
+		<ng-include src='"app/views/footer.teamplate.html"'></ng-include>
 	</div>
 	<script type="text/javascript" src="./node_modules/angular/angular.js"></script>
+	<script type="text/javascript" src="./node_modules/angular-route/angular-route.min.js"></script>
 	<script type="text/javascript" src="app/app.module.js"></script>
-	<!-- <script type="text/javascript" src="app/controllers/main.controller.js"></script> -->
+	<script type="text/javascript" src="app/app.routes.js"></script>
+	<script type="text/javascript" src="app/app.config.js"></script>
 	<script type="text/javascript" src="app/controllers/books-list.controller.js"></script>
+	<script type="text/javascript" src="app/controllers/main.controller.js"></script>
+	<script type="text/javascript" src="app/controllers/header.controller.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

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