1. Quelle est la différence entre ng-show / ng-hide et ng-if?
Nous savons tous ng-show/ng-hide est en fait masqué et affiché via display . Et ng-if contrôle réellement l'ajout et la suppression des nœuds dom pour y parvenir. Par conséquent, si nous chargeons dom en fonction des différentes conditions, les performances de ng-if sont meilleures que ng-show .
2. Expliquez ce qu'est $ Rootscrope et la différence par rapport à $ Scope?
En termes simples, la page $rootScrope est tout le père de $scope .
Jetons un coup d'œil à générer $rootScope et $scope .
Étape 1: Angular parses ng-app et crée $rootScope en mémoire.
Étape2: Angular continuera d'analyser, trouver l'expression {{}} et l'analyser en une variable.
Étape 3: La div avec ng-controller sera ensuite analysée et pointée vers une fonction controller . À l'heure actuelle, controller devient une instance de l'objet $scope .
3. Comment fonctionne l'expression {{yourModel}}?
Cela dépend du service $interpolation . Après avoir initialisé la page HTML, il trouvera ces expressions et les marquera. Ainsi, chaque fois qu'il rencontre un {{}} , une $watch sera définie. $interpolation renvoie une fonction avec des paramètres de contexte. Enfin, la fonction est exécutée, et elle est considérée comme l'expression $parse à cette portée.
4. Quel est le cycle de digestion en angulaire?
Dans chaque cycle digest , Angular comparera toujours la valeur du model sur scope . Généralement, digest est automatiquement déclenché et nous pouvons également utiliser $apply pour le déclenchement manuel.
5. Comment annuler le temps mort $ et arrêter une montre $ ()?
Arrêtez $timeout nous pouvons utiliser cancel :
var personnalisésout = $ timeout (function () {// votre code}, 1000); $ timeout.cancel (personnalisétime);Arrêtez une montre $:
//. $ watch () renverra une fonction qui arrête la fonction d'enregistrement que nous stockons à une variable var deregisterwatchfn = $ rootscope. $ watch ('somegloballyavailableproperty', function (newVal) {if (newval) {// nous invitons cette fonction de degistration;6. Comment puis-je définir la restriction de la directive angulaire? Quelle est la différence entre @, = et dans la portée?
restrict peut être définie séparément:
Un attribut de match
E Match Tag
C CLASSE DE MATCH
M Match Commentaires
Bien sûr, vous pouvez définir plusieurs valeurs telles que AEC pour faire plusieurs correspondances.
Dans scope , @, = et s'exprime respectivement lors de l'exécution de la liaison de la valeur
@ Obtenez une chaîne définie, qui peut être définie par elle-même ou liée en utilisant {{yourModel}} ;
= Liaison bidirectionnelle, liaison de certaines propriétés sur scope ;
& est utilisé pour exécuter certaines expressions sur la scope des parents. Nous définissons certaines fonctions qui doivent être exécutées.
angular.module ('docsisolationxample', []) .Controller ('Controller', ['$ scope', function ($ scope) {$ scope.AlertName = function () {alert ('Direct Scope &');}}]). Directive ('MyCustomer', function () {return {restrict: 'e', SCOPE: ', "CLICKHANDLE:'", "E", SCOPE: "CLICKHANDLE:" Ics: "CLOCKHANDLE:" Ics: "CLOCKHANDLE:" CLOCKHANDLE, "," E ", SCOPE:" CLOCKHANDLE: "Icclusion:" E ". Template: '<Button ng-Click = "TestClick ()"> Cliquez sur moi </fruton>', Controller: Function ($ SCOPE) {$ SCOPE.TESTCLICK = FONCTION () {$ scope.clickHandle ();}}};});<div ng-app = "DocsisolationExample"> <div ng-controller = "Controller"> <my-customer click-handle = "alertname ()"> </ my-customer> </div> </div>
<Effectuer une liaison à sens unique.
7. Répertoriez au moins trois façons de réaliser la communication entre différents modules?
1. Service
2. Événements, spécifiez l'événement lié
3. Utilisez $ rootscope
4. Utiliser directement $ parent, $$ la tête d'enfants, etc. entre les contrôleurs
5. Directive Spécifie les attributs pour la liaison des données
8. Quelles mesures peuvent améliorer les performances angulaires
Recommandé officiellement, debug de clôture, $compileProvider
myApp.config (fonction ($ compileprovider) {$ compileprovider.debuginfoenabled (false);}); Utilisez une expression de liaison, c'est-à-dire {{::yourModel}}
Réduire le nombre d'observateurs
Évitez d'utiliser ng-repeat dans le chargement de défilement infini
Utilisez des gadgets de test de performances pour explorer vos problèmes de performances angulaires. Nous pouvons utiliser console.time() ou utiliser des outils de développeur et Batarang
Console.Time ("TIMERNAME"); // votre codeconSole.Timeend ("TIMERNAME");9. Pensez-vous qu'il est bon d'utiliser jQuery en Angular?
Il s'agit d'une question ouverte, et bien qu'il existe de nombreux débats de ce type sur Internet, on pense généralement que ce n'est pas une tentative particulièrement bonne. En fait, lorsque nous apprenons Angular, nous devons accepter l'idée d'Angular à partir de 0, la liaison des données, utiliser certaines des API qui accompagnent et l'organisation raisonnablement, rédiger des instructions et services connexes, etc. Angular est livré avec de nombreuses API qui peuvent remplacer complètement les API couramment utilisées dans jQuery. Nous pouvons utiliser Angular.Element, $ http, $ timeout, ng-it, etc.
Nous pourrions aussi bien changer la perspective. Si les besoins de l'entreprise sont nécessaires et que pour un nouveau venu (plus familier avec JQuery), peut-être que votre introduction de jQuery peut aider à résoudre des problèmes, tels que l'utilisation de plug-ins, bien sûr, il s'agit d'améliorer l'efficacité du travail en affectant l'organisation du code. Avec l'approfondissement de la compréhension de l'angulaire, certains des codes qui ont été introduits lorsque jQuery sera progressivement abandonné pendant la reconstruction. (?Po est une telle personne. J'espère que vous ne serez pas ridiculisé, mais l'entreprise est chassée)
Je pense donc qu'il est vraiment mal de dire que les deux cadres ne peuvent pas être utilisés ensemble, mais nous devons toujours faire de notre mieux pour suivre le design angulaire.
10. Comment effectuer des tests unitaires angulaires
Nous pouvons utiliser Karam + Jasmine pour les tests unitaires. Nous introduisons l'application angulaire via NGMOCK puis ajoutons nos cas de test par nous-mêmes. Un code de test simple:
décrire ('calculatrice', function () {beforeEach (module ('calculaterApp')); var $ contrôleur; beforeEach (inject (function (_ $ contrôleur _) {$ contrôleur = _ $ contrôleur_;})); décrire ('sum', function () {it ('1 + 1 devrait être égal 2', function () {var $ scope = {}; Var Contrôler = $ Controller ('CalculatorContraire', {$ Scope: $ Scope}); $ Scope.x = 1;11. Résumé
Ce qui précède est l'intégralité du contenu de cet article. J'espère que cela sera utile à l'étude et au travail de chacun. Si vous avez des questions, veuillez laisser un message à discuter.