Introduco il mio primo mini tutorial in Angular Js. Da diverso tempo mi sono cimentato nell’utilizzo di Angular js anche in complesse applicazioni, single page app che spesso vivono all’interno di installazioni complesse di WordPress e REST-API. Oggi nello speficico vi illustro come fare la classica “to do list” in Angular, uno delle keyword più ricercate per chi approccia con Angular per la prima volta in quanto permette di comprendere con poco le potenzialità di questo splendido framework. Vedremo alcuni concetti basilari come lo $scope di angular, come creare un loop e, come fare data-binding con gli elementi del dom html. La to do list si compone di 2 files, una index.html, e todo.js (ho messo 2 righe di stile). Da notare subito che per far sapere alla nostra pagina che stiamo usando angular utilizziamo la direttiva ng-app all’interno del tag iniziale <html> che diventa <html ng-app=”todoApp”>. TodoApp, sarà il nome della nostra “app” ovvero la logica contenente i controller e le funzioni.
TO DO LIST (Index.html)
<!doctype html>
<html ng-app="todoApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="todo.js"></script>
<style>
.done-true {
text-decoration: line-through;
color: grey;
}
</style>
</head>
<body>
<h2>Todo</h2>
<div ng-controller="TodoListController as todoList">
<span>{{remaining()}} of {{todos.length}} remaining</span>
[ <a href="" ng-click="archive()">archive</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todos">
<label class="checkbox">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</label>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
</body>
</html>
Todo.js
angular.module('todoApp', [])
.controller('TodoListController', function() {
todos = [
{text:'learn AngularJS', done:true},
{text:'build an AngularJS app', done:false}];
addTodo = function() {
todos.push({text:todoText, done:false});
todoText = '';
};
remaining = function() {
var count = 0;
angular.forEach(todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};
archive = function() {
var oldTodos = todos;
todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done).todos.push(todo);
});
};
});