Web

AngularJS

Sources :


Qu’est ce que AngularJS?

  • Framework JS
  • Application SPA = Appli sur une seule page (exemple :  youtube line back)

On partitionne les fichiers JS  avec les fonctions afin de s’y retrouver (controller d’un côté, services de l’autre).


Bases

Librairie à ajouter dans la liste des scripts

https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js

afficher le ng (echo en php)

{{ }}

Fonction foreach

angular.forEach(obj, iterator, [context]);


Les directives

En savoir plus : https://docs.angularjs.org/guide/directive

Ordre des ng

Capture d'écran de 2017-03-07 17-03-47.png

On appelle angularJS dans la balise html (rf : bootstrap le container)

ng-app

dans les balises inputs, textarea et select

ng-model=”yourName”

Remplacer du contenu

ng-bind=”name”

Définit la valeur initiale des données + nom de la variable

ng-init=” ”

foreach (va chercher toutes les var d’un tableau)

ng-repeat

Insère un MVC et crée une boite (rf : bootstrap le row)

ng-controller

Récupère les infos des routes

ng-view

Récupère les infos d’un formulaire

ng-submit


Créer une directive

En savoir plus :

Limiter les directives

restrict :

  • E = Element name
  • A = Attribute
  • C = Class
  • M = Comment

On crée la directive

NomModule.directive(‘ng-name’, fonction(){

return{

    template: ‘ ‘ ;  // Change le contenu du ng-name

    templateUrl: ‘ ‘ ;   // Charge le contenu à partir d’un autre fichier

    restrict: ‘ ‘ ;   // met une restriction

}

})

Isolation = scope propre à notre directive & aux variables

scope: { Object };


Propriété injectant l’attribut

=

Propriété chaîne de caractère sera utilisé

@

Propriété fonction placée en référence

&

Directive affichant l’heure

MonModule.directive(‘time’, function(dateFilter, $interval){

return{

restrict: ‘E’,   // On utilise un élément

template : ‘{{time}}’,     // template de date au niveau du scope parent

        scope {},   // On recherche dans notre scope

// fonction 3 paramètres :  scope, éléments et attributs

    link: function(scope, element, attrs){

        scope.time = dateFilter(new Date(), ‘hh:mm:ss’); // On utilise le filtre date

// Si on change de page, on arrête la mise à jour de l’heure

        element.on(‘$destroy’, function(){

            $interval.cancel(interval);

        }

// On met un timer pour mettre à jour la date

        interval = $interval(function(){

            scope.time = dateFilter(new Date(), ‘hh:mm:ss’);

            console.log(time changed’);

        }, 1000)

    }

})


Les filtres

En savoir plus : https://docs.angularjs.org/guide/filter

=> Modifier les variables, filtrer et ordonner

Ajouter $filter

Déclaration

{{ expression | filtre }}

On peut mettre plusieurs filtres : { expression | filter1 | filter2 | … }}

Un filtre peut avoir plusieurs valeurs : {{ expression | filter:argument1:argument2:… }}

Dans le JavaScript

$filter(‘filter’)(array, expression, comparator, anyPropertyKey)

Dans le HTML

{{ filter_expression | filter : expression : comparator : anyPropertyKey}}

Créer un filtre

NomModule.filter(‘nomFiltre’ function(){

return …

})

Prendre un item pour filtrer les infos

| filter : valeur

Mettre le texte à l’envers

| reverse

Mettre des étoiles autour du texte

| decorate


Pour trier

| orderby

Met en majuscule

| uppercase

Met en minuscule

| lowercase

Met en format date

| date


Controller & Scope

En savoir plus :

=> rf MVC (model View Controller)

=> Scope = liaison entre controller & vue

Vous pouvez télécharger un outil  AngularJS Scope dans les extensions de votre navigateur afin d’explorer les scopes

On le déclare ainsi le controller

fonction nomController($scope){

}

On remet dans la div le ng-controller + le nom de la fonction

ng-controller=”nomController”

On peut accéder aux données de root du $scope

$rootScope


Les modules

En savoir plus : https://docs.angularjs.org/guide/module

Indiquer que l’on utilise un module

ng-app=”NomModule”

On le stock dans une variable:

var NomModule = angular.module(‘NomModule’, [ ] );

Dans le tableau, on fera des injections de modules avec https://github.com/angular-ui/ui-select

Créer un controller dans le module

app.controller(‘NomController’, function ($scope){

} );

Avec la minification :

app.controller(‘NomController’, [‘$scope, function ($scope){

} ] );


Les routes

En savoir plus :

=> Permet de définir une redirection

On importe le module

var NomModule = angular.module(‘app’, [‘ngRoute’]);

Injection des indépendances

NomModule.config(function($routeprovider){

});

On défini les redirections

$routeprovider

// Quand tu atteind la page accueil tu affiches + spécifier le controller à utiliser si nécessaire

.when( ‘/’, {templateUrl: ‘partials/home.html})

.when( ‘/comments’, { templateUrl: ‘partials/comments.html’,

controller: ‘NomController’})

// Si url inconnu tu reviens vers l’url racine

.overwise({redirectTo : ‘/’});

On récupère un paramètre dans l’adresse pour la réutiliser

$routeparams


Les services

En savoir plus :

=> = model

=> récupère les infos des différentes sources et les envoie dans le controller

FACTORY = renvoyer ce que return de  la fonction (Quasi pas utilisé)

Créer un service

NomModule.factory(‘NomFactory’, function() {

var factory = {Objet};

return factory;

});

Injecter la factory

NomModule.controller(‘NomController’, function ($scope NomFactory){

} );

SERVICES = renvoie la fonction actuelle (retourne la fonction et ne fait rien d’autre)

this.NomTableau = [];

NomModule.service(‘NomFactory’, function() {

this. NomFonction = function(){

return this.NomTableau;

};

});

PROVIDER =  renvoie le résultat de la fonction $get (fourni un construction avant de charger)

Met un délais d’attente

$timeout


Les promesses

En savoir plus :

Récupérer l’adresse http

$http({

method: ‘GET’,
url: ‘/someUrl’

}).then(function successCallback(response) {

// Ce callback sera appelé lorsque la réponse est positive

}, function errorCallback(response) {

// Appelé si il y a une erreur ou retourne une erreur de serveur avec une erreur de statuts

});

L’objet réponse possède les propriétés suivantes:

  • data – {string | Object} – Le corps de réponse est transformé avec les fonctions de transformation.
  • status – {number} – Code d’état HTTP de la réponse.
  • headers – {function([headerName])} – Fonction getter d’en-tête.
  • config – {Object} – Objet de configuration utilisé pour générer la requête.
  • statusText – {string} – Texte d’état HTTP de la réponse.

Les méthodes courtes :

$http.get(‘/someUrl’, config).then(successCallback, errorCallback);
$http.post(‘/someUrl’, data, config).then(successCallback, errorCallback);

Liste complète des méthodes de raccourcis:

Gérer le délai des promesses = exécuter une fonction dans le futur

    // initiation

  1. var deferred = $q.defer();

    // Résoudre avec le paramètre

  1. deferred.resolve(paramètre);

// erreur

  1. deferred.reject(‘pourquoi ça n’a pas marché’);

// On retourne le résultat

  1. return deferred.promise;

Renvoie une nouvelle promesse qui est résolue ou rejetée via la valeur de retour de la successCallback, errorCallback (sauf si cette valeur est une promesse, auquel cas elle est résolue avec la valeur qui est résolue dans cette promesse en utilisant le chaînage prometteur). Il notifie également via la valeur de retour de la méthode notifyCallback. La promesse ne peut pas être résolue ou rejetée par la méthode notifyCallback. Les arguments errorCallback et notifyCallback sont facultatifs.

then(successCallback, [errorCallback], [notifyCallback])


Les ressources

En savoir plus :

Rf : API REST / Ruby-on-rails

=> Interface simplifié pour travailler avec une API REST

Inclure ngResource

var MonModule = angular.module(‘MonModule’, [‘ngResource’]);

Créer controller

MonModule.controller(‘NomController’, function($scope, $resource){

var Resource = $resource(‘/post/:id.json’);  // Nouvelle ressource

});

$resource utilisation

app.config([‘$resourceProvider’, function($resourceProvider) {

// Don’t strip trailing slashes from calculated URLs

$resourceProvider.defaults.stripTrailingSlashes = false;

}]);

HTTP GET “class” actions: Resource.action([parameters], [success], [error])

non-GET “class” actions: Resource.action([parameters], postData, [success], [error])

non-GET instance actions: instance.$action([parameters], [success], [error])

$resourceProvider

angular.module(‘myApp’).config([‘$resourceProvider’, function ($resourceProvider) {

Action

$resourceProvider.defaults.actions.update = {

get: {method: ‘GET’},

save: {method: ‘POST’},

query: {method: ‘GET’, isArray: true},

remove: {method: ‘DELETE’},

delete: {method: ‘DELETE’}

}

});

 

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.