Quelles sont les différences entre ng-if et ng-show / masquer?
La première différence est que NG-IF est créé uniquement lorsque l'expression après le nœud Dom est vraie, NG-show est créé au début, et affichage: bloc et affichage: aucun n'est utilisé pour contrôler l'affichage et non l'affichage.
La deuxième différence est que Ng-i si produira (implicitement) une nouvelle portée, et il en va de même pour Ng-Switch, Ng-include, etc. pour créer dynamiquement une interface.
Cela entraînera la liaison du modèle NG avec la variable de base dans NG-IF et lierait ce modèle à une autre zone d'affichage dans la div externe. Lorsque la couche intérieure change, la couche externe ne changera pas de manière synchrone car il y a déjà deux variables.
<p> {{name}} </p> <div ng-if = "true"> <input type = "text" ng-model = "name"> </ div>Ng-show n'a pas ce problème car il ne vient pas avec sa propre portée de premier niveau.
La façon d'éviter ce type de problème est de toujours lier les éléments de la page aux propriétés de l'objet (Data.x) au lieu de se lier directement à la variable de base (x).
Voir la portée dans AngularJS pour plus de détails
Lorsque Ng-Repeat itère sur un tableau, s'il y a les mêmes valeurs dans le tableau, quels problèmes seront là et comment les résoudre?
Les doublons dans un répéteur ne sont pas autorisés. L'ajout de piste par $ index peut le résoudre. Bien sûr, vous pouvez également retracer par n'importe quelle valeur ordinaire, tant que vous pouvez identifier de manière unique chaque élément du tableau (créer l'association entre le DOM et les données).
L'expression écrite en NG-Click peut-elle utiliser les méthodes sur les objets natifs JS?
Non seulement les expressions en clic Ng, mais seules les méthodes JS natives ne peuvent pas être appelées directement tant qu'elles sont dans la page, car elles n'existent pas dans la portée $ du contrôleur correspondant à la page.
Prenez un châtaignier:
<p> {{parseInt (55.66)}} <p>
Vous constaterez que rien n'est affiché.
Mais si vous ajoutez cette fonction dans $ Scope:
$ scope.parseint = fonction (x) {return parseInt (x);}Bien sûr, il n'y a pas de problème comme ça.
Pour ce type d'exigence, l'utilisation d'un filtre peut être un bon choix:
<p> {{13.14 | parseIntFilter}} </p> app.filter ('parseIntFilter', function () {return function (item) {return parseInt (item);}}){{maintenant | 'yyyy-mm-dd'}} Dans cette expression, comment personnaliser les lignes verticales et les paramètres ultérieurs?
Filtre, formats les données, reçoit une entrée, les traite en fonction d'une certaine règle et renvoie le résultat de traitement.
Filtre intégré
Il existe neuf types de filtres intégrés:
Date (date)
devise
limitTo (limites le tableau ou la longueur de chaîne)
commander par (tri)
minuscules (minuscules)
majuscule (CAPS)
Numéro (formatez le nombre, ajoutez un millier de séparateur et recevez des paramètres pour limiter le nombre de décimales)
Filtre (traiter un tableau et filtrer les éléments contenant une sous-chaîne)
JSON (Formatting JSON Object)
Il existe deux façons d'utiliser le filtre, l'un est directement sur la page:
<p> {{maintenant | Date: 'Yyyy-mm-dd'}} </p>
Un autre est de l'utiliser dans JS:
// $ filtre ('Nom du filtre') (objets qui doivent être filtrés, paramètre 1, paramètre 2, ...)
$ filtre ('date') (maintenant, 'yyyy-mm-dd hh: mm: ss');
Filtre personnalisé
// form app.filter ('Filter Name', fonction () {return function (objet qui doit être filtré, paramètre de filtre 1, paramètre de filtre 2, ...) {// ... faire quelque chose pour renvoyer l'objet après traitement;}}); // Chestnut app.filter ('TimesFilter', function () {return function (item, time) {var result = ''; for (var i = 0; i <times; i ++) {result + = item;} return result;}})Quelle est la relation entre l'usine, le service et le fournisseur?
usine
Mettez la méthode de service et les données dans un objet et renvoyez cet objet
app.factory ('Fooservice', function () {return {cible: 'factory', sayhello: function () {return 'hello' + this.target;}}});service
Créer un service via la méthode du constructeur et renvoyer un objet instancié
app.service ('Fooservice', function () {var self = this; this.target = 'service'; this.sayhello = function () {return 'hello' + self.target;}});Fournisseur
Créez un service qui peut être configuré via la configuration. Le retour dans $ get est d'utiliser l'usine pour créer le contenu du service
app.provider ('Fooservice', function () {this.configData = 'init data'; this.setConfigData = function (data) {if (data) {this.configData = data;}} this. $ get = function () {var self = this; return {cible: 'provider', sayhello: function (function () {return self.configda + help + ' this.target;}}}}}); // Ce qui est injecté ici est Fooservice providerApp.config (fonction (FooserviceProvider) {FooserviceProvider.setConfigData ('Config Data');});Du point de vue de l'implémentation sous-jacente, le service appelle l'usine et renvoie son instance; Le fournisseur d'appels d'usine, renvoyant le contenu défini dans son $ get. Les fonctions d'usine et de service sont similaires, sauf que l'usine est une fonction normale qui peut renvoyer n'importe quoi (le retour peut être accessible, alors comment rédiger ces variables privées, vous savez); Le service est un constructeur, qui ne peut pas être renvoyé (ceux qui sont liés à cela peuvent être accessibles); Le fournisseur est une usine améliorée, qui renvoie une usine configurable.
Voir AngularJS Factory vs Service vs fournisseur
Quel mécanisme est utilisé pour la liaison des données d'Angular? Description détaillée du principe
Mécanisme d'inspection sale.
La liaison bidirectionnelle des données est l'un des mécanismes de base des AngularJS. Lorsqu'il y a un changement de données dans la vue, il sera mis à jour vers le modèle. Lorsqu'il y a un changement de données dans le modèle, la vue sera également mise à jour simultanément. De toute évidence, cela nécessite une surveillance.
Le principe est qu'Angular met en place une file d'attente d'écoute sur le modèle de portée pour écouter les modifications de données et mettre à jour la vue. Chaque fois qu'un objet est lié à la vue, AngularJS insérera une surveillance $ 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 qui peut être traité par un contexte angulaire, la boucle $ digest sera déclenchée, traversera toutes les montres $ et enfin la mise à jour du DOM.
Donner un châtaignier
<Button ng-click = "val = val + 1"> augmenter 1 </ bouton>
En cliquant, une opération de mise à jour sera générée (au moins deux boucles de digestion $ sont déclenchées)
Appuyez sur le bouton
Le navigateur reçoit un événement et entre dans le contexte angulaire
La boucle $ digest commence à s'exécuter, demandant si chaque $ watch change
Puisque $ surveillant la surveillance $.
Aucune modification détectée dans la nouvelle boucle $ digest
Le navigateur reprend le contrôleur et met à jour le DOM correspondant à la nouvelle valeur de $ scope.val
La limite supérieure de la boucle $ digest est 10 fois (une exception est lancée après plus de 10 fois pour empêcher les boucles infinies).
Voir la liaison des données pour AngularJS
Deux blocs d'interface horizontale a et b. Si un événement est déclenché dans A, quelles peuvent savoir B? Description détaillée du principe
En d'autres termes, ce problème est de savoir comment communiquer entre les modules d'interface horizontale. Il existe deux méthodes, l'une consiste à partager des services et l'autre doit être basé sur des événements.
Services partagés
Dans Angular, un objet Singleton peut être généré par l'usine, et cet objet peut être injecté dans les modules A et B qui nécessitent une communication.
Basé sur les événements
Il y a deux façons de faire ça
La première consiste à utiliser le contrôleur parent. Dans le contrôleur enfant, déclenchez un événement ($ emit) au contrôleur parent, puis écoutez les événements ($ on) dans le contrôleur parent, puis diffusent ($ diffuser) au contrôleur enfant. De cette façon, à travers les paramètres transportés par l'événement, les données se propagent via le contrôleur parent et parmi les mêmes contrôleurs de niveau.
Le deuxième type consiste à utiliser $ Rootscope. Chaque application angulaire a une portée racine $ rootscope par défaut. La portée racinaire est au niveau supérieur, et il y a des lunettes à tous les niveaux qui y sont suspendus. Par conséquent, si le sous-contrôleur utilise directement $ Rootscope pour diffuser et recevoir des événements, la communication entre les pairs peut être réalisée.
Voir la communication entre les contrôleurs dans AngularJS
Comment une application angulaire devrait-elle être bien superposée?
Diviser la structure du répertoire
Pour les petits projets, vous pouvez les organiser par type de fichier, comme:
CSSJS Controllers Modèles de services Filtres de services
Cependant, pour les projets plus grands, il est préférable de les diviser en fonction des modules commerciaux, tels que:
CSSModules Contrôleurs de compte Modèles Modèles de services de services Modèles de contrôle des modèles Disk Modèles Filtres de services
Il est préférable d'avoir un répertoire commun sous les modules pour stocker des choses publiques.
Division du code logique
En tant que cadre MVVM, les applications angulaires doivent être divisées en fonction du modèle, du modèle de vue (contrôleur) et des vues.
Le fractionnement du code logique ici fait principalement pour essayer de rendre la couche de contrôleur très mince autant que possible. Extraire la logique partagée dans le service (telles que les demandes de données de fond, le partage de données et le cache, la communication intermodule basée sur des événements, etc.), extraire les opérations d'interface partagées dans la directive (telles que la sélection de la date d'encapsulation, la pagination, etc. en composants, etc.), extraire les opérations de format partagé dans le filtre, etc., etc.
Dans des applications complexes, les constructeurs correspondants peuvent également être établis pour des entités, telles que le module de disque dur (disque), qui peut avoir plusieurs vues telles que la liste, la nouvelle création et les détails et les contrôleurs correspondants respectivement. Ensuite, un constructeur de disque peut être construit pour compléter les opérations d'addition, de suppression, de modification et de vérification des données. S'il existe un contrôleur lié au disque, le constructeur de disque est injecté dans le constructeur de disque et une instance est générée. Cette instance a les méthodes d'ajout, de suppression, de modification et de vérification. Cela a non seulement des couches claires, mais réalise également la réutilisation (rendant la couche de contrôleur plus mince).
Reportez-vous à la pratique approfondie des AngularJS dans le centre de nuages du soleil
Quelles bibliothèques de routage sont couramment utilisées pour les applications angulaires et quelles sont leurs différences?
Ngroute et UI.Router sont couramment utilisés dans Angular1.x, et il existe également un nouveau routeur (orienté composant) conçu pour Angular2. Celui derrière n'a pas été utilisé dans le projet réel, donc je n'en parlerai pas.
Qu'il s'agisse de ngoute ou d'interface utilisateur, en tant que caractéristique supplémentaire du cadre, doit être introduit sous la forme de dépendances du module.
la différence
Le module NGOUTE est un module de routage angulaire, tandis que le module UI.Router est un module tiers développé basé sur le module NgOUTE.
UI.Router est basé sur l'état (état), NgOUTE est basé sur l'URL, et le module UI.Router a des fonctions plus puissantes, principalement reflétées dans les aspects de nidification des vues.
Utilisez UI.Router pour définir des itinéraires avec des relations parent-enfant claires et insérer des modèles de routage des enfants dans <div ui-viswe> </div> du modèle de routage parent via la directive de la vision UI, réalisant ainsi la nidification de la vue. Cela ne peut pas être défini dans ngoute. Si <div ng-view> </div> est utilisé dans la vue parent-enfant en même temps, il tombera dans une boucle morte.
Exemple
ngoute
var app = angular.module ('ngOUREAPP', ['ngoute']); app.config (function ($ routeProvider) {$ routeProvider .when ('/ Mainctrl', {templateUrl: "main.html", contrôleur: 'mainctrl'}) .wisewise ({redirectto: '/ tabs'});ui.
var app = angular.module("uiRouteApp", ["ui.router"]);app.config(function($urlRouterProvider, $stateProvider){ $urlRouterProvider.otherwise("/index"); $stateProvider .state("Main", { url: "/main", templateUrl: "main.html", controller: 'Mainctrl'})Si vous planifiez un système entièrement composant via une directive angulaire, quels défis pouvez-vous rencontrer?
Je n'ai jamais fait un ensemble complet de composants avec une directive moi-même, donc je ne peux pas l'expliquer.
Une chose à laquelle on peut penser est de savoir comment les composants interagissent avec le monde extérieur et comment ils peuvent être utilisés grâce à une configuration simple.
Applications angulaires développées par différentes équipes. Si vous souhaitez les intégrer, quels problèmes peuvent être rencontrés et comment les résoudre?
Des conflits entre différents modules peuvent être rencontrés.
Par exemple, tous les développements d'une équipe sont effectués sous modulea, tandis que le code développé par une autre équipe est effectué sous ModuleB
angular.module ('myapp.modulea', []) .factory ('Servicea', function () {...}) angular.module ('myapp.moduleb', []) .factory ('Service', function () {...}) angular.module.Cela entraînera l'écrasement de Servicea sous deux modules.
Il semble qu'il n'y ait pas de bonne solution dans Angular1.x, il est donc préférable de faire une planification unifiée à un stade précoce, de conclure des accords et de se développer strictement conformément à l'accord. Chaque développeur n'écrit que du code de bloc spécifique.
Quels sont les inconvénients de l'Angular?
Contraintes fortes
Cela conduit à des coûts d'apprentissage élevés et est hostile à l'avant.
Mais lorsque vous suivez les conventions AngularJS, la productivité sera élevée et conviviale au programmeur Java.
Pas propice au référencement
Parce que tout le contenu est acquis et rendu dynamiquement, les moteurs de recherche ne peuvent pas ramper.
Une solution est que pour l'accès normal des utilisateurs, le serveur répond au contenu de l'application AngularJS; Pour l'accès aux moteurs de recherche, il répond aux pages HTML spécifiquement pour le référencement.
Problèmes de performance
Comme le cadre MVVM, parce que la liaison bidirectionnelle des données est implémentée, il y aura des problèmes de performances pour les grandes tableaux et les objets complexes.
Méthodes qui peuvent être utilisées pour optimiser les performances des applications angulaires:
Réduire les éléments de surveillance (comme la liaison à sens unique pour les données qui ne changent pas)
Définissez activement l'index (spécifiez la piste par, les types simples s'utilisent comme index par défaut, et les objets utilisent $$ Hashkey par défaut, par exemple, changez en suivi par item.id)
Réduisez la quantité de données rendues (comme la pagination ou récupérer une petite partie des données à chaque fois et la récupérer au besoin)
Aplatissement des données (par exemple, pour les structures d'arborescence, utilisent des structures d'aplatissement pour construire une carte et des données d'arbre. Lorsque vous fonctionnez sur l'arborescence, car la même référence que les données plates, les modifications des données de l'arborescence seront synchronisées avec les données plates d'origine)
De plus, pour Angular1.x, il y a des problèmes de vérification sale et de mécanisme de module.
Mobile
Ionic peut être essayé, mais ce n'est pas parfait.
Comment voir le point de vue de Peter-Paul Koch sur Angular en janvier 2015?
Comment considérez-vous le contrôleur comme une syntaxe introduite dans Angular 1.2?
L'avantage le plus fondamental
Avant Angular 1.2, toute liaison sur la vue était directement liée à $ Scope
fonction myctrl ($ scope) {$ scope.a = 'aaa'; $ scope.foo = function () {...}}En utilisant Controlleras, pas besoin d'injecter à nouveau $ SCOPE, Controller devient un objet JavaScript très simple (POJO), un ViewModel plus pur.
fonction myctrl () {// Utilisez la machine virtuelle pour capturer cela pour éviter les fonctions internes provoquant la modification du contexte lors de l'utilisation de ce VAR VM = ceci; vm.a = 'aaa';}principe
Du point de vue de l'implémentation du code source, la syntaxe de Controlleras crée simplement un attribut sur $ scope avec l'alias AS par exemple de l'objet contrôleur.
if (Directive.Controlleras) {Locals. $ scope [directive.Controlleras] = ControLerInstance;}Cependant, en plus de rendre le contrôleur plus pojo mentionné ci-dessus, vous pouvez également éviter de rencontrer une fosse liée à la portée AngularJS (c'est-à-dire la fosse dans laquelle NG-IF génère une portée de premier niveau, qui est en fait une fosse dans l'héritage du type médian de la chaîne prototype javascrip existe).
<div ng-controlller = "testctrl as vm"> <p> {{name}} </p> <div ng-if = "vm.name"> <input type = "text" ng-model = "vm.name"> </ div> </ div>question
Un problème que vous rencontrerez avec Controlleras est que, car aucune gamme $ n'est injectée, des méthodes sous $ émit, $ Broadcast, $ on, $ watch, etc. ne peuvent pas être utilisées. Ces opérations liées à l'événement peuvent être encapsulées et gérées uniformément, ou une portée $ est introduite dans un seul contrôleur pour un traitement spécial.
Contrôleur angulaire de référence comme syntaxe vs portée
Détails de "l'injection de dépendance" d'Angular
châtaigne
L'injection de dépendance est un modèle de conception logicielle qui vise à gérer les dépendances entre les codes et à réduire le couplage entre les composants.
Par exemple, si vous n'utilisez pas AngularJS, vous devrez peut-être le faire si vous souhaitez interroger les données de l'arrière-plan et l'afficher dans l'avant:
var animalbox = document.QuerySelector ('. Animal-box'); var httpRequest = {get: function (url, callback) {console.log (url + 'demanded'); var animaux = [«chat», «chien», «lapin»]; rappel (animaux); }} var render = fonction (el, http) {http.get ('/ api / animaux', fonction (animaux) {el.innerhtml = animaux;})} render (httprequest, animalbox);Cependant, si les paramètres ne sont pas adoptés lorsque le rendu est appelé, comme les suivants, une erreur sera signalée car El et HTTP ne peuvent pas être trouvés (la dépendance est définie et la dépendance ne sera pas automatiquement trouvée lors de l'exécution)
rendre();
// TypeError: Impossible de lire la propriété «Get» non définie
Et en utilisant AngularJS, vous pouvez le faire directement
fonction myctrl = ($ scope, $ http) {$ http.get ('/ api / animaux'). Success (function (data) {$ scope.animals = data;})}En d'autres termes, lorsque l'application Angular est en cours d'exécution, MyCtrl est appelé et deux dépendances, $ Scope et $ http sont automatiquement injectés.
principe
AngularJS déduit le nom du service de dépendance via le nom du paramètre du constructeur et utilise toString () pour trouver la chaîne correspondante correspondant à cette fonction définie, puis analyse les paramètres (dépendances) dans la régularité, puis obtient la dépendance correspondante dans la carte de dépendance, et l'instaute et la transmet.
Pour le simplifier, c'est probablement comme ceci:
var inject = {// Storage Dependency Mapping Relationship Storage: {}, // Enregistrer le registre de dépendance: fonction (nom, ressource) {this.storage [name] = ressource; }, // analyse la dépendance et l'appel Resolve: fonction (cible) {var self = this; var fn_args = / ^ fonction / s * [^ / (] * / (/ s * ([^ /)] *) /) / m; var strip_comments = /( (////.*$)|| (///**/S/S PRODUCTION*?/*//))/MG; fnText = Target.ToString (). Remplace (strip_comments, ''); argdecl = fntext.match (fn_args) [1] .split (/ ,? / g); var args = []; argDecl.ForEach (fonction (arg) {if (self.storage [arg]) {args.push (self.storage [arg]);}}) return function () {Target.Apply ({}, args); }}}À l'aide de cet injecteur, le châtaignier précédent qui n'utilise pas AngularJS peut être appelé après l'avoir modifié.
inject.register ('el', animalbox); inject.register ('ajax', httprequest); reender = inject.Resolve (render); reender ();question
Étant donné que l'injecteur AngularJS suppose que le nom du paramètre de la fonction est le nom de la dépendance, puis recherche la dépendance, si la dépendance est injectée comme dans le châtaignier précédent, une fois le code compressé (les paramètres sont renommés), la dépendance ne peut être trouvée.
// fonction myctrl = ($ scope, $ http) {...} // fonction myctrl = (a, b) {...}Par conséquent, les deux méthodes suivantes sont généralement utilisées pour injecter des dépendances (il existe des exigences pour l'ordre dans lequel les dépendances sont ajoutées).
Méthode d'annotation du tableau
myApp.Controller ('myctrl', ['$ scope', '$ http', fonction ($ scope, $ http) {...}])Inject de $ explicite
myApp.Controller ('myctrl', myctrl); fonction myctrl = ($ scope, $ http) {...} myctrl. $ inject = ['$ scope', '$ http'];Remplir
Pour un conteneur Di, trois éléments doivent être inclus: l'enregistrement des dépendances, la déclaration de dépendances et l'acquisition d'objets.
Dans AngularJS, le module et les $ fournis peuvent fournir l'enregistrement des dépendances; L'injecteur intégré peut obtenir des objets (compléter automatiquement l'injection de dépendance); La déclaration de dépendances est comme mentionnée dans la question précédente.
Voici une châtaigne
// Pour le module, plus d'un paramètre est passé, ce qui signifie qu'un nouveau module est créé, et un tableau vide signifie aucune dépendance à l'égard des autres modules // il n'y a qu'un seul paramètre (nom du module), ce qui signifie obtenir le module // Définir MyApp, ajouter MyApp.Services comme sa dépendance angulaire Angular.module ('myApp.Services', []) // $ Provider a une usine, un service, un fournisseur, une valeur, une constante // de définir un service httpserviceAngular.Module ('MyApp.Services'). Service ('httpService', [$ http ', function ($ http) {...}]))se référer à
[AngularJS] implémentez une simple injection de dépendance par vous-même
Comprendre les modules et les injecteurs en angulaire, c'est-à-dire l'injection de dépendance
Injection de dépendance Scénario d'application pratique dans AngularJS
Comment voir Angular2
Par rapport à Angular1.x, Angular2 a apporté de grands changements et est presque un tout nouveau cadre.
En fonction de TypeScript (qui peut être développé à l'aide de TypeScript), les types de langues solides sont plus bénéfiques lorsque les équipes de projet à grande échelle collaborent.
La composante améliore l'efficacité du développement et de la maintenance.
Il existe également des modules qui prennent en charge le chargement dynamique, les nouveaux routeurs, la prise en charge native des promesses, etc.
Il s'adresse aux futures normes et absorbe les avantages d'autres cadres, ce qui vaut la peine d'être attendu, mais il y a aussi plus de choses à apprendre (ES Next, TS, Rx, etc.).
Ce qui précède est une compilation des informations sur les questions d'entrevue AngularJS. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien pour ce site Web!