Angular js Flashcards

1
Q

Est-ce qu’il est possible d’avoir plusieurs ng-app sur une page HTML utilisant Angular JS?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

A quoi sert la méthode $watch

A

$watch permet de déclencher l’appel à une fonction suite à une modification du contenu d’une variable du scope.

$scope.$watch(watchFn, watchAction, deepWatch)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

A quoi sert le service $sanitize

A

Nettoie le contenu d’un HTML en le nettoyant des contenus malveillant.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

$anchorScroll

A

Scrolle le navigateur jusqu’à l’ancre spécifié

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

$document

A

Retourne un objet JQlite qui contient l’objet DOM window.document

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

$interval

A

Retourne un wrapper amélioré de la fonction window.setInterval(function, time).

window.setInterval : exécute une fonction tous les time secondes.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

$location

A

Fournit un accès à l’objet URL

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

$log

A

Fournit un accès à l’objet console

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

$timeout

A

Fournit un accès à window.setTimeout.

Exécute une action au bout de time une fois seulement.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

$window

A

Fourni un accès à l’objet window.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

$interval

A

Retourne un wrapper amélioré de la fonction window.setInterval(function, time).

window.setInterval : exécute une fonction tous les time millisecondes.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

$location

A

Fournit un accès à l’objet URL.

$location.absUrl() : l'URL complet
$location.hash() : hash de l'URL
$location.host()
$location.port()
$location.protocole()
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

$window

A

Fourni un accès à l’objet window.

Exemple : $window.alert(“Mon message”);

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Comment lance-t-on un test unitaire jasmine avec karma?

A

karma start (Définit les fichiers de dépendances, le navigateur à utiliser, le port d’exécution)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Comment lance-t-on un test unitaire jasmine avec karma?

A

karma start

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Quelle module est utile pour faire des Tus avec Angular?

A

ngMocks

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Quelles sont les instructions dans un test jasmine?

A
describe
beforeEach : arrange
it : act
expect : assert
toEquals/not.ToXXX
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

angular.mock

A

Utiliser pour créer des mocks et pour gérer les relations de dépendances.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

angular.mock.module(“nomDuModule”);

A

Charge le module nomDuModule pour les tests

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

angular.mock.inject(fn);

A

Résidu les dépendances et les injectent dans une fonction.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

$rootScope.new() dans un test unitaire

A

Créer un nouveau scope

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

$controller(name) dans un test unitaire

A

Créer une instance du controller name

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

$httpBackend

A

Service qui permet de mocker un service HTTP

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

Syntaxe du mock backend

A

backend.expect(“GET”,”URI”).respond(“json-data”);

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

$httpBackend.flush()

A

Retourne le résultat qui a été mocker par expect.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

$httpBackend.verifyNoOutstandingExpectation

A

Throw un exception si tout les données attendues n’ont pas été réceptionné.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

Syntaxe des tests avec jasmine

A

describe(“nomDuSuiteDeTest”, function(){//Ensemble de test}
beforeEach(“actionAFairePourPreparerLeTest”);
it(“noDuTest”,function(){//Test à faire et à vérifier avec expect()});

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

Quelle directive on utilise pour faire du 2-way binding?

A

ng-model

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

Quelle méthode permet de rajouter un élément dans un tableau en Javascript?

A

.push()

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

Quelle directive on utilise pour faire du 2-way binding?

A

ng-model qui est rajouté au niveau des éléments d’un formulaire HTML?

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

A quoi sert la méthode angular.isDefined

A

A valider qu’un objet existe vraiment

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

Lors de la validation d’un formulaire par Angular JS, que retourne la variable $pristine ({{monFormulaire.$pristine}})?

A

Retourne true si l’utilisateur n’a pas encore interagit avec l’élément du formulaire.

Style CSS : ng-pristine

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

Lors de la validation d’un formulaire par Angular JS, que retourne la variable $dirty ({{monFormulaire.$dirty}})?

A

Retourne true si l’utilisateur a commencé à interagir avec l’élément du formulaire

Style CSS : ng-dirty

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

Lors de la validation d’un formulaire par Angular JS, que retourne la variable $valid ({{monFormulaire.$valid}})?

A

Retourne true si le formulaire est valide

Style CSS : ng-valid

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

Lors de la validation d’un formulaire par Angular JS, que retourne la variable $invalid ({{monFormulaire.$invalid}})?

A

Retourne true si le formulaire est invalide

Style CSS : ng-invalid

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

ng-change

A

Element qui sera évalué lors du changement de valeur

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

ng-minlength (INPUT)

A

Nombre minimum de caractère pour que le champ soit valide

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

ng-maxlength (INPUT)

A

Nombre maximum de caractère pour que le champ soit valide

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

ng-pattern (INPUT)

A

Définit une expression régulière dans le scope pour valider la saisie de l’utilisateur

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

ng-required (INPUT)

A

Définit la valeur booléen dans le scope qui permet de valider la saisie de l’utilisateur

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

ng-true-value (CHECKBOX)

A

Spécifie la valeur qui sera utilisée si le checkbox est cochée

42
Q

Quelle directive on utilise pour faire du 2-way binding?

A

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.

43
Q

ng-false-value (CHECKBOX)

A

Spécifie la valeur qui sera utilisée si le checkbox est décochée

44
Q

Quelle directive on utilise pour faire du 2-way binding?

A

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.

45
Q

ng-options (SELECT & OPTGROUP)

A

Permet de générer les options dans un select.

46
Q

A quoi sert les filtres dans angular JS?

A

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
47
Q

A quoi sert l’attribut novalidate dans un form HTML

A

novalidate indique au navigateur de ne pas utiliser le mécanisme de validation intégré dans le browser.

48
Q

Quelles sont les nouveaux types “input” qui ont été ajoutés dans HTML5?

A

email, url, number

49
Q

ng-disabled

A

Désactive un bouton tant si la valeur n’est pas vraie.

50
Q

ng-class

A

Permet de conditionner la classe à utiliser via angular.

51
Q

Syntaxe de $http

A

$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)
52
Q

Expliquez la notion de promesse dans Angular

A

Une promesse représente le résultat provenant d’un appel à un service en asynchrone

53
Q

Quelles sont les méthodes qui sont disponibles dans une promesse retournée par le service $http.

A

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

54
Q

Quels sont les avantages de l’utilisation de then par rapport à success et error dans le retour d’une promesse?

A

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
55
Q

Que peut-t-on réaliser dans le config d’un service $http?

A

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
56
Q

C’est quoi les attaques du type CSRF? Cross site request forgery

A

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.
57
Q

A quoi sert le service $httpProvider

A

Permet de définir les valeurs par défaut pour les requêtes AJAX :

  • defaults.headers.common
  • defaults.transformResponse
  • defaults.transformRequest
  • interceptors
  • withCredentials
58
Q

A quoi sert le tableau interceptors dans le service $httpProvider?

A

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.

59
Q

Qu’apporte $resource par rapport à $http?

A

$resource permet de masquer l’appel AJAX et permet de récupérer directement l’appel à un service REST.

60
Q

Quels sont les actions disponibles dans $resource?

A

$scope.productsResource = $resource(baseUrl + “:id”, { id: “@id” });

$scope.productsResource.query();
$scope.productsResource(product).save();

61
Q

A quoi sert $rootScope?

A

$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.

62
Q

Syntaxe de création d’une nouvelle directive?

A
Module.directive("NomDirective", function(){
     return function(scope, element, attrs){
            //scope correspond au scope
           //element correspond à l'élement
          //attr correspond au nom de l'attribut
     }
});
63
Q

Module.config

A
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ée
64
Q

Module.run

A
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ée
65
Q

Module.config

A
module.config(function(injectables){});
//Appelé  lorsque le module courant a fini d'être chargée
//Les injectables sont soit des providers soit des constantes
66
Q

Module.run

A
module.run(function(injectables){});
//Appelé lorsque tout les modules ont fini d'être chargée
//Les injectables sont soit des instances, soit des constantes
67
Q

Qu’est-ce qu’un service AngularJs?

A

C’est un objet javascript.

Les services sont des singletons qui sont chargées en mode lazy.

68
Q

Qu’est-ce qu’un service AngularJs?

A

C’est un objet javascript qui peut être de type primitif(nombre ou chaîne de caractère)

69
Q

Les différents services dans angular dans l’ordre de configurabilité?

A

provider, factory, service, constant, value

70
Q

Les différents services dans angular dans l’ordre de configurabilité?

A

provider, factory, service, value, constant

71
Q

Quelles sont les restrictions disponibles lors de la création d’une directive?

A
restrict dans l'objet :
E : élément
A : attribut
C : class
M : commentaire
72
Q

Quel est la valeur par défaut utilisé pour le restrict si non défini?

A

A : attribut

73
Q

Quels sont les deux possibilités de définir le contenu affiché par l’utilisation d’une directive?

A

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.

74
Q

Lors de la création d’une directive, quand est-ce qu’il faut utiliser un restrict “element”?

A

Quand on veut créer un composant qui manipule le contenu du template. Typiquement, les DSL liées à l’application.

75
Q

Lors de la création d’une directive, quand est-ce qu’il faut utiliser un restrict “attribute”?

A

Quand on veut tout simplement enrichir un élément existant avec une nouvelle fonctionnalité

76
Q

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?

A

Quand on veut réutiliser la directive à plusieurs endroits dans l’application.

77
Q

Lors de la création d’une directive, à quoi sert l’attribut transclude?

A

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.

78
Q

Quelles sont les phases d’initialisation d’une application angularJS?

A
  1. Chargement des scripts : recherche de tous les ng-app
  2. Phase de compilation : cette phase se charge de transformer tout les templates
  3. Phase de link : cette phase se charge d’ajouter des listeners sur les objets DOM ou le modèle.
79
Q

Lors de la création d’une directive, à quoi sert la fonction link?

A

A manipuler le DOM lors de la création de la directive.

80
Q

Lors de la création d’une directive, à quoi sert l’attribut link?

A

A manipuler le DOM lors de la création de la directive. Exemple : ajouter des évènements

81
Q

Lors de la création d’une directive, à quoi sert l’attribut controller?

A

A faire communiquer des directives entre elles. Les autres directives peuvent se référer à la directive via l’attribut require:’^nomDeLaDirective’

82
Q

Lors de la création d’une directive, à quoi sert l’attribut controller?

A

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.

83
Q

Lors de la création d’une directive, à quoi sert l’attribut controller?

A

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.

84
Q

Création d’une directive : stratégie de binding du scope

A

@ : 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

85
Q

Où est-ce que les filtres peuvent être utilisées?

A

Au niveau des templates, des contrôleurs, mais aussi dans les services.

86
Q

$filter

A

Permet d’accéder à une filtre dans un contrôleur

87
Q

Quelles sont les directives permettant de faire du data-binding dans angular?

A

ng-bind, ng-bind-html, ng-bind-template, ng-model, ng-non-bindable

88
Q

Quelles sont les directives templates dans angular?

A

ng-cloack, ng-include, ng-repeat, ng-repeat-start, ng-repeat-end, ng-switch

89
Q

Les variables accessibles dans ng-repeat?

A

$index : affiche la position de chaque élément du tableau

90
Q

Les variables accessibles dans ng-repeat?

A

$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

91
Q

ng-repeat-start et ng-repeat-end

A

Permet d’insérer des éléments intermédiaires, ce qui n’est pas possible avec un simple ng-repeat

92
Q

ng-include

A

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

93
Q

ng-include

A

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

94
Q

ng-include

A

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

95
Q

ng-switch

A

Permet de switcher sur une donnée pour afficher un contenu

96
Q

ng-switch-when

A

Affiche le contenu si la valeur est valide

97
Q

ng-switch-default

A

Valeur par défaut affiché si aucun des switch n’est validé

98
Q

Quels sont les directives disponibles au niveau des éléments?

A

ng-if, ng-class, ng-class-even, ng-class-odd, ng-hide, ng-show, ng-style

99
Q

Quels sont les directives qui permettent de gérer des évènements?

A

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

100
Q

Quels sont les directives qui permettent de gérer des attributs spéciaux?

A

ng-checked, ng-disabled, ng-open, ng-readonly, ng-selected

101
Q

Quelles sont les méthodes qui sont disponibles aux niveaux des scopes et à quoi servent-elles?

A

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