Saverio Tosi
Frontend developer
extrategy
s.tosi@extrategy.net
A single-page application (SPA) is a web application or web site that fits on a single web page with the goal of providing a user experience similar to that of a desktop application.
Wikipedia
Photo by Microsoft
Assicurarsi di aver MongoDB installato
npm install bower -g
git clone https://github.com/e-xtrategy/unicam-angularjs.git
cd unicam-angularjs
git checkout 0-bootstrapping
npm install
bower install
npm start
<html ng-app>
...
<script src="bower_components/angular/angular.js"></script>
...
Nothing here {{'yet' + '!'}}
<h3>Students</h3>
<ul>
<li>Tizio</li>
<li>Caio</li>
<li>Paolo</li>
</ul>
<html lang="it" ng-app="studentApp">
<head>
...
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="StudentListController as studentList">
<h1>Lezione Angular</h1>
<hr>
<h3>Students</h3>
<ul>
<li ng-repeat="student in studentList.students">
{{student.name}} {{student.surname}}
</li>
</ul>
</body>
</html>
// Define the `studentApp` module
var studentApp = angular.module('studentApp', []);
// Define the `PhoneListController` controller
// on the `studentApp` module
studentApp.controller('StudentListController',
function StudentListController() {
var studentList = this;
studentList.students = [
{
'name': 'Paolo',
'surname': 'Rossa'
},
...];
});
Il nostro modulo principale seguito dal controller
angular.
module('myApp').
component('greetUser', {
template: 'Hello, {{$ctrl.user}}!',
controller: function GreetUserController() {
this.user = 'world';
}
});
<greet-user></greet-user>
<div>
Ricerca: <input ng-model="$ctrl.query" />
</div>
<div>
<ul>
<li ng-repeat="student in $ctrl.students | filter:$ctrl.query">
{{ student.name }} {{ student.surname }}
</li>
</ul>
</div>
angular.module('studentList').component('studentList', {
templateUrl: 'student-list/student-list.template.html',
controller: function () {
var studentList = this;
studentList.orderProp = 'name';
studentList.students = [
{...}];
}
});
ngModel
Ordina per:
<select ng-model="$ctrl.orderProp">
<option value="name">Nome</option>
<option value="surname">Cognome</option>
<option value="CFU">CFU</option>
</select>
XHR XMLHttpRequest
Utilizziamo il protocollo HTTP per richiedere dati(non html) ad un webserver
$http.get('api/v1.0/students').then(function(response) {
studentList.students = response.data;
});
Promise
promise.then(function(greeting) {
alert('Success: ' + greeting);
}, function(reason) {
alert('Failed: ' + reason);
});
<a href="#/students/{{student._id}}" class="thumb">
<img ng-src="{{student.imgUrl}}" alt="{{student.name}}" />
</a>
<body>
<div ng-view></div>
</body>
La direttiva ngView indica il punto in cui agirà il routing
angular.
module('studentApp').
config(['$locationProvider', '$routeProvider',
function config($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.
when('/students', {
template: '<student-list></student-list>'
}).
when('/students/:studentId', {
template: '<student-detail></student-detail>'
}).
otherwise('/students');
}
]);
angular.module('common', []);
angular.
module('common').
filter('media', function() {
return function(input) {
var toReturn = '(bassa)';
switch (true) {
case input <= 22:
toReturn = '(bassa)';
break;
case input > 22 && input <=26:
toReturn = '(media)';
break;
case input > 26:
toReturn = '(alta)';
break;
}
return input + toReturn;
};
});
<p>Media: {{ $ctrl.student.media | media }} </p>