Roma @ IED
8 Maggio 2015
in programmazione chiamiamo Design Pattern le soluzioni progettuali/architetturali a problemi comuni nell'ambito della organizzazione, estendibilita' e riusabilita' del codice di una applicazione.
Spesso i framework includono l'implementazione di pattern comuni come parte della loro infrastruttura
(all'interno della quale verra' inserira la business logic specifica dell'applicazione)
Views:
Controllers:
Models:
<div ng-controller="MyController as my">
<h1>Hello {{ my.data.name }}!</h1>
</div>
app.controller("MyController", MyController);
function MyController() {
var data = { name: "AngularJS" }
this.data = data;
}
var data = { name: "AngularJS"}
Tra i filtri standard forniti da angular ce ne sono alcuni che vengono spesso utilizzati nelle espressioni relative alle direttive ng-repeat:
item in products | filter:query
item in posts | orderBy:'creationDate':true | limitTo:2
La direttiva ng-submit consente di effettuare il binding degli eventi "submit" del form ad una funzione proveniente dallo $scope.
<form ng-submit="handleSubmit()">
...
<input type="submit" value="save">
</form>
function FormController($scope) {
$scope.handleSubmit = function() {
...
}
}
Oltre ad ng-submit altre direttive comuni con cui e' possibile effettuare il binding degli eventi del DOM piu' comuni:
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="angular.js"></script>
<script src="app.js"></script>
</head>
<body>
...
</body>
</html>
<body>
<div ng-controller="MyController as my">
<h1>Hello {{ my.name }}!</h1>
</div>
</body>
(function() {
var app = angular.module("myapp", []);
app.controller("MyController", MyController);
function MyController() {
this.name = "AngularJS"
}
})();
<body ng-app="ex03">
<div ng-controller="SearchProductController">
<h1>Search Products</h1>
<input type="text"
placeholder="Type a search term"
ng-model="data.query" />
<ul>
...
</ul>
</div>
</body>
<li ng-repeat="item in data.products | filter:data.query">
{{item.title}}: {{item.description}}
</li>
"item in data.products | filter:data.query"
(function() {
...
function SearchProductController() {
this.data = {
query: "",
products: [{
title: "AngularJS Intro",
description: "Ebook description",
price: 10.99
}, ...]
}
}
})();
<li ng-repeat="item in data.products | filter:data.query | orderBy:'price'">
{{item.title}}: {{item.description}} ({{ item.price | currency }})
</li>
"item in data.products | filter:data.query | orderBy:'price'"
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<script src="https://code.angularjs.org/1.3.15/angular.js">
</script>
<script src="todo.js"></script>
<link rel="stylesheet" href="todo.css">
</head>
<body>
<h2>Todo</h2>
</body>
</html>
.done-true {
text-decoration: line-through;
color: grey;
}
(function() {
var app = angular.module("todoApp", [])
app.controller("TodoListController",
TodoListController);
function TodoListController() {
}
})();
<h2>Todo</h2>
<div ng-controller="TodoListController as todoList">
<ul>
<li ng-repeat="todo in todoList.todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{ todo.done }}">
{{ todo.text }}
</span>
</li>
</ul>
</div>
function TodoListController() {
var todoList = this;
todoList.todos = [
{ text: "learn angular", done: true },
{ text: "build an angular app", done: false }
];
}
</ul>
<form ng-submit="todoList.addTodo()">
<input type="text" ng-model="todoList.todoText"
size="30" placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
function TodoListController() {
...
todoList.addTodo = function() {
todoList.todos.push({ text: todoList.todoText, done: false });
todoList.todoText = "";
};
}
<div ng-controller="TodoListController as todoList">
<span>
{{ todoList.remaining() }} of
{{ todoList.todos.length }} remaining
</span>
function TodoListController() {
...
todoList.remaining = function () {
var count = 0;
angular.forEach(todoList.todos, function (todo) {
count += todo.done ? 0 : 1;
});
return count;
};
}
<span>
{{ todoList.remaining() }} of
{{ todoList.todos.length }} remaining
</span>
[ <a href="" ng-click="todoList.archive()">archive</a> ]
function TodoListController() {
...
todoList.archive = function () {
var oldTodos = todoList.todos;
todoList.todos = [];
angular.forEach(oldTodos, function (todo) {
if (!todo.done) {
todoList.todos.push(todo);
}
});
};
}