Angularjs
Debutant
Quiz-Angularjs-Debutant
Ng-Model
Ng-Repeat
Scope
Angularjs-Directives
Angularjs-Filtres
Two-Way-Binding
Apprendre-Angularjs
Questions-Entretien-Angularjs
Qcm-Angularjs
Javascript
Legacy-Frontend
📝
AngularJS — Entretien Débutant
20 questions sur les bases d'AngularJS 1.x : ng-app, ng-controller, ng-model, ng-repeat, $scope, filtres, directives essentielles et data binding. Idéal avant un premier entretien.
Banque de révision : les 60 questions corrigées
Voici l'intégralité des 60 questions de « AngularJS — Entretien Débutant », chacune avec sa bonne réponse et son explication. Le quiz interactif ci-dessus en tire une sélection aléatoire à chaque tentative — utilisez cette liste complète pour réviser.
Explication :
AngularJS (version 1.x) est un framework JavaScript MVC (Model-View-Controller) développé par Google. Il est distinct d'Angular 2+ qui est une réécriture complète. AngularJS étend le HTML avec des directives personnalisées et lie les données au DOM via le data binding bidirectionnel.
Précisez toujours la distinction entre AngularJS (1.x) et Angular (2+) en entretien — c'est une question fréquente pour vérifier votre précision technique.
Explication :
La directive
ng-app désigne l'élément racine de l'application AngularJS. Elle est généralement placée sur la balise <html> ou <body> et déclenche le processus de bootstrap d'Angular.
Explication :
ng-model établit une liaison bidirectionnelle (two-way binding) entre un élément de formulaire (input, select, textarea) et une propriété du $scope. Toute modification dans le champ met à jour la variable, et vice versa.
Explication :
Les deux affichent une valeur du scope, mais
ng-bind évite le flash de contenu non rendu (FOUC — Flash Of Uncompiled Content) visible en cas de chargement lent. Avec {{ expression }}, le navigateur affiche brièvement le texte brut avant qu'Angular le compile. ng-bind masque l'élément jusqu'à la compilation.
Utilisez ng-bind sur les éléments visibles au-dessus de la ligne de flottaison pour éviter le FOUC. Mentionnez ce comportement en entretien pour démontrer votre maîtrise des performances.
Explication :
On crée un module avec
angular.module("nom", [dependencies]). Le deuxième argument est un tableau des modules dépendants (peut être vide []). Pour récupérer un module existant, on utilise angular.module("nom") sans le tableau.
Explication :
On définit un contrôleur avec la méthode
.controller() du module : app.controller("NomCtrl", function($scope) { ... }). Le $scope est injecté automatiquement et sert de pont entre le contrôleur et le template.
Explication :
Le
$scope est l'objet JavaScript qui sert de contexte d'exécution pour les expressions dans les templates. Il contient les données (modèle) et les méthodes exposées au template. Il forme une hiérarchie reflétant la structure des contrôleurs imbriqués.
Expliquez que $scope suit un modèle de prototypage JavaScript pour l'héritage. Les contrôleurs enfants héritent du scope parent, mais les primitives doivent être évitées au profit d'objets.
Explication :
ng-repeat crée une copie de l'élément HTML pour chaque élément du tableau ou de l'objet spécifié. Exemple : <li ng-repeat="item in items">{{ item.name }}</li>. Elle expose aussi des variables spéciales comme $index, $first, $last.
Explication :
ng-if supprime ou recrée l'élément dans le DOM selon la condition. Contrairement à ng-show/ng-hide qui utilisent CSS (visibility), ng-if crée un nouveau scope enfant et recompile l'élément à chaque changement.
Explication :
ng-show/ng-hide ajoutent/retirent la classe CSS ng-hide (display:none) — l'élément reste dans le DOM. ng-if supprime physiquement l'élément du DOM quand la condition est false, et le recrée (avec un nouveau scope enfant) quand elle devient true.
ng-show est préférable quand l'élément change souvent d'état (évite recreate). ng-if est meilleur pour les éléments rarement affichés (économise la mémoire et les watchers).
Explication :
La syntaxe des filtres en AngularJS utilise le pipe
| : {{ expression | nomFiltre }}. Pour un filtre avec paramètres : {{ expression | nomFiltre:param1:param2 }}. Ex : {{ prix | currency:"€" }}.
Explication :
Le filtre
date formate un timestamp ou objet Date. Exemples : {{ dateObj | date:"dd/MM/yyyy" }}, {{ dateObj | date:"fullDate" }}. Il accepte des formats prédéfinis (shortDate, mediumDate, etc.) ou personnalisés.
Explication :
Pour qu'une méthode soit accessible dans le template, elle doit être attachée au
$scope dans le contrôleur : $scope.maFonction = function() { ... };. Elle peut ensuite être appelée depuis le template avec ng-click="maFonction()" ou {{ maFonction() }}.
Préférez les contrôleurs "as" syntax (controllerAs) pour éviter les ambiguïtés de scope lors d'imbrications. C'est une pratique recommandée dans les grandes applications.
Explication :
ng-click évalue une expression AngularJS quand l'utilisateur clique sur l'élément. Exemple : <button ng-click="saveItem()">Sauvegarder</button>. Elle appelle automatiquement $scope.$apply() pour déclencher le cycle digest.
Explication :
ng-submit sur une balise <form> évalue une expression quand le formulaire est soumis. Elle remplace le comportement par défaut du navigateur (rechargement de page). Exemple : <form ng-submit="onSubmit()">.
Explication :
En AngularJS, le service
$http fournit des méthodes raccourcies : $http.get(url), $http.post(url, data), etc. Ces méthodes retournent des promises. Le callback .then(successFn, errorFn) traite la réponse.
Mentionnez que $http fait partie de la couche service d'AngularJS et est injectable. Précisez que response.data contient le corps de la réponse.
Explication :
L'objet
response dans le callback .then() contient : response.data (corps de la réponse, parsé si JSON), response.status (code HTTP), response.headers (fonction d'accès aux headers), response.config (config de la requête).
Explication :
ng-class permet d'appliquer des classes CSS conditionnellement. Syntaxe objet : ng-class="{'classe': condition}". Syntaxe tableau : ng-class="['classe1', condition ? 'classe2' : '']". Très utile pour les états actif/inactif.
Explication :
Le two-way binding synchronise automatiquement les données entre le modèle (
$scope) et la vue (DOM). Si le modèle change, la vue se met à jour. Si l'utilisateur modifie la vue (champ input), le modèle se met à jour. C'est la fonctionnalité phare d'AngularJS implémentée via le cycle dirty-checking ($digest).
Expliquez le compromis : le two-way binding est puissant mais peut être coûteux en performance avec beaucoup de watchers (>2000 recommandé). C'est un point souvent abordé en entretien senior.
Explication :
ng-href est utilisé à la place de l'attribut href standard quand l'URL contient des expressions AngularJS. Cela évite une requête HTTP avec une URL non résolue (href="{{url}}") avant qu'Angular compile le template.
Explication :
Les arguments d'un filtre se passent avec le séparateur
: : {{ expression | filtre:arg1:arg2 }}. Exemple complet : {{ nombre | number:2 }} (2 décimales), {{ date | date:"dd/MM/yyyy HH:mm" }}.
Explication :
Les dépendances de modules se déclarent dans le tableau passé en deuxième argument de
angular.module() : angular.module("monApp", ["ngRoute", "ngResource", "monModule"]). Angular charge et initialise ces modules avant le module courant.
Attention : ne pas confondre avec la récupération d'un module existant (sans tableau). angular.module("app") sans [] récupère le module ; avec [] le crée ou le recrée.
Explication :
ng-include charge et compile un template HTML externe. Exemple : <div ng-include="'header.html'"></div>. Attention : la valeur est une expression AngularJS, donc une chaîne de caractères doit être entourée de guillemets simples à l'intérieur.
Explication :
Dans une boucle
ng-repeat, AngularJS expose plusieurs variables spéciales : $index (index 0-based), $first (boolean), $last (boolean), $middle (boolean), $even/$odd (boolean).
Explication :
Le filtre
orderBy trie un tableau par une propriété : ng-repeat="item in items | orderBy:'nom'". Pour un tri inversé : orderBy:'-nom' (avec tiret). Il accepte aussi une fonction de tri personnalisée.
Combinez avec le filtre filter pour filtrer ET trier :
ng-repeat="item in items | filter:recherche | orderBy:'nom'".
Explication :
Le filtre
filter sélectionne un sous-ensemble du tableau : ng-repeat="item in items | filter:recherche" où recherche est une chaîne (cherche dans toutes les propriétés) ou un objet (cherche propriété par propriété). C'est la base des recherches en temps réel dans AngularJS.
Explication :
Dans les directives d'événements AngularJS (
ng-click, ng-keydown, etc.), l'objet événement est accessible via la variable spéciale $event : ng-click="handler($event)". C'est un objet événement DOM standard.
Explication :
Avec
controllerAs, au lieu d'injecter $scope, on utilise this dans le contrôleur et on préfixe dans le template : ng-controller="MonCtrl as vm". Dans le template : {{ vm.propriete }}. Cela améliore la lisibilité et évite les problèmes d'héritage de scope.
Expliquez que controllerAs est une bonne pratique recommandée par le style guide d'AngularJS (John Papa). Elle facilite aussi la migration vers Angular 2+.
Explication :
ng-change s'exécute quand la valeur d'un élément de formulaire change. Elle fonctionne conjointement avec ng-model. Exemple : <input ng-model="valeur" ng-change="onValeurChange()">.
Explication :
ng-style permet d'appliquer des styles CSS inline dynamiquement. Syntaxe : ng-style="{'color': couleur, 'font-size': taille + 'px'}". La valeur est un objet JavaScript avec des propriétés CSS en camelCase ou entre guillemets.
Explication :
Les services AngularJS sont des singletons injectables qui encapsulent la logique métier, l'accès aux données ou les fonctionnalités partagées. Ils sont créés une seule fois et réutilisés dans toute l'application. On les déclare avec
.service(), .factory() ou .provider().
Insistez sur le pattern singleton : une seule instance par application. Cela les rend parfaits pour partager des états ou des données entre contrôleurs.
Explication :
ng-src est l'équivalent Angular de src pour les images. Il évite que le navigateur fasse une requête avec l'URL non résolue "{{imageUrl}}" avant la compilation. Similaire à ng-href pour les liens.
Explication :
L'injection de dépendances se fait en listant les services comme paramètres de la fonction :
app.controller("MonCtrl", function($scope, MonService, $http) { }). Angular résout automatiquement les dépendances par leur nom. Pour la minification, utilisez la notation tableau : ["$scope", "MonService", function($scope, MonService) { }].
Toujours utiliser la notation tableau ou les annotations $inject pour la minification. La notation implicite casse avec les minificateurs JS.
Explication :
Le filtre
number formate un nombre et accepte le nombre de décimales en paramètre : {{ 3.14159 | number:2 }} → "3.14". Il ajoute aussi des séparateurs de milliers selon la locale.
Explication :
ng-disabled ajoute ou retire l'attribut HTML disabled selon la valeur de l'expression booléenne. Exemple : <button ng-disabled="!formValid">Soumettre</button>.
Explication :
Le cycle
$digest est le cœur du data binding d'AngularJS. Il parcourt tous les watchers enregistrés et vérifie si leurs valeurs ont changé (dirty-checking). S'il détecte des changements, il met à jour le DOM et relance le cycle jusqu'à stabilité (max 10 itérations par défaut).
Comprendre le cycle $digest est fondamental. Expliquez que chaque watcher créé par ng-bind, ng-model, etc. est vérifié à chaque cycle. Trop de watchers = application lente.
Explication :
AngularJS propose
ng-switch avec ng-switch-when et ng-switch-default pour l'affichage conditionnel multiple : <div ng-switch="valeur"> <p ng-switch-when="A">...</p> <p ng-switch-default>...</p> </div>.
Explication :
ng-init évalue une expression dans le scope courant lors de la compilation du template. Exemple : ng-init="prix = 10; nom = 'test'". Son usage est déconseillé en production — préférez initialiser les variables dans le contrôleur.
Explication :
Angular 2+ est une réécriture complète et incompatible avec AngularJS. Différences clés : TypeScript vs JavaScript, architecture basée sur des composants vs MVC avec $scope, système de modules ES6, RxJS/Observables vs Promises, performances améliorées avec change detection unidirectionnelle.
Ne dites jamais "Angular 3, 4, 5..." c'est juste "Angular" (2+). AngularJS désigne toujours la version 1.x. Cette distinction est cruciale en entretien.
Explication :
ng-attr-nomAttribut permet de créer des attributs HTML dynamiques. Exemple : ng-attr-title="{{ info }}" crée title="valeur". Utile pour les attributs qui ne peuvent pas contenir d'interpolation directe (certains attributs SVG, ARIA, etc.).
Explication :
Quand AngularJS se charge, il cherche l'attribut
ng-app dans le DOM. S'il le trouve, il bootstrappe automatiquement l'application depuis cet élément. Le bootstrap manuel via angular.bootstrap(element, [modules]) est possible mais rarement nécessaire.
Le bootstrap automatique convient pour la plupart des cas. Le bootstrap manuel est utile pour initialiser AngularJS après un chargement asynchrone ou pour gérer plusieurs applications sur la même page.
Explication :
ng-readonly ajoute ou retire l'attribut HTML readonly d'un champ de formulaire selon une condition booléenne. Contrairement à ng-disabled, le champ reste focusable et sélectionnable, mais non modifiable.
Explication :
Pour les
<select>, AngularJS fournit ng-options (plus performant, recommandé) ou ng-repeat avec des <option>. Exemple ng-options : <select ng-model="selected" ng-options="item.id as item.name for item in items">.
Explication :
AngularJS intègre la validation HTML5 et expose l'état du formulaire via des propriétés sur le scope :
$valid, $invalid, $dirty, $pristine, $touched. Les directives de validation incluent ng-required, ng-minlength, ng-maxlength, ng-pattern.
Mentionnez les états CSS automatiques : ng-valid, ng-invalid, ng-dirty, ng-pristine. Ils permettent de styliser les champs sans JavaScript supplémentaire.
Explication :
<script type="text/ng-template" id="monTemplate.html"> définit un template inline mis en cache par AngularJS. Il peut ensuite être référencé par son ID dans ng-include ou les directives de routing sans faire de requête HTTP.
Explication :
Dans
ng-repeat, la variable $last est true pour le dernier élément. Similairement, $first est true pour le premier. Utile pour conditionner l'affichage : ng-if="!$last" pour afficher un séparateur sauf après le dernier élément.
Explication :
ng-transclude est utilisée dans le template d'une directive pour indiquer où le contenu passé entre les balises de la directive doit être inséré. Elle nécessite transclude: true dans la définition de la directive.
La transclusion est l'équivalent du slot/content projection d'Angular 2+. Utile pour les composants génériques comme des boîtes de dialogue ou des panneaux.
Explication :
AngularJS fournit
angular.toJson(obj) (équivalent de JSON.stringify avec nettoyage des propriétés $$hashKey) et angular.fromJson(str) (équivalent de JSON.parse). Ils peuvent être préférés car ils nettoient les propriétés internes d'Angular.
Explication :
angular.copy(source) crée une copie profonde (deep copy) d'un objet ou d'un tableau. Toutes les références imbriquées sont copiées, pas juste les références de surface. Utile pour créer une copie de travail d'un objet avant modification.
Explication :
angular.extend(destination, src) copie les propriétés de src dans destination (copie superficielle). C'est l'équivalent de Object.assign(). Pour une fusion profonde, utilisez angular.merge(destination, src).
Distinguez angular.extend() (copie shallow) et angular.merge() (copie deep). Savoir quand utiliser l'un ou l'autre démontre une bonne maîtrise.
Explication :
Les expressions AngularJS supportent l'égalité stricte
=== et l'égalité lâche ==. Dans les templates, {{ valeur === "test" }} est valide. angular.equals() est utile en JavaScript pour comparer des objets en profondeur.
Explication :
Le préfixe
ng- est le namespace d'AngularJS. Il permet d'éviter les conflits avec les attributs HTML standards. C'est une convention — vous pouvez utiliser data-ng- pour une validation HTML5 stricte, ou x-ng-, ng:.
Mentionnez que data-ng- est valide HTML5. Les deux sont reconnus par AngularJS. Pour les environnements stricts, data-ng- est préféré.
Explication :
$http.get() retourne un objet Promise (basé sur $q). On chaîne les callbacks avec .then(successCallback, errorCallback). Depuis AngularJS 1.6, .success() et .error() sont supprimés — utiliser uniquement .then().
Explication :
ng-disabled="condition" ajoute l'attribut HTML disabled quand la condition est vraie. Fonctionne sur tous les éléments de formulaire : input, select, textarea, button.
Explication :
$scope.$emit() envoie un événement vers le haut (du scope enfant vers le scope parent et ancestors). $scope.$broadcast() envoie vers le bas (vers tous les scopes descendants). $scope.$on("evenement", fn) écoute les événements.
La distinction $emit vs $broadcast est une question classique d'entretien AngularJS. Retenez : $emit = up (bubble), $broadcast = down (diffusion).
Explication :
angular.isArray(value) retourne true si la valeur est un tableau. AngularJS fournit plusieurs helpers : angular.isObject(), angular.isString(), angular.isNumber(), angular.isFunction(), angular.isDefined(), angular.isUndefined().
Explication :
AngularJS 1.8.x est la dernière version stable. La fin de vie (EOL) officielle d'AngularJS a été annoncée au 31 décembre 2021. Les projets existants peuvent encore fonctionner mais ne reçoivent plus de mises à jour de sécurité du noyau officiel.
Explication :
Les expressions AngularJS s'exécutent dans un contexte sécurisé. Elles n'ont pas accès à
window, document, alert(), etc. Pas de support pour les boucles for/while, les throw/catch, ou les déclarations de variables. Cela protège contre les injections XSS depuis les templates.
Cette limitation est intentionnelle. Pour une logique complexe, utilisez le contrôleur. Les templates doivent rester simples et déclaratifs.
Explication :
$location.path() retourne le chemin actuel de l'URL. $route.current (avec ngRoute injecté) donne l'objet de la route active avec ses paramètres. $routeParams expose les paramètres de la route actuelle.
Explication :
AngularJS favorise une approche déclarative : vous décrivez ce que la vue doit afficher en fonction des données (modèle), Angular se charge de mettre à jour le DOM. Avec jQuery, vous manipulez le DOM impérativement. Angular encourage la séparation des responsabilités et facilite les tests.
Expliquez le paradigme : "Don't think about what DOM manipulations to make. Think about what state your application should be in. Angular will take care of the DOM." — idéal pour illustrer le changement de paradigme.
Quiz
Débutant
20 questions
15 min
jQuery Débutant — DOM & Sélecteurs
Quiz
Senior
20 questions
15 min
AngularJS — Entretien Senior
Quiz
Intermediate
20 questions
15 min
AngularJS — Entretien Junior
Quiz
Débutant
20 questions
15 min
Entretien React Débutant — Composants, Props et State
Quiz
Débutant
20 questions
15 min
Vue Débutant — Composants & Router
Quiz
Débutant
20 questions
15 min
Entretien JavaScript Débutant : variables et syntaxe
Quiz
Débutant
20 questions
15 min
Entretien Vanilla JS Débutant — DOM et Événements
Quiz
Débutant
20 questions
15 min
HTML Débutant — Balises et structure
Quiz
Junior
20 questions
15 min
Entretien jQuery Junior : AJAX, plugins et perf
Quiz
Débutant
20 questions
15 min
Scrum Débutant — Rôles et Artifacts
Quiz
Débutant
20 questions
15 min
Entretien Git Débutant — Commits, Branches et Remote
Quiz
Débutant
20 questions
15 min
Entretien Node.js Débutant — Modules, NPM et Callbacks
Quiz
Débutant
20 questions
15 min
Entretien TypeScript Débutant — Types et Interfaces
Quiz
Débutant
20 questions
15 min
NestJS Débutant — Modules & Services
Quiz
Débutant
20 questions
15 min
Python Django/FastAPI Débutant — Routes & Modèles
Quiz
Débutant
20 questions
15 min
Entretien Tailwind CSS Débutant — Utilities et Bases
Quiz
Débutant
20 questions
15 min
Entretien CSS Débutant — Sélecteurs et Box Model
Quiz
Débutant
20 questions
15 min
Entretien Angular Débutant — Composants, Pipes et Routing
Quiz
Junior
20 questions
15 min
Entretien Node.js Junior — Express, REST et Middleware
Quiz
Débutant
20 questions
15 min