18 questions d'entretien angulaires courantes (avec analyse des réponses)

Cet article résume et partage 18 questions d'entretien angulaires courantes (avec analyse des réponses) pour vous aider à trier les connaissances de base et à améliorer votre réserve de connaissances angulaires. Cela vaut la peine d'être collecté, venez y jeter un œil !

1. Quel mécanisme est utilisé pour la liaison de données dans Angular ? Décrivez le principe en détail

Réponse : Mécanisme de vérification sale.

Analyse :

La liaison de données bidirectionnelle est l'un des mécanismes de base d'AngularJS. Lorsque des données changent dans la vue, elles seront mises à jour dans le modèle. Lorsque les données du modèle changent, la vue sera également mise à jour de manière synchrone, cela nécessite évidemment une surveillance. [Recommandation du didacticiel connexe : "Tutoriel angulaire"] Le principe est qu'Angular définit une file d'attente d'écoute sur le modèle de portée pour surveiller les modifications des données et mettre à jour la vue. Chaque fois que vous liez quelque chose à la vue, AngularJS insérera un $watch dans la file d'attente $watch pour détecter s'il y a des changements dans le modèle qu'il surveille. Lorsque le navigateur reçoit un événement pouvant être traité par le contexte angulaire, la boucle $digest est déclenchée, parcourt toutes les $watches et met enfin à jour le dom.

2. Comment la liaison de données bidirectionnelle d'AngularJS est-elle implémentée ?

Réponse :

1. Chaque élément lié dans les deux sens a un observateur

2 Lorsque certains événements se produisent, la détection des données sales est appelée.

Ces événements incluent : les modifications de contenu des éléments de formulaire, les réponses aux requêtes Ajax, les fonctions exécutées en cliquant sur des boutons, etc.

3. La détection des données sales détectera tous les éléments d'observation sous rootscope.

La fonction $digest permet de surveiller les données sales

3. Quels plug-ins tiers avez-vous utilisés lors du développement de projets AngularJS

Réponse : AngularUi ui-router oclazyload, etc. Vous trouverez ci-joint un article pour y regarder de plus près. https ://segmentfault.com/a/1190000003858219

4. Quelle est la différence entre ng-show/ng-hide et ng-if ?

Réponse : nous savons tous que ng-show/ng-hide se cache et s'affiche via l'affichage. Et ng-if contrôle en fait l'ajout et la suppression de nœuds dom. Par conséquent, si nous chargeons des nœuds dom en fonction de conditions différentes, alors les performances de ng-if sont meilleures que celles de ng-show.

5 Expliquez ce qu'est rootSc r o p e et la différence entre celui-ci et rootScrope, rootScrope et scope ?

Réponse : En termes simples, la page rootSc r op e est le père de toutes les pages rootScrope et de toutes les portées de toutes les pages rootScrope.

Analyse :

Voyons comment générer rootSc o p e et rootScope et rootScope et scope.

étape 1 : Angular analyse ng-app et crée $rootScope en mémoire.

étape 2 : angulaire continue l'analyse, trouve l'expression {{}} et l'analyse dans une variable.

étape 3 : Ensuite, le div avec ng-controller sera analysé et pointé vers une fonction de contrôleur. À ce stade, la fonction du contrôleur devient une instance d’objet $scope.

6. Énumérez au moins trois façons de mettre en œuvre la communication entre les différents modules ?

Réponse :

Service

• événements, spécifiez les événements liés
• Utilisez $rootScope
• le contrôleur utilise directement $parent, $$childHead, etc.
• directive pour spécifier les attributs pour la liaison de données

7. Comment fonctionne l'expression {

{yourModel}} ? Réponse :

Il s'appuie sur le service $interpolation. Après avoir initialisé la page html, il trouvera ces expressions et les marquera, donc chaque fois qu'il rencontrera un {

{}}, une $watch sera définie. $interpolation renverra une fonction avec des paramètres de contexte lorsque la fonction est finalement exécutée, l'expression est $parse pour cette portée.

8. $http dans angulaire

Réponse : $http est un service principal d'AngularJS, utilisé pour lire les données des serveurs distants.

Nous pouvons utiliser le service http intégré pour communiquer directement avec le monde extérieur. Le service http communique directement avec le monde extérieur. Le service http communique directement avec le monde extérieur. Le service http encapsule simplement l'objet XMLHttpRequest natif du navigateur.

9. Lorsque ng-repeat itère un tableau, s'il y a les mêmes valeurs dans le tableau, que se passera-t-il et comment le résoudre ?

Réponse : les doublons dans un répéteur ne sont pas autorisés. Ajoutez une piste par $index pour résoudre le problème. Bien sûr, vous pouvez également tracer par n'importe quelle valeur ordinaire, à condition que chaque élément du tableau puisse être identifié de manière unique (établissant l'association entre dom et data)

10. Angularjs est-il un framework mvc ou mvvm ? ：mvvm

Analyse :

Expliquez d'abord votre compréhension de mvc et mvvm :

Tout d'abord, pourquoi avons-nous besoin de MVC ? Parce qu'à mesure que la taille du code devient de plus en plus grande, la division des responsabilités est la tendance générale, et pour faciliter la maintenance ultérieure, la modification d'une fonction n'affecte pas les autres fonctions. Et pour la réutilisation, car une grande partie de la logique est la même. MVC n'est qu'un moyen, le but ultime est la modularisation et la réutilisation.

Avantages de mvvm

Faible couplage : la vue peut changer et se modifier indépendamment du modèle, et le même ViewModel peut être réutilisé par plusieurs vues ; et les modifications dans la vue et le modèle peuvent être indépendantes les unes des autres 

Réutilisabilité : une certaine logique de vue peut être placée dans ViewModel ; , plusieurs vues peuvent être réutilisées ;

Développement indépendant : les développeurs peuvent se concentrer sur le développement de la logique métier et des données (ViewModemvvmdi) ; les concepteurs peuvent se concentrer sur la conception de l'interface utilisateur (View) ; plus facile et plus simple de tester la logique métier de la couche de présentation.

Le modèle MVVM en angulaire est principalement divisé en quatre parties :

Vue : Il se concentre sur l'affichage et le rendu de l'interface. En angulaire, il contient un tas de. Modèle de vue de directive déclarative.

ViewModel : c'est le lien entre View et Model. Il est responsable de l'interaction et de la collaboration entre View et Model. Il est chargé de fournir les données affichées à View et de fournir un moyen pour l'événement Command dans View. pour faire fonctionner Model. ; En angulaire, l'objet $scope joue le rôle de ce ViewModel

Model : C'est un support d'encapsulation des données liées à la logique métier de l'application. ne se soucie pas de la façon dont il sera affiché ou utilisé, le modèle ne contient donc aucune logique liée à l'affichage de l'interface. Dans les pages Web, la plupart des modèles renvoient des données du serveur Ajax ou des objets de configuration globale pendant que le service est encapsulé et traité sous forme angulaire. ceux-ci. La place pour la logique métier liée au modèle. Ce type de service métier est un service de domaine qui peut être réutilisé par plusieurs contrôleurs ou autres services.

Contrôleur : ce n'est pas l'élément central du modèle MVVM, mais il en est responsable. pour l'initialisation de l'objet ViewModel. Combinez un ou plusieurs services pour obtenir le modèle de domaine métier et placez-le sur l'objet ViewModel, afin que l'interface de l'application atteigne un état utilisable au démarrage du chargement

L'interface et la logique de mvc sont étroitement liées. , et les données sont lues directement à partir de la base de données. L'interface de mvvm est faiblement couplée au mode d'affichage, et les données d'interface sont obtenues à partir du modèle de vue. Ainsi, Angularjs préfère mvvm

11. Quels rôles font $scope, contrôleur, directive. , et le service dans angularjs joue dans mvvm

Réponse : Si vous je ne sais pas, l'analyse de la première question est très claire, relisez-la attentivement

12. dans le projet angulaire

Réponse : Aucun

13. Contrôleur d'écriture À quoi devez-vous faire attention lorsque vous pensez logiquement ?

Réponse :

1. Simplifiez le code (c'est ce que tous les développeurs doivent avoir)

2. Vous ne pouvez absolument pas faire fonctionner le nœud dom. À ce stade, vous pouvez vous demander pourquoi

Votre réponse est : les opérations DOM le peuvent. Apparaît uniquement dans les directives. Le dernier endroit où il devrait apparaître est le service. Angular préconise le développement piloté par les tests. Si des opérations DOM apparaissent dans le service ou le contrôleur, cela signifie que le test ne peut pas réussir. Bien sûr, ce n'est qu'un point. Ce qui est important, c'est l'un des avantages de l'utilisation d'Angular, qui est la liaison de données bidirectionnelle, afin que vous puissiez vous concentrer sur le traitement de la logique métier sans avoir à gérer des piles d'opérations DOM. Si le code angulaire est encore plein de diverses opérations DOM, alors pourquoi ne pas simplement utiliser jquery pour le développer.

Qu'est-ce que le développement piloté par les tests ? Vulgarisez-le :

Le développement piloté par les tests, le nom anglais complet est Test-Driven Development, ou TDD en abrégé, est une nouvelle méthode de développement différente du processus de développement logiciel traditionnel. Cela nécessite d'écrire du code de test avant d'écrire le code d'une certaine fonction, puis d'écrire uniquement le code fonctionnel qui fait passer le test et de piloter l'ensemble du développement via les tests. Cela permet d'écrire du code concis, utilisable et de haute qualité et d'accélérer le processus de développement.

14. Comment communiquer entre les contrôleurs

Réponse :

1. event

Il y a deux façons ici, l'une est sc o p e , puis obtenez les paramètres en écoutant le r o o t Sco. p e event ; L'autre est l'événement de rootScope pour obtenir les paramètres ; l'autre est l'événement de rootScope pour obtenir les paramètres ; l'autre est rootScope.b ro a d cast , qui obtient les paramètres en écoutant la diffusion, en écoutant la diffusion et en écoutant les événements de l'oscilloscope.

Il n'y a pas de différence de performances entre ces deux méthodes dans la dernière version d'Angular. La raison principale est que la direction d'envoi des événements est différente. Vous pouvez choisir en fonction de la situation réelle.

2. Service

Vous pouvez créer un service d'événement dédié, ou vous pouvez le diviser selon la logique métier et stocker les données dans le service correspondant

3 $rootScope

Cette méthode est peut-être un peu sale, mais elle. est plus pratique. , c'est-à-dire que les données sont stockées dans la portée racine, de sorte que chaque sous-rootScope soit dans chaque sous-rootScope, afin que chaque sous-portée puisse être appelée, mais vous devez faire attention au cycle de vie

4. Utilisez scope.scope.$ nextSibling et propriétés similaires

Les propriétés similaires incluent scope.scope.parent. Cette méthode présente encore plus d'inconvénients. Il n'est officiellement pas recommandé d'utiliser des attributs commençant par $$, ce qui non seulement augmente le couplage, mais nécessite également de traiter des problèmes asynchrones, et l'ordre des portées n'est pas fixe. Non recommandé

L'autre consiste à transmettre les paramètres via le stockage local, les variables globales ou postMessage des navigateurs modernes. Sauf circonstances particulières, veuillez éviter cette méthode.

15. Plusieurs paramètres des instructions personnalisées

Réponse :

Parlons de quelques-uns courants tels que :

restreindre : Le formulaire de déclaration de l'instruction dans le dom E (élément) A (attribut) C (classe name) M (annotation)

template : deux formulaires, un texte HTML ; une fonction qui accepte deux paramètres, tElemetn et tAttrs, et renvoie une chaîne représentant le modèle. La chaîne du modèle doit avoir un élément racine DOM

templateUrl : deux formes, l'une est une chaîne représentant le chemin du fichier HTML externe ; une fonction qui peut accepter deux paramètres, les paramètres sont tElement et tAttrs, et renvoie un fichier HTML externe. path String

compile (objet ou fonction) : L'option compile peut renvoyer un objet ou une fonction. Si la fonction de compilation est définie, cela signifie que nous voulons effectuer des opérations DOM avant que les instructions et les données en temps réel ne soient placées dans le DOM. Il est sûr d'effectuer des opérations DOM telles que l'ajout et la suppression de nœuds dans cette fonction. Essentiellement, lorsque nous définissons l'option de lien, nous créons en fait une fonction de lien postLink() afin que la fonction compile() puisse définir la fonction de lien.

Ensuite, il y a le portail : http://www.cnblogs.com/mliudong/p/4180680.html

La différence entre compiler et link :

Lors de la compilation, la compilation convertit le dom et rencontre l'écouteur de liaison. Ils sont stockés à différents endroits d'abord, et plusieurs sont stockés à plusieurs endroits Enfin, ils sont résumés dans une fonction de lien et exécutés ensemble, ce qui améliore les performances.

16. La différence entre angulaire et jquery

Réponse :

angular est basé sur les données, donc angulaire convient aux projets avec des opérations de données fastidieuses (vous pouvez mentionner ici à nouveau les applications d'une seule page, si vous ne le faites pas). Je ne connais pas les avantages, venez ici http://www.zhihu.com/question/20792064)

jquery est basé sur le pilote dom, jquery convient aux projets avec de nombreuses opérations dom

17. À propos de la forme dans Angular

ansewer:

angular a élargi le type d'éléments d'entrée, fournissant un total des 10 types suivants:

• text

• number

• url

• email

• radio

• case à cocher

• caché

• bouton

• soumettre

• réinitialisation

Angular dispose de 4 styles CSS intégrés pour le formulaire.

• ng-valid Vérifier le statut légal

• ng-invalid Vérifier le statut illégal

• ng-pristine Si vous souhaitez utiliser le formulaire natif, vous devez définir cette valeur

• ng-dirty Le le formulaire est sale Statut des données

Angular vérifiera les attributs du modèle lors de la validation automatique du formulaire. Si ng-model n'est pas défini, Angular ne peut pas savoir si la valeur de myForm.$invalid est vraie.

Vérifier le contenu

• obligatoire Indique s'il faut saisir du contenu

• ng-maxlength Longueur maximale

• ng-minlength Longueur minimale

Exemple : Portail https://github.com/ 1850004756 4/ désordre

18. Que savez-vous de ce qu'est un filtre ? Implémentez un filtre personnalisé

Réponse :

• date (date)

• currency (devise)

• limitTo (limiter le tableau ou la longueur de la chaîne)

• orderBy (sort)

• minuscule (minuscule)

• majuscule (majuscule)

• nombre (formater les nombres, ajouter des séparateurs de milliers et recevoir des paramètres pour limiter le nombre de points décimaux)

• filtrer (traiter un tableau, filtrer les éléments contenant un certaine sous-chaîne)

• json (objet json formaté)

filter Il y a deux façons de l'utiliser,

L'une est directement dans la page :

<p>{{now | date : ‘yyyy-MM-dd’}}</p>

L'autre est utilisée en js :

$filter(‘过滤器名称’)(需要过滤的对象, 参数 1, 参数 2,…)
$filter(‘date’)(now, 'yyyy-MM-dd hh:mm:ss’);

Personnaliser un tableau dédupliqué

app.filter("unique", function() {
  return function(arr) {
    var n = [];
    var obj = {};

    for (var i = 0; i < arr.length; i++) {
      if (!obj[arr[i]]) {
        n.push(arr[i]);
        obj[arr[i]] = 1;
      }
    }

    return n;
  };
});

Pour plus de connaissances sur la programmation, veuillez visiter :Tutoriel de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!