L'idée principale d'Angular est de tout conduire à travers les données, et tout le reste est une extension des données.
Pour appliquer l'idée que tout est un objet, on peut dire dans Angular que tout est des données.
À propos de la construction du projet
(1) requirejs et yeoman
Lorsque vous entrez ou utilisez Angular pour la première fois, vous serez toujours perplexe avec des questions similaires. Ma réponse pratique est que vous n'avez pas besoin de requis ou de yeoman. Le premier n'est pas utilisé car Angular lui-même a la mise en œuvre du module. Ce dernier est dû au fait que la structure organisationnelle angulaire et la construction de projets ne sont complètement pas nécessaires pour être si compliqués. Écrivez simplement ou tirez un projet de semences sur Github.
(2) comment organiser la structure du projet
Ce problème est un peu inutile car il varie complètement d'une personne à l'autre à un projet. Je recommande personnellement deux structures organisationnelles, une selon la fonction de code, c'est-à-dire que le contrôleur est placé dans un dossier et les services sont placés dans un dossier. L'autre suit les fonctions implémentées. Par exemple, l'utilisateur place le modèle, les services et les contrôleurs correspondants du dossier utilisateur.
Les deux sont OK, et du point de vue de la maintenance, le second sera meilleur.
(3) Division du contrôleur et du service
Ici, les contrôleurs sont généralement un contrôleur sur une page. Si une page a une partie commune, la partie publique utilise toujours un contrôleur. Le service doit être divisé en deux parties, l'une est un service qui interagit avec les données du serveur, et l'autre est un contenu commun fonctionnel, qui place certains services réutilisables écrits par eux-mêmes, similaires à notifier, etc.
Quant à savoir si le service doit être divisé en plus des fonctions et des modules, cela dépend du projet.
(4) Utilisation de plug-ins angulaires et de bibliothèques
Il n'est certainement pas réaliste qu'un projet se prépare en ligne, mais il est encore plus irréaliste de tout écrire vous-même. De nombreux plug-ins en angulaire sont développés par l'équipe angulaire ou certaines personnes encapsulées avec des plug-ins jQuery. Ma vue sur les plug-ins est très simple. Si vous les utilisez, vous pouvez les utiliser dès que possible. Si vous ne pouvez pas répondre aux besoins, vous pouvez les écrire vous-même ou les améliorer sur les plug-ins existants.
Pour les plug-ins que vous ne pouvez pas gérer pour quelques heures de débogage, écoutez mes conseils et abandonnez-les. La plupart des plug-ins sont des plug-ins d'interface utilisateur, vous n'avez donc pas à poursuivre la complexité. Parfois, les contrôles HTML simples ont également leur propre beauté simple.
Si vous rencontrez des conflits de plugin angulaires, en particulier les plugins d'interface utilisateur, vous devez en abandonner l'un dans la plupart des cas, comme Angular-UI et Angular Strap.
Conseils d'utilisation
En entrant dans le texte principal ci-dessous, je vais énumérer certaines des techniques que j'ai utilisées dans le processus d'utilisation d'Angular, et je les énumérerai une par une sous la forme d'une scène. Je n'expliquerai pas quelques concepts de base d'Angular ici. Cet article est une chose habile, pas un tutoriel de base.
(1) Conflit flacon entre "{{}}" dans Angular et Python
Dans le modèle utilisé par le ballon de Python, la liaison des données est également transmise à travers deux "{" accolades, qui entre en conflit avec la liaison des données d'Angular. Il y a deux solutions à cela. L'un consiste à modifier la marque de liaison de l'Angular, et l'autre est de modifier la marque de liaison du flacon. Les deux solutions sont données ici.
Modifier Angular:
$ interpolateprovider.startsymbol ('{[{'). Endingymbol ('}]}');
// Ajoutez simplement cette phrase pour configurer et le mettre dans le module d'itinéraire. Ici, vous modifiez la liaison angulaire d'origine {{}} à la liaison {[{}]]} à la liaison {[{}]}.
Modifier le ballon:
Class Customflask (Flask): jinja_options = flask.jinja_options.copy () jinja_options.update (dict (block_start_string = '{%', block_end_string = '%}', variable_start_string = '{#', variable_string = '#}', comment_start = '<#' ', # #}', comment_start = '<# #'string =' #} ', comment_START =', variable_string = '#}', comment_START = '' <#Send_String = '#}', comment_START = ', variable_string =' #} ', comment_START =' <# '', # #} ', COMPOS comment_end_string = '#>',)) App = Customflask (__ name__, instance_path = '/ web')Ici, je recommande de modifier le ballon, car après avoir utilisé Angular, les extrémités avant et arrière sont séparées. Le modèle Jinjia de Flask n'est plus nécessaire. En même temps, si vous modifiez la balise de liaison angulaire, d'autres contrôles et bibliothèques auront des problèmes.
(2) Supprimer l'URL toujours par défaut "#"
Lorsque vous définissez l'itinéraire, activez le mode HTML5.
angular.module ('router', ['ngoute']). config (['$ routeProvider', '$ locationprovider', fonction ($ rateProvider, $ locationprovider) {$ locationprovider.html5Mode (true); // définir cette phrase}]);(3) ng-Click = "Expression" et des instructions similaires, comment écrire plusieurs expressions dans l'expression?
Par exemple, si je souhaite attribuer des valeurs à 2 variables dans un clic Ng, je peux le diviser via le ";" SEMICOLON:
<a ng-click = "obja = 1; objb = 2"> </a>
(4) $ watch n'a aucun effet ou ne prend effet qu'une seule fois
De manière générale, cette situation apparaîtra lors de l'écoute d'une chaîne ou d'un numéro, $ scope. $ Watch ("name", function () {}). Il ne prend pas effet ou ne prend effet qu'une seule fois. La solution est que $ watch écoute autant que possible un objet et attache la valeur que vous souhaitez écouter dans un objet.
Lorsque vous utilisez Modal dans Angular-UI, c'est plus évident. La raison spécifique est due à l'héritage de $ Scope. Parce que le modal équivaut à créer une autre portée dans le contrôleur de la page actuelle, il est impossible de récupérer et de tracer la chaîne prototype pour les littéraux. Si vous souhaitez le résoudre, vous devez avoir un objet pour obtenir la liaison de rafraîchissement des données à travers la portée parent-enfant via la chaîne prototype.
(5) J'espère que le contenu de Ng-View s'affiche sur toute la page
Habituellement, une page peut avoir un menu supérieur ou une barre latérale fixe, ces pièces fixes, puis chaque itinéraire modifie le modèle de NG-View. Si une page souhaite que la page entière s'affiche complètement, elle n'inclut pas les pièces fixes telles que le haut-menu.
Voici généralement un modèle.html affiché par un index.html et un ng-view. Top-menu et la barre latérale sont situés dans index.html. Leur écran est masqué en liant une variable à un ng-if.
Si une page doit être entièrement affichée par elle-même et n'affiche pas la barre latérale, alors un message est envoyé dans son contrôleur via $ Scope. $ Emit, et le contrôleur de la page d'index écoute le message via $ scope. $ On. Une fois le message entendu, les variables qui contrôlent la barre latérale visible et cachée sont modifiées.
Vous pouvez également utiliser le service pour contrôler une variable globale, et les recommandations personnelles sont toujours via la diffusion de messages.
(6) N'oubliez pas d'utiliser ng-si au lieu de ng-show
Il s'agit d'une petite fosse angulaire, ou on peut dire être une fosse qui n'est ni grande ni petite. Certaines données de liste longues peuvent être affichées par défaut masquées et cliquer sur l'affichage. Cette partie du contenu qui peut contrôler le visible et le caché s'accompagnera également de beaucoup de liaison de données. Cela affecte considérablement les performances lors du rendu de la page.
Prenez une liste. Par exemple, Angular recommande généralement qu'une page n'ait pas plus de 2 000 données. S'il y a une page qui lie directement 2 000 modèles, puis vous le chargez, vous constaterez qu'il est très coincé. Si vous définissez tous les 100 modèles sur NG-show, il ne s'affiche pas par défaut, vous constaterez qu'il est toujours très coincé.
Ensuite, vous remplacez tous les NG-show par NG-IF, et vous constaterez que les performances sont instantanément rapides comme deux applications. La raison en est que NG-Show exécutera toujours toutes les liaisons, et NG-IF exécutera des liaisons lorsqu'elle sera égale à True, c'est-à-dire qu'elle exécutera les liaisons lors de son affichage. Cela améliorera considérablement les performances. J'ai déjà utilisé cette modification simple et la page a été chargée environ 10 fois plus rapidement.
Ainsi, lorsque vous pouvez utiliser ng-if, utilisez-le au lieu de tous les NG-spectacle et ng-hide.
(7) sur Ng-Bind-HTML
Habituellement, les données sont liées aux éléments HTML, et Ng-Bind est suffisant, mais dans certaines situations, ce qui doit être lié n'est pas des données ordinaires, mais HTML. Alors Ng-Bind ne suffit pas. Vous devez utiliser NG-Bind-HTML, qui sortira le contenu sous forme de format HTML. Par exemple, si vous souhaitez sortir HTML avec la classe, utilisez NG-Bind-HTML et que la coopération de Ngsanitize est requise et le fichier correspondant doit être introduit.
(8) Obtenez le résultat après le filtre de données NG-REPAT
Ceci est généralement utilisé lors de la recherche, tels que plusieurs données Ng-Repeat formant une liste. Ensuite, filtrez un champ, et maintenant vous devez obtenir le résultat après le filtre, il y a 2 façons.
L'un est écrit en html ng-répat comme ceci:
ng-repeat = "Food in FoodCategory._DisplayFoods = (FoodCategory.foods | Filter: {'name': searchObj.foodfilter} | orderby: food.sort_order)"
De cette façon, _displayFoods est le résultat d'affichage final après filtre. Une autre façon consiste à utiliser deux ensembles de données, un ensemble est écrit dans le contrôleur, puis le filtre et la commande sont opérés dans le contrôleur. Le résultat final est utilisé pour Ng-Repeat.
La première méthode est plus pratique, tandis que la deuxième méthode est meilleure et que les performances sont bonnes.
(9) Ng-Class et Ng-style attribuent des valeurs en jugeant
Déterminez s'il faut appliquer une certaine classe et différents styles en fonction de la valeur de la variable.
ng-class = "{'State-Error' :! FoodForm.foodstock. $ valide}"
ng-syle = "{couleur: i.color == '' || i.name == 'live'? 'Default': '#ffff'}"
(10) La vérification du formulaire prend l'entrée comme exemple
Le formulaire angulaire peut être vérifié via l'attribut HTML5 de l'entrée. Ici, il est principalement verrouillé via les attributs de nom et de nom d'entrée. FormName.inputName. $ Valid indique si l'espace où le nom est InputName transmet sa propre vérification d'attribut.
(11) $ Promise pour $ ressource et $ http
$ q.all ([Resource.Query (). $ promesse, Resource2.Query (). $ promesse]). alors (Functon (succès) {console.log (succès);}, Functon (erreur) {console.log (error);}); foodfactory.food.save (f). $ promed.then (fonction (résultat) { foodfactory.food.get ({id: result.id}). $ promesse.then (fonction (data) {});});Ce n'est pas expliqué, il suffit de le lire directement. Notez que la promesse de $ http doit être retournée manuellement, donc en général, elle passe $ ressource.
(12) Une seule propriété dans la montre $ écoute pour
Définissez le troisième paramètre de $ Watch sur True to Deep Watch. Cependant, parfois, vous ne voulez pas ou avez besoin d'écouter toutes les propriétés de la collection. Surveillez simplement un ou plusieurs d'entre eux, bien que vous puissiez faire bouclez $ surveiller à travers la boucle, c'est évidemment trop frustrant.
Grâce à la méthode d'écriture suivante, vous pouvez surveiller une propriété d'objet unique d'une collection.
$scope.people = [ { "groupname": "g1", "persions": [ { "id": 1, "name": "bill" }, { "id": 2, "name": "bill2" } ] }, { "groupname": "g2", "persions": [ { "id": 3, "name": "bill3" }, { "id": 4, "nom": "bill4"}]}] $ scope. $ watch (function ($ scope) {return $ scope.people.map (function (obj) {return obj.persions.map (function (g) {return g.name});});}, function (newval) {$ scope.count ++; $ scope.msg = 'personne a été changé. $ scope.Count;}, true);(13) déboucher
Ceci est très utile pour le traitement fréquent de départ et convient à certains scénarios comme Ng-Change et $ watch. Par exemple, lorsque la recherche de mots clés est éliminée, $ Debounce est encapsulé en tant que service et l'interface est appelée directement. Code: http://jsfiddle.net/warspawn/6k7kd/
(14) Localisez rapidement vers un emplacement
De manière générale, la page peut être combinée avec du code JS pour obtenir un positionnement rapide via le formulaire <a id = "inférieur"> </a>. Dans Angular, il est également mis en œuvre par des principes similaires, et le code est le suivant:
var old = $ location.hash (); $ emplacement.hash («BatchMenu-Bottom»); $ anCHORSCROLL (); $ emplacement.hash (vieux);
En effet, l'emplacement direct. Hash provoquera des modifications de l'URL et des sauts de page, donc un code pour empêcher le saut est ajouté.
J'ai tellement résumé pour le moment. Beaucoup de choses sont recherchées des informations et pratiquées par moi-même. J'espère qu'ils seront utiles au TX dont vous avez besoin. S'il y a une nouvelle chose à l'avenir, je continuerai à l'écrire.
Ce qui précède est un résumé des compétences d'application angulaire. Nous continuerons à ajouter et à organiser des articles pertinents à l'avenir. Merci pour votre soutien à ce site!