).scope() est en fait assez complexe. Cela vaut néanmoins la peine d'être lu, car les avertissements hilarants le compensent.

Erreur courante n ° 15: ne pas compter sur l'automatisation ou trop s'en remettre

Si vous suivez les tendances du développement front-end et êtes un peu paresseux - comme moi - alors vous essayez probablement de ne pas tout faire à la main. Garder une trace de toutes vos dépendances, traiter des ensembles de fichiers de différentes manières, recharger le navigateur après chaque enregistrement de fichier - il y a beaucoup plus à développer que le simple codage.

Vous utilisez donc peut-être bower et peut-être npm en fonction de la façon dont vous servez votre application. Il est possible que vous utilisiez grunt, gulp ou brunch. Ou bash, qui est aussi cool. En fait, vous avez peut-être commencé votre dernier projet avec un générateur Yeoman!

Cela conduit à la question: comprenez-vous tout le processus de ce que fait réellement votre infrastructure? Avez-vous besoin de ce que vous avez, surtout si vous venez de passer des heures à essayer de réparer la fonctionnalité de chargement du foie de votre serveur Web de connexion?

Prenez une seconde pour évaluer ce dont vous avez besoin. Tous ces outils ne sont là que pour vous aider, il n'y a pas d'autre récompense pour les utiliser. Les développeurs les plus expérimentés à qui je parle ont tendance à simplifier les choses.

Erreur commune n ° 16: ne pas exécuter les tests unitaires en mode TDD

Les tests ne rendront pas votre code exempt de messages d'erreur AngularJS. Ce qu'ils feront, c'est s'assurer que votre équipe ne rencontre pas de problèmes de régression tout le temps.

J'écris spécifiquement sur les tests unitaires ici, non pas parce que je pense qu'ils sont plus importants que les tests e2e, mais parce qu'ils s'exécutent beaucoup plus rapidement. Je dois admettre que le processus que je suis sur le point de décrire est très agréable.

Développement piloté par les tests en tant qu'implémentation pour par exemple gulp-karma runner, exécute essentiellement tous vos tests unitaires à chaque sauvegarde de fichier. Ma façon préférée d'écrire des tests est d'écrire d'abord des assurances vides:

angular.reloadWithDebugInfo()

Après cela, j'écris ou refactorise le code réel, puis je reviens aux tests et remplis les assurances avec le code de test réel.

L'exécution d'une tâche TDD dans un terminal accélère le processus d'environ 100%. Les tests unitaires s'exécutent en quelques secondes, même si vous en avez beaucoup. Enregistrez simplement le fichier de test et le coureur le récupérera, évaluera vos tests et fournira des commentaires instantanément.

Avec les tests e2e, le processus est beaucoup plus lent. Mon conseil - divisez les tests e2e en suites de tests et exécutez-les un à la fois. Protractor les prend en charge, et voici le code que j'utilise pour mes tâches de test (j'aime gulp).

var injector = $(document.body).injector(); var someService = injector.get('someService');

Erreur commune n ° 17: ne pas utiliser les outils disponibles

A - Points d'arrêt chromés

Les outils de développement Chrome vous permettent de pointer vers un endroit spécifique dans l'un des fichiers chargés dans le navigateur, de suspendre l'exécution du code à ce stade et d'interagir avec toutes les variables disponibles à partir de ce point. C'est beaucoup! Cette fonctionnalité ne vous oblige pas du tout à ajouter du code, tout se passe dans les outils de développement.

Non seulement vous avez accès à toutes les variables, mais vous voyez également la pile des appels, les traces de la pile d'impression, etc. Vous pouvez même le configurer pour qu'il fonctionne avec des fichiers minifiés. En savoir plus Ici .

Il existe d'autres moyens d'obtenir un accès similaire au moment de l'exécution, par exemple en ajoutant Ng-init appels. Mais les points d'arrêt sont plus sophistiqués.

AngularJS vous permet également d'accéder à la portée via des éléments DOM (tant que ng-if est activé) et d'injecter les services disponibles via la console. Tenez compte des éléments suivants dans la console:

ng-repeat

ou pointez sur un élément de l'inspecteur, puis:

var ngInitDirective = ngDirective({ priority: 450, compile: function() { return { pre: function(scope, element, attrs) { scope.$eval(attrs.ngInit); } }; } });

Même si debugInfo n'est pas activé, vous pouvez faire:

var ngShowDirective = ['$animate', function($animate) { return { restrict: 'A', multiElement: true, link: function(scope, element, attr) { scope.$watch(attr.ngShow, function ngShowWatchAction(value) { // we're adding a temporary, animation-specific class for ng-hide since this way // we can control when the element is actually displayed on screen without having // to have a global/greedy CSS selector that breaks when other animations are run. // Read: https://github.com/angular/angular.js/issues/9103#issuecomment-58335845 $animate[value ? 'removeClass' : 'addClass'](element, NG_HIDE_CLASS, { tempClasses: NG_HIDE_IN_PROGRESS_CLASS }); }); } }; }];

Et ayez-le disponible après le rechargement:

Pour injecter et interagir avec un service depuis la console, essayez:

$watch

B - Chronologie Chrome

La chronologie est un autre excellent outil fourni avec les outils de développement. Cela vous permettra d'enregistrer et d'analyser les performances en direct de votre application au fur et à mesure que vous l'utilisez. La sortie montre, entre autres, l'utilisation de la mémoire, la fréquence d'images et la dissection des différents processus qui occupent le processeur: chargement, script, rendu et peinture.

Si vous constatez que les performances de votre application se dégradent, vous pourrez probablement en trouver la cause via l'onglet chronologie. Enregistrez simplement vos actions qui ont conduit à des problèmes de performances et voyez ce qui se passe. Trop d'observateurs? Vous verrez des barres jaunes prendre beaucoup de place. Fuite de mémoire? Vous pouvez voir la quantité de mémoire consommée au fil du temps sur un graphique.

Une description détaillée: https://developer.chrome.com/devtools/docs/timeline

C - Inspection des applications à distance sur iOS et Android

Si vous développez une application hybride ou une application Web réactive, vous pouvez accéder à la console de votre appareil, à l'arborescence DOM et à tous les autres outils disponibles via les outils de développement Chrome ou Safari. Cela inclut WebView et UIWebView.

Tout d'abord, démarrez votre serveur Web sur l'hôte 0.0.0.0 afin qu'il soit accessible depuis votre réseau local. Activez l'inspecteur Web dans les paramètres. Ensuite, connectez votre appareil à votre bureau et accédez à votre page de développement local, en utilisant l'adresse IP de votre machine au lieu du 'localhost' normal. C’est tout ce qu’il vous faut, votre appareil devrait maintenant être accessible depuis le navigateur de votre ordinateur.

Ici sont les instructions détaillées pour Android Et pour iOS, des guides non officiels se trouvent facilement via google.

J'ai récemment eu une bonne expérience avec browserSync . Cela fonctionne de la même manière que livereload, mais il synchronise également tous les navigateurs qui affichent la même page via browserSync. Cela inclut les interactions de l'utilisateur telles que le défilement, le clic sur des boutons, etc. Je regardais la sortie du journal de l'application iOS tout en contrôlant la page sur l'iPad depuis mon bureau. Cela a bien fonctionné!

Erreur courante # 18: ne pas lire le code source sur l'exemple NG-INIT

// when in doubt, comment it out! :) , d'après le son de celui-ci, devrait être similaire à

|_+_|
et
|_+_|
, non? Vous êtes-vous déjà demandé pourquoi la documentation contenait un commentaire indiquant qu'il ne devrait pas être utilisé? IMHO qui était surprenant! Je m'attendrais à ce que la directive initialise un modèle. C'est également ce qu'il fait, mais… il est implémenté d'une manière différente, c'est-à-dire qu'il ne surveille pas la valeur de l'attribut. Vous n'avez pas besoin de parcourir le code source AngularJS - laissez-moi vous l'apporter:

|_+_|

Moins que ce à quoi vous vous attendiez? Tout à fait lisible, en plus de la syntaxe maladroite des directives, n'est-ce pas? La sixième ligne est de quoi il s'agit.

Comparez-le à ng-show:

|_+_|

Encore une fois, la sixième ligne. Il y a un

|_+_|
là, c’est ce qui rend cette directive dynamique. Dans le code source AngularJS, une grande partie de tout le code sont des commentaires qui décrivent du code qui était pour la plupart lisible depuis le début. Je pense que c'est un excellent moyen d'en apprendre davantage sur AngularJS.

Conclusion

Ce guide couvrant les erreurs AngularJS les plus courantes est presque deux fois plus long que les autres guides. Il s'est avéré ainsi naturellement. La demande d'ingénieurs frontaux JavaScript de haute qualité est très élevée. AngularJS est si chaud en ce moment , et il occupe depuis quelques années une position stable parmi les outils de développement les plus populaires. Avec AngularJS 2.0 en route, il dominera probablement dans les années à venir.

Ce qui est génial avec le développement frontal, c'est qu'il est très gratifiant. Notre travail est visible instantanément et les gens interagissent directement avec les produits que nous livrons. Le temps passé à apprendre JavaScript , et je pense que nous devrions nous concentrer sur le langage JavaScript, est un très bon investissement. C'est la langue d'Internet. La concurrence est super forte! Il y a un objectif pour nous: l'expérience utilisateur. Pour réussir, nous devons tout couvrir.

a(n) _____ agent peut être utilisé pour remplir automatiquement des formulaires Web.

Le code source utilisé dans ces exemples peut être téléchargé à partir de GitHub . N'hésitez pas à le télécharger et à le personnaliser.

Je voulais donner des crédits à quatre développeurs d'édition qui m'ont le plus inspiré:

Je voulais également remercier toutes les personnes formidables sur les canaux FreeNode #angularjs et #javascript pour de nombreuses excellentes conversations et un support continu.

Et enfin, rappelez-vous toujours:

|_+_|