Scrivere un app Angular è un gioco da ragazzi, ovviamente giorno dopo giorno le conoscenze aumentano tanto da migliorar e rendere più sicuro il proprio codice, quello che seguirà in questo post e nei prossimi sono tutte le fasi, dalla più “spaghetti code” alla più sistemata di come strutturare un app Angular

Prima Fase : Startup della “spaghetti code” App

Iniziamo utilizzando il template base creato da Angular stessa che potete trovare nel manuale sul sito ufficiale o su GitHub a questo indirizzo.
Consiglio l’utilizzo di questo template perché è un ottima base su cui andare passo passo a creare un app sempre più ben definita e già pronta per l’integrazione con Karma e Jasmine (test che vedremo più avanti), il progetto, inoltre, contiene già l’utilizzo di Bower, libreria che vedremo più avanti e che ci aiuta per la gestione delle dipendenze esterne.
Scarichiamo il repo in macchina:

git clone https://github.com/angular/angular-seed.git angular-base-project
cd angular-base-project

e istalliamo le prime dipendenze (dopo vedremo per bene di cosa si tratta)

bower install

quello che ci troveremo davanti è una struttura di questo tipo:

-App
 -bower_components
 -components
  -version
 -view1
 -view2
 -app.css
 -app.js

Adesso possiamo iniziare a scriver codice! Il nostro progetto sarà la base di un backoffice per la gestione di utenti, istallazioni e acquisti
Iniziamo definendo che view1 sarà la parte della nostra app che conterrà tutti gli utenti e view2 quella per gli acquisti,
Le due cartelle contengono ognuna tre semplici file, un file javascript dove andremo a definire il comportamento della nostra pagina e la pagina html nella quale dovremmo preoccuparci di definire solamente lo stile con cui visualizzare i nostri contenuti, quindi con linguaggio base html, e in più a fare il banding dei nostri contenuti utilizzando sintassi Angular che è facilmente riconoscibile perché viene sempre definita dall’utilizzo delle doppie parentesi graffe in apertura e chiusura “{{ }}” nel caso si voglia visualizzare qualcosa o dal prefisso “ng-” nel caso vengano utilizzate delle direttive dentro i div html
Il file più importante della nostra app Angular è l’app.js che definisce in poche righe come si deve comportare la nostra app all’avvio

angular.module(‘myApp’, [  //definisce il nome dell'intera app
 ‘ngRoute’,  //importa il modulo esterno per gestire le rotte
‘myApp.view1’, //è il modulo che per noi gestirà la parte utenti 
‘myApp.view2’, // è il modulo che per noi gestirà la parte acquisti
‘myApp.version’ //modulo per la gestire la versione del progetto
]).config([‘$routeProvider’, function($routeProvider) {
//qualsiasi path venga digitato nell'url che non sia già   definito
//nei moduli creati verrà fatto un reindirizzamento alla view1

$routeProvider.otherwise({redirectTo: ‘/view1’});
}]);

la creazione dei due moduli view1 e view2 avviene all’interno del file js delle rispettive sotto cartelle

angular.module(‘myApp.view1’, [‘ngRoute’])
.config([‘$routeProvider’, function($routeProvider) {
 $routeProvider.when(‘/view1’, { //quando viene richiesta la view1
templateUrl: ‘view1/view1.html’, //mostra questa pagina   html
controller: ‘View1Ctrl’ //che viene gestita da questo controller
});
}])
.controller(‘View1Ctrl’, function() {}); //il  controller richiesto sopra

Iniziamo adesso con la gestione del modulo utenti per capir meglio come utilizzare un controller
Iniziamo con il ridefinire la cartella e tutti i path nella nostra applicazione che vengono chiamati view1 in users in modo da rendere più semplice la lettura del codice. Il file js del modulo users adesso avrà questo aspetto:

angular.module(‘myApp.users’, [‘ngRoute’])
.config([‘$routeProvider’, function($routeProvider) {
 $routeProvider.when(‘/users’, {
 templateUrl: ‘users/users.html’,
 controller: ‘UsersCtrl’
 });
}])
.controller(‘UsersCtrl’, function() {});

Definiamo nello scope del nostro controller un array in modo da poter visualizzarlo nella nostra pagina web.
Lo scope ($scope) indica il contesto in cui vengono salvati i dati di un’applicazione (il model) ed in cui vengono valutate le espressioni utilizzate nella view, esso ha vita e può essere visualizzato solamente all’interno della view di quel controller, per poter utilizzare lo “scope” comune dovremmo quindi usare il $rootScope

.controller(‘UsersCtrl’, function($scope) {
$scope.users = [
{ fullName: “Paolo Rossi”, email: “primo@thecreazy.it” },
{ fullName: “Francesco Rossi”, email: “secondo@thecreazy.it” },
{ fullName: “Gianni Rossi”, email: “terzo@thecreazy.it” }
];
});

In questo modo il nostro array users sarà visibile nella view users.html nella quale andremo a creare una veloce tabella per vedere come utilizzare le espressioni base di Angular

<p>Questa pagina gestisce i nostri utenti.</p>
<hr>
<table>
<thead>
 <tr>
    <th>Id</id>
    <th>Email</th>
    <th>Full Name</th>
 </tr>
</thead>
<tbody>
 <tr ng-repeat=”user in users”>
     <td>{{$index}}</td>
     <td>{{user.email}}</td>
     <td>{{user.fullName}}</td>
 </tr>
</tbody>
</table>

Da questo banale esempio vediamo due espressioni base del linguaggio Angular
Le espressioni che si trovano tra le doppie “{{}}” vengono utilizzate per ritornare una variabile:

{{1+1}} => Mostrerà a schermo 2
{{$index}} => All’iterno di un ng-repeat ci restituirà  l’indice dell’elemento
{{user.email}} => Restituità la mail di un singolo user
{{users}} => Anche se non utilizzato in questo esempio restituirà il      JSON contenente tutti gli utenti

Il secondo tipo di espressioni, ng-attributes, sono delle vere e proprio direttive messe a disposizione da Angular che ci danno la possibilità di far diverse azioni, ad esempio:

  • La direttiva ng-app definisce un’applicazione Angular. In Angular, puoi avere più di un app all’interno della stessa pagina, questa direttiva serve a capir dove inizia e finisce ogni singola app, quindi delimita il perimetro dello scope.

  • La direttiva ng-repeat è una delle più usate e serve a definire dei loop su un oggetto presente nello scope. Nel nostro esempio creiamo in maniera facile le line della tabella dicendo di far un ciclo su “users” e per ogni “user” trovato di visualizzare la mail e il fullName in due colonne diverse

Conclusioni

Abbiamo visto come far partire una veloce e banale applicazione Angular,
l’esempio completo lo trovate a questo link su git: https://github.com/thecreazy/angular-base-project
il progetto conterrà man mano tutte le evolutive che pian piano andremo a studiar nei post a seguire, cercherò di tener una cartella lezioni in modo da aver il codice diviso e incrementale

Lezioni

  • Prima lezione: Startup della “spaghetti code” App