Angular est un framework MVC côté client, développé en JavaScript par Google, c'est un framework Open Source qui gagne rapidement en popularité. Il a pour but de simplifier la syntaxe javascript, en lui ajoutant de nouvelles fonctionnalités et ainsi faciliter la réalisation d'applications web.
MVC
AngularJS s’appuie notamment sur une infrastructure MVC signifie Modèle-Vue-Contrôleur utilisée dans de nombreux langages de programmation pour apporter une architecture à une application web. Cette infrastructure MVC est extrêmement productive et performante et s'impose comme la référence des nouveaux frameworks Javascript.
Apprendre AngularJS permet non seulement une productivité accrue, mais aussi un code plus simple à écrire, plus expressif et moins de difficultés à tester et déboguer votre application.
Modèle
Le modéle représente une entité de l'application: traitements des données, interactions avec la base de données. Il décrit les données manipulées par l'application, généralement transmise en JSON.
Vue
C'est avec quoi l'utilisateur interagit, cela a pour fonction de présenter les résultats renvoyés par le modèle et de recevoir toute action de l'utilisateur. Lorsque vous utilisez un framework MVC, vous utilisez les données issues du Modèle pour mettre votre Vue à jour et afficher les bonnes informations dans votre code HTML. Ces différents événements sont envoyés au contrôleur.
Contrôleur
Le contrôleur prend en charge la gestion des événements de synchronisation pour mettre à jour la vue ou le modèle et les synchroniser. Il reçoit tous les événements de la vue et enclenche les actions à effectuer.
Démarrez votre projet AngularJS
index.html
<!doctype html>
<html lang="fr" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Apprendre AngularJS</title>
</head>
<body>
<div ng-controller="MainCtrl">
<h1>{{title}}</h1>
<input type="text" ng-model="name" placeholder="Votre nom">
<p>Bienvenue {{name}}</p>
<ul>
<li ng-repeat="user in users">
{{user.name}} – {{user.city}}
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {
$scope.title = "Apprendre AngularJS"
$scope.name = "";
$scope.users = [{ name: 'Seifeddine Selmi', city: 'Montréal' }];
}]);
$scope
Le scope c’est un objet javascript qui fait le lien entre le contrôleur et la vue. Les propriétés qu’on lui ajoute (variables et fonctions) sont accessibles dans la vue, elles sont en quelque sorte publiques. Mais il est également possible de créer des variables et des fonctions privées (pas accessibles dans la vue).
ng-app
La directive ng-app permet de dire à AngularJs qu’il doit être actif sur cette section de la page. Dans notre cas, il s’agit de toute la page puisqu’elle est située sur la balise <html>, mais on pourrait très bien la mettre sur un <div> par exemple.
ng-controller
La directive ng-controller décrive un contrôleur pour parler à la vue. Cette section de la page est gérée par le contrôleur MainCtrl. Les variables et fonctions déclarées dans le scope de ce contrôleur sont accessibles juste dans cette zone du html.
{{}}
Tout ce qui est entre doubles accolades sera interprété. Les variables et les fonctions du contrôleur sont utilisables ici. Si les données changent dans le contrôleur, les changements seront envoyés sur la vue. C’est du one-way data binding. Dans l’exemple ci-dessus, {{title}} affiche simplement le contenu de $scope.title.
ng-model
C’est du two-way data binding. Si les données sont mises à jour dans le contrôleur, les changements seront envoyés dans la vue, et si les données sont mises à jour dans la vue, les changements seront envoyés dans le contrôleur. Dans l’exemple ci-dessus, l’utilisateur tape du texte dans l’input, ce qui met à jour la variable $scope.name du contrôleur, et le changement est instantanement renvoyé côté vue dans {{name}}.
Déclarations des fonctions et des variables dans le contrôleur:
//Public (accessible dans le contrôleur et dans la vue)
$scope.maVariable1 ="Ici ma variable est public!";
//Déclaration du'une fonction public
$scope.maFonction1 =function () {
return 1;
};
//Privé (accessible seulement dans le contrôleur)
var maVariable2 = "Ici ma variable est privé!";
//Une première manière de déclarer une fonction privée
var maFonction2 = function () {
return 2;
};
//Une deuxième manière de déclarer une fonction privée
function maFonction3() {
return 3;
}
Directives
Les directives sont utilisées lorsque l'on souhaite modifier ou transformer le DOM (Document Object Model).
Angular fournit un certain nombre de directives. Rappelons-en quelques-unes :
ngApp: permet tout simplement d'initialiser votre application.
ngController: directive permettant d'attacher un contrôleur à la vue.
ngModel: directive permettant de lier les input, textarea ou select à une propriété du contexte actuel.
ngInit: directive permettant d'initialiser une collection.
ngRepeat: directive permettant de répéter les éléments d'une collection plusieurs fois.
<html ng-app="myApp">
<div class="container" ng-init="names=['Selmi','Seifeddine','Nixa','Développement','Web','Montréal']">
<h3>Répéter avec la directive ng-repeat </h3>
<ul>
<li ng-repeat="name in names">{{ name }}</li>
</ul>
</div>
</html>
Il existe beaucoup de directives prédéfinies par AngularJS. Je vous invite à consulter la documentation officielle pour plus de détails Directives - AngularJS.
Il vous arrivera très fréquemment d'avoir besoin de créer vos propres directives.
Services
Ce sont des singletons, c'est-à-dire des instances uniques d'objets. Le rôle d'un service est de fournir un ensemble de tâches nécessaires au fonctionnement de votre application.
Comme pour les directives, Angular fournit déjà des services très utiles comme :
$location: interagir avec l'URL de votre navigateur.
$route: changer de vue en fonction de l'URL.
$http: communiquer avec les serveurs.
Créez vos propres services
Un service est considéré comme un simple module qui est chargé de retourner un objet. Cet objet possédera un ensemble de fonctions qui seront chargées d'exécuter un certain nombre de services.
Il suffit donc d'initialiser un nouveau module tout en spécifiant si ce module est de type factory, service ou provider.
Service
Lorsque vous utilisez le service, il s'agit d'une instance du service qui est passée au contrôleur. Vous n'avez donc pas la responsabilité de retourner une valeur dans votre service. Il vous suffit d'attacher vos fonctions et attributs à this.
app.service("serviceExample", function(){
this.service1 = function(){...};
this.service2 = function(){...};
});
app.controller("serviceCtrl", function($scope, serviceExample{
serviceExample.service1();
});
Factory
Lorsque vous créez une factory, vous avez la responsabilité de retourner un objet qui possède un certain nombre d'utilitaires qui assurent vos services.
app.factory("factoryExample", function(){
return{
service1: function(){...},
service2: function(){...},
}
});
app.controller("factoryCtrl", function($scope, factoryExample {
factoryExample.service1();
});
Filtres
Les filtres sont, au même titre que les directives et services, des modules Angular. Ils ont pour rôle de transformer la donnée afin de l'afficher de manière plus élégante.
Ce sont donc des éléments qui vont enrichir votre template et dont la syntaxe reste assez simple :
{{expression | filtre : paramètre 1 : paramètre 2 : ...}}
Angular fournit, comme pour les directives et les services, des filtres prédéfinis. En voici quelques exemples :
date : ce filtre est très utile puisqu'il vous permet de formater une date au bon format (anglais, français, avec le nom des mois, des jours...). Ainsi, voici un exemple de template :
<html ng-app="myApp">
<div ng-controller="MainCtrl">
<!-- Celui-ci produira le résultat suivant : 29 Juin 2015 -->
<span>{{'2015-06-29' | date: 'dd mm yyyy'}}</span>
<ul>
<!-- Ordonner les users par nom et afficher les noms en majuscule -->
<li ng-repeat="user in users | orderBy:'name'">
{{ user.name | uppercase }}
</li>
</ul>
<input type="text" ng-model="nameText" placeholder="Votre nom">
<!-- Ordonner les users par nom et les filtrer par valeur saisi -->
<ul>
<li ng-repeat="user in users| filter:nameText |orderBy:'name'">
{{user.name}} – {{user.city}}
</li>
</ul>
</div>
</html>
Routes
Création d'un modèle de mise en page, lorsqu'on a une application qui a des multiples vues, on utilisie un module angular appelé 'ngRoute'
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/',{
controller: 'Mainctrl',
templateUrl:'View1.html'
})
.when('/view2', {
controller: 'Mainctrl',
templateUrl:'View2.html'
})
.otherwise({ redirectTo:'/' });
});
ngView: Vue chargée dynamiquement dans une page :
ngView est une directive qui complète le service $route en incluant le modèle rendu de la route actuelle dans le fichier mise en page principale (index.html). Nécessite le module ngRoute.
On rajoute <div ng-view></div> ou <ng-view></ng-view> dans index.html
Nixa peut vous aider dans le développement de vos applications en AngularJS.
À Montréal, Nixa est la boîte de développement web de choix pour vos projets en Angular, Backbone ou Ember.