Angular est un Framework open source écrit en JavaScript qui permet la création d’applications Web et plus particulièrement de ce qu’on appelle des  « Single Page Applications » : des applications web accessibles via une page web unique qui permet de fluidifier l’expérience utilisateur et d’éviter les chargements.

Développé par Google, Angular est un Framework open source écrit en JavaScript qui permet la création d’applications Web et plus particulièrement de ce qu’on appelle des  « Single Page Applications » : des applications web accessibles via une page web unique qui permet de fluidifier l’expérience utilisateur et d’éviter les chargements de pages à chaque nouvelle action. Le Framework est basé sur une architecture du type MVC et permet donc de séparer les données, le visuel et les actions pour une meilleure gestion des responsabilités. Un type d’architecture qui a largement fait ses preuves et qui permet une forte maintenabilité et une amélioration du travail collaboratif.

Loin de moi l’idée de faire du prosélytisme, ce n’est pas mon genre et je n’ai pas assez de recul et de connaissances sur les autres produits du marché pour m’aventurer là-dedans, mais je dois dire qu’Angular est un Framework solide, complet et homogène qui a l’avantage de ne pas nécessiter l’ajout de composants extérieurs pour son fonctionnement. Il est possible de faire nativement du routing, de l’AJAX ou encore du stockage en local contrairement à vue.js ou encore React qui reste au final une librairie destinée à développer des composants.

Aussi, le framework s’appuie sur Typescript, une surcouche au JavaScript développé par Microsoft, qui est un langage typé qui permet de créer des classes, des variables et des signatures de fonction. Et s’il est parfaitement possible d’utiliser du JavaScript natif avec Angular, l’utilisation de Typescript permet de mieux gérer les erreurs, d’avoir un code plus clair et aussi d’assurer une transition plus simple pour les développeurs PHP, Java ou encore C#.

Pour faire bref, le TypeScript est un sur-ensemble (un “superset”) de JavaScript qui est justement transcompilé (transcompilation : “traduction” d’un langage de programmation vers un autre – différent de la compilation, qui transforme généralement le code vers un format exécutable) en JavaScript pour être compréhensible par les navigateurs. Il ajoute des fonctionnalités extrêmement utiles, comme, entre autres :

Qu’est-ce que le CLI ?

Le CLI, ou “Command Line Interface” (un outil permettant d’exécuter des commandes depuis la console), d’Angular est l’outil qui vous permet d’exécuter des scripts pour la création, la structuration et la production d’une application Angular.

Installez les outils

Vous devez installer les outils suivants si vous ne les avez pas déjà sur votre machine :

NODE.JS
Téléchargez et installez la dernière version LTS de Node.js ici :

https://nodejs.org/en/download/

NPM
NPM est un package manager qui permet l’installation d’énormément d’outils et de libraries dont vous aurez besoin pour tout type de développement.  Pour l’installer, ouvrez une ligne de commande et tapez la commande suivante :

npm install -g npm@latest

ANGULAR/CLI
Vous allez maintenant installer le CLI d’Angular de manière globale sur votre machine avec la commande suivante (avec sudo si besoin) :

npm install -g @angular/cli

À partir de là, la commande  ng  est disponible depuis la ligne de commandes depuis n’importe quel dossier de l’ordinateur.

Pour créer un nouveau projet Angular, naviguez vers le dossier souhaité depuis une ligne de commande et saisissez la commande suivante :

ng new mon-premier-projet

cd mon-premier-projet
ng serve --open

Préparez le projet

npm install bootstrap@3.3.7 --save.

Les components sont les composantes de base d’une application Angular : une application est une arborescence de plusieurs components.

Imaginez la page web suivante :

Tout d’abord, notre  AppComponent  est notre component principal : tous les autres components de notre application seront emboîtés ou “nested” dans celui-ci.

Pour cette structure, on peut imaginer un component pour la barre de menu, un autre pour la partie contenu et un dernier pour le menu à droite.  Il n’y a pas de règle d’or : je vous montrerai au cours des chapitres suivants comment réfléchir à votre structure afin de trouver la séparation des components la plus pertinente.

Vous allez maintenant créer un nouveau component à l’aide du CLI d’Angular.  Depuis le dossier principal de votre projet, tapez la commande suivante :

ng generate component mon-premier 

Le databinding, c’est la communication entre votre code TypeScript et le template HTML qui est montré à l’utilisateur.  Cette communication est divisée en deux directions :

• les informations venant de votre code qui doivent être affichées dans le navigateur, comme par exemple des informations que votre code a calculé ou récupéré sur un serveur.  Les deux principales méthodes pour cela sont le “string interpolation” et le “property binding” ;

• les informations venant du template qui doivent être gérées par le code : l’utilisateur a rempli un formulaire ou cliqué sur un bouton, et il faut réagir et gérer ces événements.  On parlera de “event binding” pour cela.

Il existe également des situations comme les formulaires, par exemple, où l’on voudra une communication à double sens : on parle donc de “two-way binding”.

Pour votre application des appareils électriques, imaginez que si l’utilisateur est authentifié, on lui laisse la possibilité d’allumer tous les appareils de la maison.  Puisque l’authentification est une valeur globale, ajoutez une variable boolean dans  AppComponent , votre component de base (vous pouvez supprimer la variable  title  puisque vous ne l’utilisez plus) :import { Component } from ‘@angular/core’;

@Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss']
    })
  export class AppComponent {
 isAuth = false;
}

Dans AngularJS, un service est une fonction, ou un objet, disponible et limité à votre application AngularJS.

AngularJS a environ 30 services intégrés. L’un d’eux est le $location service.

Le $locationservice dispose de méthodes qui renvoient des informations sur l’emplacement de la page Web actuelle:

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

Pour de nombreux services, comme le $locationservice, il semble que vous puissiez utiliser des objets qui sont déjà dans le DOM, comme l’ window.location objet, et vous le pouvez, mais cela aurait certaines limitations, au moins pour votre application AngularJS.

AngularJS supervise constamment votre application, et pour qu’elle gère correctement les changements et les événements, AngularJS préfère que vous utilisiez le $location service au lieu de l’ window.locationobjet.

Pour créer votre propre service, connectez votre service au module:

app.service('hexafy', function() {
  this.myFunc = function (x) {
    return x.toString(16);
  }
});

Pour utiliser votre service personnalisé, ajoutez-le en tant que dépendance lors de la définition du contrôleur:

app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});

Les formulaires dans AngularJS fournissent la liaison de données et la validation des contrôles d’entrée.

Contrôles d’entrée

Les contrôles d’entrée sont les éléments d’entrée HTML:

• éléments d’entrée
• sélectionner des éléments
• éléments de bouton
• éléments textarea

Liaison de données

Les contrôles d’entrée fournissent une liaison de données à l’aide de la ng-modeldirective.

L’application a maintenant une propriété nommée firstname.

La ng-modeldirective lie le contrôleur d’entrée au reste de votre application.

La propriété firstname, peut être référencée dans un contrôleur:

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.firstname = "John";
});
</script>

Le ngRoutemodule aide votre application à devenir une application à page unique.

Qu’est-ce que le routage dans AngularJS?

Si vous souhaitez naviguer vers différentes pages de votre application, mais que vous souhaitez également que l’application soit une SPA (application à page unique), sans rechargement de page, vous pouvez utiliser le ngRoutemodule.

Le ngRoutemodule achemine votre application vers différentes pages sans recharger l’ensemble de l’application.

<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/red", {
    templateUrl : "red.htm"
  })
  .when("/green", {
    templateUrl : "green.htm"
  })
  .when("/blue", {
    templateUrl : "blue.htm"
  });
});
</script>
</body>