Kezdőlap Felfedezés Súgó
Bejelentkezés
slavailchenko35
/
angularwork
Figyelés 1
Kedvenc 0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Forráskód Böngészése

angular

slavailchenko35 6 éve
commit
bbc0236246
11 módosított fájl, 9889 hozzáadás és 0 törlés
Osztott Nézet Diff Statisztika Mutatása
  1. 0 0
      app/app.config.js
  2. 1 0
      app/app.module.js
  3. 0 0
      app/app.routes.js
  4. 88 0
      app/controllers/books-list.controller.js
  5. 10 0
      app/controllers/books.controller.js
  6. 32 0
      app/controllers/main.controller.js
  7. 51 0
      index.html
  8. 9607 0
      package-lock.json
  9. 22 0
      package.json
  10. 62 0
      test.html
  11. 16 0
      webpack.config.js

+ 0 - 0
app/app.config.js
Fájl Megtekintése


+ 1 - 0
app/app.module.js
Fájl Megtekintése 

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

+ 0 - 0
app/app.routes.js
Fájl Megtekintése


+ 88 - 0
app/controllers/books-list.controller.js
Fájl Megtekintése 

@@ -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
 
+}
 
+	];
 
+
 
+
 
+
 
+
 
+});
 
+
 
+
 
+
 
+})();

+ 10 - 0
app/controllers/books.controller.js
Fájl Megtekintése 

@@ -0,0 +1,10 @@
 
+(function () {
 
+'use strict';
 
+app.controller('books-list', function($scope) {
 
+	console.log("OK");
 
+
 
+
 
+});
 
+
 
+
 
+})();

+ 32 - 0
app/controllers/main.controller.js
Fájl Megtekintése 

@@ -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);
 
+
 
+	}
 
+});
 
+
 
+
 
+})();

+ 51 - 0
index.html
Fájl Megtekintése 

@@ -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 különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 9607 - 0
package-lock.json


+ 22 - 0
package.json
Fájl Megtekintése 

@@ -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"
 
+  }
 
+}

+ 62 - 0
test.html
Fájl Megtekintése 

@@ -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>

+ 16 - 0
webpack.config.js
Fájl Megtekintése 

@@ -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;
 
+