Angular js Flashcards
Est-ce qu’il est possible d’avoir plusieurs ng-app sur une page HTML utilisant Angular JS?
Oui, c’est possible mais par défaut ng-app est apposé au niveau de la balise body ou de la balise html.
Pour cela la fonction angular.bootstrap est utilisée.
A quoi sert la méthode $watch
$watch permet de déclencher l’appel à une fonction suite à une modification du contenu d’une variable du scope.
$scope.$watch(watchFn, watchAction, deepWatch)
A quoi sert le service $sanitize
Nettoie le contenu d’un HTML en le nettoyant des contenus malveillant.
$anchorScroll
Scrolle le navigateur jusqu’à l’ancre spécifié
$document
Retourne un objet JQlite qui contient l’objet DOM window.document
$interval
Retourne un wrapper amélioré de la fonction window.setInterval(function, time).
window.setInterval : exécute une fonction tous les time secondes.
$location
Fournit un accès à l’objet URL
$log
Fournit un accès à l’objet console
$timeout
Fournit un accès à window.setTimeout.
Exécute une action au bout de time une fois seulement.
$window
Fourni un accès à l’objet window.
$interval
Retourne un wrapper amélioré de la fonction window.setInterval(function, time).
window.setInterval : exécute une fonction tous les time millisecondes.
$location
Fournit un accès à l’objet URL.
$location.absUrl() : l'URL complet $location.hash() : hash de l'URL $location.host() $location.port() $location.protocole()
$window
Fourni un accès à l’objet window.
Exemple : $window.alert(“Mon message”);
Comment lance-t-on un test unitaire jasmine avec karma?
karma start (Définit les fichiers de dépendances, le navigateur à utiliser, le port d’exécution)
Comment lance-t-on un test unitaire jasmine avec karma?
karma start
Quelle module est utile pour faire des Tus avec Angular?
ngMocks
Quelles sont les instructions dans un test jasmine?
describe beforeEach : arrange it : act expect : assert toEquals/not.ToXXX
angular.mock
Utiliser pour créer des mocks et pour gérer les relations de dépendances.
angular.mock.module(“nomDuModule”);
Charge le module nomDuModule pour les tests
angular.mock.inject(fn);
Résidu les dépendances et les injectent dans une fonction.
$rootScope.new() dans un test unitaire
Créer un nouveau scope
$controller(name) dans un test unitaire
Créer une instance du controller name
$httpBackend
Service qui permet de mocker un service HTTP
Syntaxe du mock backend
backend.expect(“GET”,”URI”).respond(“json-data”);
$httpBackend.flush()
Retourne le résultat qui a été mocker par expect.
$httpBackend.verifyNoOutstandingExpectation
Throw un exception si tout les données attendues n’ont pas été réceptionné.
Syntaxe des tests avec jasmine
describe(“nomDuSuiteDeTest”, function(){//Ensemble de test}
beforeEach(“actionAFairePourPreparerLeTest”);
it(“noDuTest”,function(){//Test à faire et à vérifier avec expect()});
Quelle directive on utilise pour faire du 2-way binding?
ng-model
Quelle méthode permet de rajouter un élément dans un tableau en Javascript?
.push()
Quelle directive on utilise pour faire du 2-way binding?
ng-model qui est rajouté au niveau des éléments d’un formulaire HTML?
A quoi sert la méthode angular.isDefined
A valider qu’un objet existe vraiment
Lors de la validation d’un formulaire par Angular JS, que retourne la variable $pristine ({{monFormulaire.$pristine}})?
Retourne true si l’utilisateur n’a pas encore interagit avec l’élément du formulaire.
Style CSS : ng-pristine
Lors de la validation d’un formulaire par Angular JS, que retourne la variable $dirty ({{monFormulaire.$dirty}})?
Retourne true si l’utilisateur a commencé à interagir avec l’élément du formulaire
Style CSS : ng-dirty
Lors de la validation d’un formulaire par Angular JS, que retourne la variable $valid ({{monFormulaire.$valid}})?
Retourne true si le formulaire est valide
Style CSS : ng-valid
Lors de la validation d’un formulaire par Angular JS, que retourne la variable $invalid ({{monFormulaire.$invalid}})?
Retourne true si le formulaire est invalide
Style CSS : ng-invalid
ng-change
Element qui sera évalué lors du changement de valeur
ng-minlength (INPUT)
Nombre minimum de caractère pour que le champ soit valide
ng-maxlength (INPUT)
Nombre maximum de caractère pour que le champ soit valide
ng-pattern (INPUT)
Définit une expression régulière dans le scope pour valider la saisie de l’utilisateur
ng-required (INPUT)
Définit la valeur booléen dans le scope qui permet de valider la saisie de l’utilisateur
ng-true-value (CHECKBOX)
Spécifie la valeur qui sera utilisée si le checkbox est cochée
Quelle directive on utilise pour faire du 2-way binding?
ng-model qui est rajouté au niveau des éléments d’un formulaire HTML :
La valeur qui est bindée peut être utilisée dans la page HTML avec une expression {{mavaleur}} ou dans le contrôleur.
ng-false-value (CHECKBOX)
Spécifie la valeur qui sera utilisée si le checkbox est décochée
Quelle directive on utilise pour faire du 2-way binding?
ng-model qui est rajouté au niveau des éléments d’un formulaire HTML :
La valeur qui est bindée peut être utilisée dans la page HTML avec une expression {{mavaleur}} ou dans le contrôleur.
ng-options (SELECT & OPTGROUP)
Permet de générer les options dans un select.
A quoi sert les filtres dans angular JS?
A formatter les données : par exemple date, monnaie, casse, représentation de donnée JSON.
Tableau :
- Limiter les objets
- Trier les objets dans un tableau
A quoi sert l’attribut novalidate dans un form HTML
novalidate indique au navigateur de ne pas utiliser le mécanisme de validation intégré dans le browser.
Quelles sont les nouveaux types “input” qui ont été ajoutés dans HTML5?
email, url, number
ng-disabled
Désactive un bouton tant si la valeur n’est pas vraie.
ng-class
Permet de conditionner la classe à utiliser via angular.
Syntaxe de $http
$http permet d’appeler un service.
$http.get(“data”).success(function(data){
$scope.values = data
});
$http.get(url, config) $http.post(url, data, config) $http.delete(url, config) $http.put(url, data, config) $http.head(url, config) $http.jsonp(url, config)
Expliquez la notion de promesse dans Angular
Une promesse représente le résultat provenant d’un appel à un service en asynchrone
Quelles sont les méthodes qui sont disponibles dans une promesse retournée par le service $http.
success(fn) : appel la fonction si la requête a été executé avec succès
error(fn) : appel la fonction si la requête a été en erreur
then(fn, fn) : enregistre une fonction succès et une fonction erreur
Quels sont les avantages de l’utilisation de then par rapport à success et error dans le retour d’une promesse?
then permet d’accéder à plus d’information.
.then(response)
Dans l’objet response :
- status : le code HTTP du retour
- headers : le header du résultat
Que peut-t-on réaliser dans le config d’un service $http?
On peut réaliser des transformations du retour du service ou de préparer la requête.
Config offre les méthodes :
- headers
- method
- params
- timeout
- transformRequest
- transformResponse
- url
- withCredentials
C’est quoi les attaques du type CSRF? Cross site request forgery
Implique un site qui repose sur l’authentification globale d’un utilisateur ;
- Exploite cette confiance dans l’authentification pour autoriser des actions implicitement ;
- Envoie des requêtes HTTP à l’insu de l’utilisateur qui est dupé pour déclencher ces actions.
A quoi sert le service $httpProvider
Permet de définir les valeurs par défaut pour les requêtes AJAX :
- defaults.headers.common
- defaults.transformResponse
- defaults.transformRequest
- interceptors
- withCredentials
A quoi sert le tableau interceptors dans le service $httpProvider?
Permet de définir des fonctions qui sont exécutés avant l’envoi de la requête et la réception de la réponse.
Qu’apporte $resource par rapport à $http?
$resource permet de masquer l’appel AJAX et permet de récupérer directement l’appel à un service REST.
Quels sont les actions disponibles dans $resource?
$scope.productsResource = $resource(baseUrl + “:id”, { id: “@id” });
$scope.productsResource.query();
$scope.productsResource(product).save();
A quoi sert $rootScope?
$rootScope est la racine de tout les scopes, les variables qui sont déclarées dans ce scope sont accessibles par tout les controleurs du module.
Syntaxe de création d’une nouvelle directive?
Module.directive("NomDirective", function(){
return function(scope, element, attrs){
//scope correspond au scope
//element correspond à l'élement
//attr correspond au nom de l'attribut
}
});Module.config
module.config(function(injectables){});
//Les injectables sont soit des providers soit des constantes
//La fonction est exécutée lorsque le module courant a fini d'être chargéeModule.run
module.run(function(injectables){});
//Les injectables sont soit des instances, soit des constantes
//La fonction est exécutée quand tout les modules ont fini d'être chargéeModule.config
module.config(function(injectables){});
//Appelé lorsque le module courant a fini d'être chargée
//Les injectables sont soit des providers soit des constantesModule.run
module.run(function(injectables){});
//Appelé lorsque tout les modules ont fini d'être chargée
//Les injectables sont soit des instances, soit des constantesQu’est-ce qu’un service AngularJs?
C’est un objet javascript.
Les services sont des singletons qui sont chargées en mode lazy.
Qu’est-ce qu’un service AngularJs?
C’est un objet javascript qui peut être de type primitif(nombre ou chaîne de caractère)
Les différents services dans angular dans l’ordre de configurabilité?
provider, factory, service, constant, value
Les différents services dans angular dans l’ordre de configurabilité?
provider, factory, service, value, constant
Quelles sont les restrictions disponibles lors de la création d’une directive?
restrict dans l'objet : E : élément A : attribut C : class M : commentaire
Quel est la valeur par défaut utilisé pour le restrict si non défini?
A : attribut
Quels sont les deux possibilités de définir le contenu affiché par l’utilisation d’une directive?
template et template-url
template définit le contenu
template url définit l’url contenant le template
Dans les templates, il est possible de se référer aux éléments du scope du controller qui utiliser la directive.
Lors de la création d’une directive, quand est-ce qu’il faut utiliser un restrict “element”?
Quand on veut créer un composant qui manipule le contenu du template. Typiquement, les DSL liées à l’application.
Lors de la création d’une directive, quand est-ce qu’il faut utiliser un restrict “attribute”?
Quand on veut tout simplement enrichir un élément existant avec une nouvelle fonctionnalité
Lors de la création d’une directive, quand est-ce qu’il faut renseigner dans l’objet définissant la directive la valeur du scope?
Quand on veut réutiliser la directive à plusieurs endroits dans l’application.
Lors de la création d’une directive, à quoi sert l’attribut transclude?
C’est une valeur booléenne qui permet d’indiquer à angular de supprimer les valeurs sur laquelle la directive est appliquée, mais aussi de pouvoir le réutiliser dans le template avec la directive ng-transclude.
Quelles sont les phases d’initialisation d’une application angularJS?
- Chargement des scripts : recherche de tous les ng-app
- Phase de compilation : cette phase se charge de transformer tout les templates
- Phase de link : cette phase se charge d’ajouter des listeners sur les objets DOM ou le modèle.
Lors de la création d’une directive, à quoi sert la fonction link?
A manipuler le DOM lors de la création de la directive.
Lors de la création d’une directive, à quoi sert l’attribut link?
A manipuler le DOM lors de la création de la directive. Exemple : ajouter des évènements
Lors de la création d’une directive, à quoi sert l’attribut controller?
A faire communiquer des directives entre elles. Les autres directives peuvent se référer à la directive via l’attribut require:’^nomDeLaDirective’
Lors de la création d’une directive, à quoi sert l’attribut controller?
A faire communiquer des directives entre elles. Les autres directives peuvent se référer à la directive via l’attribut require:’^nomDeLaDirective’ qui permet d’attacher le controleur à la directive.
L’avantage du contrôleur par rapport au link est que celui-ci permet d’utiliser des Apis.
Lors de la création d’une directive, à quoi sert l’attribut controller?
A faire communiquer des directives entre elles. Les autres directives peuvent se référer à la directive via l’attribut require:’^nomDeLaDirective’ qui permet d’attacher le controleur à la directive.
L’avantage du contrôleur par rapport au link est que celui-ci permet d’exposer un api aux autres directives.
Création d’une directive : stratégie de binding du scope
@ : passe l’attribut en tant que String
= : bind la propriété avec la propriété avec celle du scope parent de la directive
& : passe une fonction du scope parent pour être appelé plus tard
Où est-ce que les filtres peuvent être utilisées?
Au niveau des templates, des contrôleurs, mais aussi dans les services.
$filter
Permet d’accéder à une filtre dans un contrôleur
Quelles sont les directives permettant de faire du data-binding dans angular?
ng-bind, ng-bind-html, ng-bind-template, ng-model, ng-non-bindable
Quelles sont les directives templates dans angular?
ng-cloack, ng-include, ng-repeat, ng-repeat-start, ng-repeat-end, ng-switch
Les variables accessibles dans ng-repeat?
$index : affiche la position de chaque élément du tableau
Les variables accessibles dans ng-repeat?
$index : affiche la position de chaque élément du tableau
$first : retourne true si l’élément courant est le premier élément
$middle : retourne true si l’élément courant n’est ni le premier, ni le dernier
$last : retourne true si l’élément courant est le dernier élément
$even : retourne true si l’élément courant a un numéro pair
$odd : retourne true si l’élément courant a un numéro impair
ng-repeat-start et ng-repeat-end
Permet d’insérer des éléments intermédiaires, ce qui n’est pas possible avec un simple ng-repeat
ng-include
Permet de charger le contenu d’une autre page HTML.
src : URL de la page à afficher
onload : expression à évaluer au chargement de la page
autoscroll : spécifie si angular doit scroller au niveau de la vue au chargement de celui-ci
ng-include
Permet de charger le contenu d’une autre page HTML.
src : URL de la page à afficher (Utiliser “ ‘’ “)
onload : expression à évaluer au chargement de la page
autoscroll : spécifie si angular doit scroller au niveau de la vue au chargement de celui-ci
ng-include
Permet de charger le contenu d’une autre page HTML.
src : URL de la page à afficher (Utiliser “ ‘’ “)
onload : fonction à évaluer au chargement de la page
autoscroll : spécifie si angular doit scroller au niveau de la vue au chargement de celui-ci
ng-switch
Permet de switcher sur une donnée pour afficher un contenu
ng-switch-when
Affiche le contenu si la valeur est valide
ng-switch-default
Valeur par défaut affiché si aucun des switch n’est validé
Quels sont les directives disponibles au niveau des éléments?
ng-if, ng-class, ng-class-even, ng-class-odd, ng-hide, ng-show, ng-style
Quels sont les directives qui permettent de gérer des évènements?
ng-blur, ng-change, ng-click, ng-copy, ng-cut, ng-paste, ng-dblclick, ng-focus, ng-keydown, ng-keypress, ng-keyup, ng-mousedown, ng-mousenter, ng-mouseleave, ng-mousemove, ng-mouseover, ng-mouseup, ng-submit
Quels sont les directives qui permettent de gérer des attributs spéciaux?
ng-checked, ng-disabled, ng-open, ng-readonly, ng-selected
Quelles sont les méthodes qui sont disponibles aux niveaux des scopes et à quoi servent-elles?
Les méthodes servent à recevoir et à envoyer des messages.
- $broadcast(name, args) : envoie un évènement du scope root vers tout les scope fils. name : nom de l’évènement, args : objets supplémentaires pour l’évènement
- $emit(name, args) : envoie un évènement du scope courant vers le scope root
- $on(name, handler) : enregistre un handler qui est indiqué quand l’évènement est reçu par le scope
