Witam, napisałem prosty skrypt typu 'to do list' w angularze.
Moja prośba jest taka, aby ktoś ogarnięty w tym frameworku wytkną mi błędy.
Czy coś można było zrobić lepiej? Może prościej? Może w ogóle źle do tego podszedłem?
Jest to moje pierwsze zderzenie z tym frameworkiem, i nie jestem pewiem czy dobrze zrozumiałe rolę controllers, services itd.
inputItem.html
<div id="input">
<p>YOUR WORK TO DO:</p>
<input type="text" ng-model='text' ng-keyup='addItem($event.keyCode)' placeholder='HIT ENTER TO ADD'>
<button ng-click='addItem()'>ADD ITEM TO LIST</button>
</div>
showList.html
<div id="showList">
<div class="item" ng-repeat='item in list track by $index'>
<p ng-click='toggleSelect($index);' ng-class="{'selectedItem': selected($index)}"> {{item}}</p>
<button ng-click='delItem(item)'>Delete</button>
</div>
<button ng-show='anySelected' ng-click='commit()'>SELECT AS COMPLETED</button>
<div class="commitedItem" ng-repeat='item in commitedList track by $index'>
<p>{{item}}</p>
</div>
</div>
controllers.js
angular.module('app')
.controller('inputItemController', function($scope, ItemList)
{
$scope.text='';
$scope.addItem = function(keyCode = 13)
{
if((keyCode == 13) && ($scope.text != ''))
{
ItemList.addItem($scope.text);
$scope.text = '';
}
};
})
.controller('showListController', function($scope, ItemList)
{
$scope.list = ItemList.getItems('list');
$scope.commitedList = ItemList.getItems('completed');
$scope.anySelected = false;
$scope.delItem = function(text)
{
ItemList.delItem(text);
$scope.anySelected = ItemList.ifAnySelected();
};
$scope.toggleSelect = function(number)
{
ItemList.toggleItem(number);
$scope.anySelected = ItemList.ifAnySelected();
};
$scope.selected = function(number)
{
return ItemList.getSelectedStatus(number);
};
$scope.commit = function()
{
ItemList.moveToCommited();
$scope.anySelected = ItemList.ifAnySelected();
};
});
directives.js
angular.module('app')
.directive('inputItem', function(){
return{
restrict: 'E',
templateUrl: 'partials/inputItem.html',
controller: 'inputItemController'
};
})
.directive('showList', function()
{
return{
restrict: 'E',
templateUrl: 'partials/showList.html',
controller: 'showListController'
};
});
services,js
angular.module('app')
.service('ItemList', function()
{
let list = [];
let completedList = [];
let selectedList = [];
this.addItem = function(text)
{
list.push(text);
selectedList.push(false);
};
this.delItem = function(text)
{
let number = list.indexOf(text),
temp = list[number];
list.splice(number,1);
selectedList.splice(number,1);
return list[number];
};
this.toggleItem = function(number)
{
selectedList[number] = !selectedList[number];
};
this.getItems = function(type)
{
if(type == 'list')
return list;
else if(type == 'completed')
return completedList;
else if(type == 'selected')
return selectedList;
};
this.ifAnySelected = function()
{
let temp = false;
for(let item of selectedList)
if(item) temp = true;
return temp;
};
this.getSelectedStatus = function(number)
{
return selectedList[number];
};
this.moveToCommited = function()
{
for(let i = selectedList.length - 1; i>=0; i--)
{
if(selectedList[i])
{
completedList.push(list[i]);
list.splice(i,1);
selectedList.splice(i, 1);
}
}
};
});
Gdyby komuś chciało się przejrzeć ten kod, byłbym wdzięczny :)