Die Kernidee von Angular besteht darin, alles durch Daten zu treiben, und alles andere ist eine Erweiterung der Daten.
Um die Idee anzuwenden, dass alles ein Objekt ist, kann es in Angular sagen, dass alles Daten sind.
Über Projektbau
(1) Forderung und Yeoman
Wenn Sie angular zum ersten Mal eingehen oder an Angular verwenden, werden Sie immer mit ähnlichen Fragen verwirrt sein. Meine praktische Antwort lautet, dass Sie keine Anforderungen oder Yeoman benötigen. Ersteres wird nicht verwendet, da Angular selbst die Implementierung des Moduls hat. Letzteres liegt daran, dass die Winkelorganisationsstruktur und die Projektkonstruktion völlig unnötig sind, um so kompliziert zu sein. Schreiben Sie einfach ein Saatgutprojekt auf GitHub.
(2) Wie man Projektstruktur organisiert
Dieses Problem ist etwas nutzlos, da es von Person zu Person zu Projekt vollständig unterschiedlich ist. Ich persönlich empfehle zwei organisatorische Strukturen, eine gemäß der Codefunktion, dh der Controller wird in einem Ordner platziert und die Dienste werden in einem Ordner platziert. Der andere folgt den implementierten Funktionen. Beispielsweise platziert der Benutzer die entsprechende Vorlage, Dienste und Controller im Benutzerordner.
Beide sind in Ordnung, und aus Sicht der Wartung wird der zweite besser.
(3) Abteilung von Controller und Service
Hier sind Controller normalerweise ein Controller auf einer Seite. Wenn eine Seite einen gemeinsamen Teil hat, verwendet der öffentliche Teil immer einen Controller. Der Dienst sollte in zwei Teile unterteilt werden, einer ist ein Dienst, der mit den Serverdaten interagiert, und der andere ist ein funktionaler gemeinsamer Inhalt, in dem einige von sich selbst wiederverwendbare Dienste vorgestellt werden, ähnlich wie die Benachrichtigung usw.
Ob der Dienst nach Funktionen und Modulen weiter unterteilt werden sollte, hängt vom Projekt ab.
(4) Verwendung von Winkel-Plug-Ins und Bibliotheken
Es ist definitiv nicht realistisch, dass ein Projekt online vorgefertigte Dinge erledigt, aber es ist noch unrealistischer, alles selbst zu schreiben. Viele Plug-Ins in Angular werden vom Angular-Team oder einigen Personen entwickelt, die mit JQuery-Plug-Ins eingekapselt sind. Meine Ansicht auf Plug-Ins ist sehr einfach. Wenn Sie sie verwenden, können Sie sie so schnell wie möglich verwenden. Wenn Sie die Anforderungen nicht erfüllen können, können Sie sie selbst schreiben oder sie auf vorhandenen Plug-Ins verbessern.
Für Plug-Ins, die Sie für ein paar Stunden Debugging nicht bewältigen können, hören Sie sich bitte meinen Rat an und geben Sie sie auf. Die meisten Plug-Ins sind UI-Plug-Ins, sodass Sie keine Komplexität verfolgen müssen. Manchmal haben einfache HTML -Kontrollen auch ihre eigene einfache Schönheit.
Wenn Sie auf Winkel-Plugin-Konflikte, insbesondere UI-Plugins, begegnen, sollten Sie in den meisten Fällen einen von ihnen aufgeben, wie z. B. Angular-UI und Winkelstrap.
Nutzungstipps
Wenn ich den folgenden Haupttext eingehe, werde ich einige der Techniken auflisten, die ich bei der Verwendung von Angular verwendet habe, und sie nacheinander in Form einer Szene auflisten. Ich werde hier einige grundlegende Konzepte von Angular nicht erklären. Dieser Artikel ist eine geschickte Sache, kein grundlegendes Tutorial.
(1) Flaskkonflikt zwischen "{{}}" in Angular und Python
In der von Pythons Kolben verwendeten Vorlage werden auch die Datenbindung durch zwei "{" -Anklammern übergeben, die mit der Datenbindung von Angular in Konflikt stehen. Dies gibt zwei Lösungen. Einer besteht darin, die Bindungsmarke des Angulars zu modifizieren, und das andere ist, die Bindungsmarke des Kolbens zu modifizieren. Beide Lösungen werden hier angegeben.
Angular ändern:
$ interpolateProvider.StartSymbol ('{[{'). Endymbol ('}]}');
// Fügen Sie diesen Satz einfach zur Konfiguration hinzu und legen Sie ihn in das Routenmodul. Hier ändern Sie die ursprüngliche Angular {{}} Bindung an {[{}]} Bindung an {[{}]} Bindung.
Kolben ändern:
class CustomFlask(Flask): jinja_options = Flask.jinja_options.copy() jinja_options.update(dict( block_start_string='{%', block_end_string='%}', variable_start_string='{#', variable_end_string='#}', comment_start_string='<#', comment_end_string = '#>',)) app = customFlask (__ name__, instance_path = '/web'))Hier empfehle ich, den Kolben zu modifizieren, da nach der Verwendung von Angular die vorderen und hinteren Enden getrennt sind. Die Jinjia -Vorlage von Flask wird nicht mehr benötigt. Gleichzeitig haben andere Steuerelemente und Bibliotheken Probleme, wenn Sie das Winkelbindungs -Tag ändern.
(2) Entfernen Sie die URL immer standardmäßig auf "#".
Aktivieren Sie beim Einstellen der Route den HTML5 -Modus.
Angular.module ('Router', ['nGroute']). config (['$ roouteProvider', '$ locationProvider', Funktion ($ roouteProvider, $ locationProvider) {$ locationProvider.html5mode (true); // Set diesen Satz}]);(3) ng-klick = "Ausdruck" und ähnliche Anweisungen, wie schreibe ich mehrere Ausdrücke in Ausdruck?
Wenn ich beispielsweise 2 Variablen in einem NG-Klick Werte zuweisen möchte, kann ich sie durch das "" aufteilen. Semikolon:
<a ng-klick = "obja = 1; objb = 2"> </a>
(4) $ watch hat keinen Einfluss oder nimmt nur einmal wirksam
Im Allgemeinen wird diese Situation angezeigt, wenn Sie sich eine Zeichenfolge oder Nummer, $ scope. $ Watch ("name", function () {}) anhören. Es wird nicht wirksam oder nur einmal wirksam. Die Lösung ist, dass $ Watch ein Objekt so weit wie möglich hört und den Wert anfängt, den Sie in einem Objekt anhören möchten.
Wenn Sie Modal in Angular-UI verwenden, ist dies offensichtlicher. Der spezifische Grund ist die Erbe von $ Scope. Da Modal gleichbedeutend mit der Erstellung eines weiteren Bereichs in der Controller der aktuellen Seite ist, ist es unmöglich, die Prototypkette für Literale abzurufen und zu verfolgen. Wenn Sie es lösen möchten, müssen Sie über ein Objekt verfügen, um die Daten-Aktualisierungsbindung über die übergeordnete Kindheit über die Prototypkette zu erreichen.
(5) Ich hoffe, der Inhalt von NG-View wird auf der gesamten Seite angezeigt
Normalerweise hat eine Seite möglicherweise eine feste obere Menu oder Seitenleiste wie feste Teile, und dann ändert jede Route die Vorlage von NG-View. Wenn eine Seite die gesamte Seite selbst vollständig anzeigt, enthält sie keine festen Teile wie die Top-Menu.
Hier ist normalerweise eine Vorlage. Top-Menu und Sidebar befinden sich in Index.html. Ihre Anzeige wird versteckt, indem eine Variable an ein ng-if binden.
Wenn eine Seite von selbst vollständig angezeigt werden muss und keine Seitenleiste angezeigt wird, wird eine Nachricht in ihrem Controller über $ scope. Sobald die Nachricht gehört wird, werden die Variablen, die die sichtbare und versteckte Seitenleiste steuern, geändert.
Sie können auch Service verwenden, um eine globale Variable zu kontrollieren, und persönliche Empfehlungen erfolgen immer noch über Nachrichtenübertragung.
(6) Denken Sie daran, NG-wenn anstelle von NG-Shows zu verwenden
Dies ist eine kleine Winkelgrube, oder es kann gesagt werden, dass es sich um eine Grube handelt, die nicht groß oder klein ist. Einige lange Listendaten können standardmäßig versteckt angezeigt und auf die Anzeige klicken. Dieser Teil des Inhalts, der das sichtbare und verborgene steuern kann, wird auch von vielen Datenbindung begleitet. Dies beeinflusst die Leistung bei der Rendern der Seite stark.
Nehmen Sie eine Liste. Beispielsweise empfiehlt Angular normalerweise, dass eine Seite nicht mehr als 2.000 Datenbindung aufweist. Wenn es eine Seite gibt, die direkt 2.000 Modelle bindet, und dann laden Sie sie, werden Sie feststellen, dass sie sehr festgefahren ist. Wenn Sie alle 100 Modelle auf ng-show einstellen, werden Sie standardmäßig nicht angezeigt, und Sie werden feststellen, dass es immer noch sehr festgefahren ist.
Dann ersetzen Sie alle NG-Shows durch NG-wenn und werden feststellen, dass die Leistung wie zwei Anwendungen sofort schnell ist. Der Grund dafür ist, dass NG-Show weiterhin alle Bindungen ausführt und NG-IF Bindungen ausführt, wenn sie gleich wahr ist, dh die Bindungen ausführen, wenn sie angezeigt wird. Dies wird die Leistung erheblich verbessern. Ich habe diese einfache Modifikation zuvor verwendet und die Seite etwa 10 -mal schneller geladen.
Wenn Sie also NG-wenn verwenden können, verwenden Sie es anstelle von allen NG-Shows und Ng-Hide.
(7) Über Ng-Bind-HTML
Normalerweise sind Daten an HTML-Elemente gebunden, und NG-Bind reicht aus, aber in einigen Situationen müssen nicht gewöhnliche Daten, sondern HTML gebunden werden. Dann reicht Ng-Bind nicht aus. Sie müssen NG-Bind-HTML verwenden, wodurch der Inhalt als HTML-Format ausgegeben wird. Wenn Sie beispielsweise HTML mit der Klasse ausgeben möchten, verwenden Sie NG-Bind-HTML, und die Zusammenarbeit von NGSanitize ist erforderlich, und die entsprechende Datei muss eingeführt werden.
(8) Erhalten Sie das Ergebnis nach dem Datenfilter der NG-Wiederholung
Dies wird im Allgemeinen bei der Suche verwendet, z. B. bei der Bildung von Daten mehrerer NG-Wiederholungen, die eine Liste bilden. Filter ein Feld und jetzt müssen Sie das Ergebnis nach dem Filter erhalten, es gibt 2 Wege.
Einer ist in HTML NG-Repeat wie folgt geschrieben:
ng-Repeat = "Food in foodcategory._displayfoods = (foodcategory.foods | filter: {'name': SearchObj.foodfilter} orderby: food.sort_order)"
Auf diese Weise ist _displayFoods das endgültige Anzeigeergebnis nach dem Filter. Eine andere Möglichkeit besteht darin, zwei Datensätze zu verwenden, ein Satz wird im Controller geschrieben und dann filter und orderby im Controller betrieben. Das Endergebnis wird zur NG-Wiederholung verwendet.
Die erste Methode ist bequemer, während die zweite Methode besser ist und die Leistung gut ist.
(9) NG-Klasse und NG-Stil zuweisen Werte durch Beurteilung
Bestimmen Sie, ob Sie eine bestimmte Klasse und verschiedene Stile anwenden sollen, basierend auf dem Wert der Variablen.
ng-class = "{'State-Fehler' :! foodform.foodStock. $ valid}"
ng-style = "{color: i.color == '' || i.name == 'live'? 'default': '#ffff'}"
(10) Die Formüberprüfung nimmt als Beispiel Eingabe an
Die Winkelform kann über das HTML5 -Attribut der Eingabe überprüft werden. Hier wird es hauptsächlich durch die Attribute "Form- und Eingabedamen" gesperrt. Formname.InputName.
(11) $ Versprechen für $ ressourcen und $ http
$ Q.All ([Resource.Query (). foodFactory.food.get ({id: result.id}).Dies wird nicht erklärt, lesen Sie es einfach direkt. Beachten Sie, dass das Versprechen von $ http manuell zurückgegeben werden muss, so dass es im Allgemeinen $ Resource übergeht.
(12) Nur eine Eigenschaft in der $ beobachtung hört auf
Legen Sie den dritten Parameter von $ watch auf the Deep Watch ein. Manchmal wollen oder müssen Sie jedoch nicht alle Eigenschaften der Sammlung anhören. Überwachen Sie einfach einen oder einige von ihnen, obwohl Sie $ $ durch die für die Loop beobachten können, ist dies offensichtlich zu frustrierend.
Über die folgende Schreibmethode können Sie eine einzelne Objekteigenschaft einer Sammlung überwachen.
$scope.people = [ { "groupname": "g1", "persions": [ { "id": 1, "name": "bill" }, { "id": 2, "name": "bill2" } ] }, { "groupname": "g2", "persions": [ { "id": 3, "name": "bill3" }, { "id": 4, "Name": "Bill4"}]}] $ scope. $ scope.count;}, true);(13) Entlarvene Anti-Shake-Behandlung
Dies ist sehr nützlich für die häufige Abfahrtsverarbeitung und für einige Szenarien wie NG-Change und $ Watch geeignet. Wenn beispielsweise die Keyword -Suche beseitigt wird, wird $ debounce als Dienst eingekapselt und die Schnittstelle direkt aufgerufen. Code: http://jsfiddle.net/warspawn/6k7kd/
(14) Fundieren Sie sich schnell an einem Ort
Im Allgemeinen kann die Seite mit JS -Code kombiniert werden, um eine schnelle Positionierung durch das Formular <a id = "boden"> </a> zu erreichen. In Angular wird es auch durch ähnliche Prinzipien implementiert, und der Code ist wie folgt:
var old = $ location.hash (); $ location.hash ('batchmenu-bottom'); $ anchorscroll (); $ location.hash (alt);Dies liegt daran, dass der direkte Standort. Hash führt zu URL -Änderungen und Seitensprüngen. Daher wird ein Code zum Verhindern von Springen hinzugefügt.
Ich habe vorerst so viel zusammengefasst. Viele Dinge werden nach Informationen gesucht und von mir selbst geübt. Ich hoffe, sie werden für die TX, die Sie brauchen, hilfreich sein. Wenn es in Zukunft etwas Neues gibt, werde ich es weiter schreiben.
Das obige ist eine Zusammenfassung der eckigen Anwendungsfähigkeiten. Wir werden in Zukunft weiterhin relevante Artikel hinzufügen und organisieren. Vielen Dank für Ihre Unterstützung für diese Seite!