AngularJS

 

 

Chi sono

Saverio Tosi

Frontend developer

extrategy

s.tosi@extrategy.net

https://angularjs.org/

Single Page Applications

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

0 - Bootstrapping

https://docs.angularjs.org/tutorial/step_00

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' + '!'}}
  • La direttiva ngApp indica la radice della notra app

1 - Static Template

https://docs.angularjs.org/tutorial/step_01

<h3>Students</h3>
<ul>
  <li>Tizio</li>
  <li>Caio</li>
  <li>Paolo</li>
</ul>

2 - AngularJS Templates

https://docs.angularjs.org/tutorial/step_02

<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>
  • ngRepeat è una direttiva che permette di ciclare un array
// 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

3 - Components

https://docs.angularjs.org/tutorial/step_03

angular.
  module('myApp').
  component('greetUser', {
    template: 'Hello, {{$ctrl.user}}!',
    controller: function GreetUserController() {
      this.user = 'world';
    }
  });
<greet-user></greet-user>

4 - Directory and File Organization

https://docs.angularjs.org/tutorial/step_04

  • One Feature per File

  • Organizing by Feature

  • Using Modules

5 - Filtering Repeaters

https://docs.angularjs.org/tutorial/step_05

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

6 - Two-way Data Binding

https://docs.angularjs.org/tutorial/step_06

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>

7 - XHR & Dependency Injection

https://docs.angularjs.org/tutorial/step_07

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);
});

8 - Templating Link & Views

https://docs.angularjs.org/tutorial/step_08

<a href="#/students/{{student._id}}" class="thumb">
  <img ng-src="{{student.imgUrl}}" alt="{{student.name}}" />
</a>
  • La direttiva ngSrc permette di utilizzare la direttiva la notazione {{ }}
  • Questo non è necessario in href

9 - Routing & Multiple Views

https://docs.angularjs.org/tutorial/step_09

<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');
    }
  ]);

10 - More Templating

https://docs.angularjs.org/tutorial/step_10

11 - Custom Filters

https://docs.angularjs.org/tutorial/step_11

A Filter is a way to transform displayed values within a template

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>

Useful links

Thanks!

AngularJS

By extrategy

Made with Slides.com

AngularJS

  • 2,155

More from extrategy