6 lat temu · bbc0236246
--- a/app/app.config.js
+++ b/app/app.config.js
--- a/app/app.module.js
+++ b/app/app.module.js
@@ -0,0 +1 @@
 
				+var app = angular.module('fea5', []);
			
--- a/app/app.routes.js
+++ b/app/app.routes.js
--- a/app/controllers/books-list.controller.js
+++ b/app/controllers/books-list.controller.js
@@ -0,0 +1,88 @@
 
				+(function () {
			
 
				+'use strict';
			
 
				+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
			
 
				+		
			
 
				+	}
			
 
				+
			
 
				+	$scope.books = [
			
 
				+		{
			
 
				+			id: 0,
			
 
				+			title: "Harry Potter",
			
 
				+			author: "J. ROwling",
			
 
				+			date: "1970-01-01",
			
 
				+			cost: 100,
			
 
				+			rate: 1.2
			
 
				+	},
			
 
				+	{
			
 
				+		id: 1,
			
 
				+		title: "Harry COMPUTER",
			
 
				+		author: "J. ROwling",
			
 
				+		date: "1970-01-01",
			
 
				+		cost: 99,
			
 
				+		rate: 2.4
			
 
				+},
			
 
				+{
			
 
				+	id: 2,
			
 
				+	title: "Harry LIGTER",
			
 
				+	author: "Git. Bash",
			
 
				+	date: "2026-05-15",
			
 
				+	cost: 5,
			
 
				+	rate: 1
			
 
				+},
			
 
				+{
			
 
				+	id: 3,
			
 
				+	title: "Berry Potter",
			
 
				+	author: "M. Bower",
			
 
				+	date: "1950-01-01",
			
 
				+	cost: 88,
			
 
				+	rate: 3
			
 
				+},
			
 
				+{
			
 
				+	id: 4,
			
 
				+	title: "Adam Potter",
			
 
				+	author: "V. NPM",
			
 
				+	date: "1870-01-01",
			
 
				+	cost: 24,
			
 
				+	rate: 3.2
			
 
				+},
			
 
				+{
			
 
				+	id: 5,
			
 
				+	title: "The Things We Don't Say",
			
 
				+	author: "Carey, Ella",
			
 
				+	date: "2010-15-01",
			
 
				+	cost: 42,
			
 
				+	rate: 1.1
			
 
				+},
			
 
				+{
			
 
				+	id: 6,
			
 
				+	title: "Невеста Мрачнейшего",
			
 
				+	author: "Лилия Лисовская",
			
 
				+	date: "2018-05-21",
			
 
				+	cost: 55.6,
			
 
				+	rate: 5
			
 
				+}
			
 
				+	];
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+});
			
 
				+
			
 
				+
			
 
				+
			
 
				+})();
			
--- a/app/controllers/books.controller.js
+++ b/app/controllers/books.controller.js
@@ -0,0 +1,10 @@
 
				+(function () {
			
 
				+'use strict';
			
 
				+app.controller('books-list', function($scope) {
			
 
				+	console.log("OK");
			
 
				+
			
 
				+
			
 
				+});
			
 
				+
			
 
				+
			
 
				+})();
			
--- a/app/controllers/main.controller.js
+++ b/app/controllers/main.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);
			
 
				+
			
 
				+	}
			
 
				+});
			
 
				+
			
 
				+
			
 
				+})();
			
--- a/index.html
+++ b/index.html
@@ -0,0 +1,51 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en" ng-app='fea5'>
			
 
				+<head>
			
 
				+	<meta charset="UTF-8">
			
 
				+	<title>AngularJS Silifonov</title>
			
 
				+		<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.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>
			
 
				+
			
 
				+
			
 
				+	<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>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,22 @@
 
				+{
			
 
				+  "name": "helloworld",
			
 
				+  "version": "1.0.0",
			
 
				+  "description": "",
			
 
				+  "main": "webpack.config.js",
			
 
				+  "scripts": {
			
 
				+    "test": "echo \"Error: no test specified\" && exit 1",
			
 
				+    "server": "webpack-dev-server --color --watch-content-base --open"
			
 
				+  },
			
 
				+  "author": "",
			
 
				+  "license": "ISC",
			
 
				+  "devDependencies": {
			
 
				+    "html-webpack-plugin": "^3.2.0",
			
 
				+    "webpack": "^3.12.0",
			
 
				+    "webpack-cli": "^2.1.4",
			
 
				+    "webpack-dev-server": "^2.11.2"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "angular": "^1.6.6",
			
 
				+    "bootstrap": "^3.3.7"
			
 
				+  }
			
 
				+}
			
--- a/test.html
+++ b/test.html
@@ -0,0 +1,62 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en" ng-app='fea5'>
			
 
				+<head>
			
 
				+	<meta charset="UTF-8">
			
 
				+	<title>AngularJS Silifonov</title>
			
 
				+		<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
			
 
				+</head>
			
 
				+<body>
			
 
				+	<div class="container" ng-controller="Main">
			
 
				+	<div class="page-header"><h1>Hello</h1></div>
			
 
				+	<h2 ng-hide="x > y">Hide</h2>
			
 
				+	<h2 ng-show="x > y">Show</h2>
			
 
				+	<h3 ng-if="false">ng-If</h3>
			
 
				+	<div ng-switch="color">
			
 
				+<div ng-switch-when="red">red</div>
			
 
				+<div ng-switch-when="blue">blue</div>
			
 
				+<div ng-switch-default>Default</div>
			
 
				+	</div>
			
 
				+<input type="number" name="name" ng-model='value'> <span>+ 1 =  {{value + 2}} {{x + y}}</span>
			
 
				+
			
 
				+<div>{{data}}</div>
			
 
				+<ol>
			
 
				+<li ng-repeat="item in data track by $index">{{item}} <button ng-click="deleteItem($index)">x</button> </li>
			
 
				+</ol>
			
 
				+<span>{{ x + 2 + y}} {{text}}</span>
			
 
				+<input type="number" name="textInput" ng-model='x'>
			
 
				+<button class="btn btn-info" ng-click="sum()">+</button>
			
 
				+<input type="number" name="textInput" ng-model='y'>
			
 
				+<span>{{result}}</span>
			
 
				+</br>
			
 
				+<input type="text" name="inputText" ng-model="item">
			
 
				+<button ng-click="addItem()">Add to array</button>
			
 
				+</br>
			
 
				+<section class="row">
			
 
				+	<h2>Shape Maker</h2>
			
 
				+	<div class="col-xs-6">
			
 
				+
			
 
				+		<label for="width">Width</label>
			
 
				+<input type="number" name="width" value={{style.width}} ng-model='style.width'></br>
			
 
				+	<label for="width">Height</label>
			
 
				+<input type="number" name="height"  value={{style.height}} ng-model='style.height'></br>
			
 
				+	<label for="background">Background</label>
			
 
				+<input type="text" name="background" value="#" placeholder="#" ng-model='style.background'></br>
			
 
				+<select  name="22" ng-model='style.background'>
			
 
				+	<option value="blue">Blue</option>
			
 
				+	<option value="yellow">Yellow</option>
			
 
				+	<option value="green">Green</option>
			
 
				+</select>
			
 
				+	</div>
			
 
				+<div class="col-xs-3" ng-style="{background: style.background, height: style.height + 'px', width: style.width + 'px'}">
			
 
				+AREA
			
 
				+</div>
			
 
				+</section>
			
 
				+
			
 
				+	</div>
			
 
				+
			
 
				+
			
 
				+	<script src="node_modules/angular/angular.js"></script>
			
 
				+	<script src="app/app.module.js"></script>
			
 
				+	<script src="app/controllers/main.controller.js"></script>
			
 
				+</body>
			
 
				+</html>
			
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -0,0 +1,16 @@
 
				+const path = require('path');
			
 
				+const glob = require('glob');
			
 
				+
			
 
				+const config = {
			
 
				+	context: path.resolve(__dirname, './'),
			
 
				+	entry: {
			
 
				+		app: './app/app.module.js',
			
 
				+	},
			
 
				+	devServer: {
			
 
				+		port: 9000,
			
 
				+		stats: 'errors-only'
			
 
				+	}
			
 
				+};
			
 
				+
			
 
				+module.exports = config;
			
 
				+