Vollständige Projektstruktur der AngularJS-Studiennotizen_AngularJS

Die heutigen Haupterklärungen umfassen die folgenden Punkte: 1. Demonstrieren Sie eine vollständige Projektstruktur. 2. Die Bedeutung von $scope. 3. Modularisierung und Abhängigkeitsinjektion.

1. Demonstrieren Sie eine vollständige Projektstruktur.

Alle folgenden Codes wurden vom Lehrer @大 desertqiongqiu reproduziert. Ich habe es erneut gedruckt und auf Github gestellt. Sie können zu diesem Link gehen, um den Quellcode anzuzeigen. Zuschauen und gleichzeitig lernen, der beste Effekt~~~~

Schauen wir uns nun diesen Screenshot an,

Dies ist die Verzeichnisstruktur, die ein vollständiges AngularJS-Projekt haben sollte. Lassen Sie mich unten erklären, was die einzelnen Ordner bedeuten.

1.css: Unnötig zu erwähnen, dass nur einige Dateien im CSS-Stil eingefügt werden.

2. Framework: Hier sind im Allgemeinen einige Front-End-Frameworks (UI), die von Dritten neben AngularJS benötigt werden, wie Bootstrap, Ueditor usw.

3.imgs: Unnötig zu erwähnen, dass Bilddateien eingefügt werden.

　4.index.html: Hauptdatei, wenn viele Projektdateien vorhanden sind, können Sie natürlich auch einen separaten Ordner zum Speichern der Seite erstellen.

5.js: Fügen Sie natürlich Ihre eigene neu erstellte js-Datei ein.

6.tpls: Der vollständige Name lautet templates, was Vorlagen bedeutet. Was darin platziert wird, ist Teil des HTML-Codes. Wird in Verbindung mit dem templateUrl-Attribut im Direktivenbefehl von angualrjs verwendet.

Sehen wir uns an, wie man tpls verwendet: Hier im tpls-Ordner befindet sich eine test.html-Datei, der Code lautet wie folgt:

<ul>
  <li>
    第一行test
  </li>
  <li>
    第二行test
  </li><li>
    第三行test
  </li>
</ul>

Wir haben oben auch gesagt, dass die Datei hier nur ein Teil des HTML-Codes ist. Dies ist beispielsweise nur ein Teil des UL-Codes. Dann sind einige Leute verwirrt: Was nützt es, so zu schreiben, wie soll ich es verwenden? Machen Sie sich keine Sorgen, ich erkläre Ihnen, wie Sie es verwenden:

Tatsächlich haben wir es im letzten Kurs erwähnt. Für diejenigen, die es nicht wissen, klicken Sie hier. Sie können den dritten Punkt sehen, die Direktivenmethode, die ich erwähnt habe. Dies bedeutet, dass ein HTML-Tag definiert wird und der zurückgegebene HTML-Inhalt hier der UL-Teil ist.

Schauen wir uns den spezifischen Verwendungscode an:

var appModule = angular.module('app', []); //app是html中ng-app指令的名称

 appModule.directive('hello', function() { //定义一个指令，名称叫hello
   return {
     restrict: 'E',
     //template: '<div>Hi there</div>',
     templateUrl:'/tpls/test.html',
     replace: true
   };
 });

Erklärung des obigen Codes: Er definiert ein Hallo-Tag. Bei Verwendung dieses Tags wird der Inhalt von test.html zurückgegeben (es kann entweder template oder templateUrl verwendet werden).

Warum sollten wir den oben genannten Ul-Inhalt in einen separaten Ordner legen? Verstehst du es jetzt? ? Der Grund dafür ist, dass Sie bei vielen zurückgegebenen Inhalten einfach den Link direkt verwenden, um den Code klarer aussehen zu lassen.

2. Schauen Sie sich etwas $scope an.

Schauen wir uns das Bild unten an, um einige Zielfernrohre und ihre Funktionen ausführlich zu erklären:

Schauen wir uns den obigen Code an: Zuerst definieren wir einen Controller namens HelloCtrl, der ein Attribut „Begrüßung“ zu $scope hinzufügt. Das Begrüßungsattribut ist ein Objekt, und das Textattribut wird mit dem Wert „Hallo“ hinzugefügt. So einfach ist das. Dann können Sie Greeting.text direkt auf der Seite aufrufen, um den Wert „Hallo“ zu erhalten. Ist es nicht erstaunlich? Was genau ist $scope? Warum können diese Funktionen erreicht werden? Im Folgenden sind seine Merkmale aufgeführt. Nachdem Sie es gelesen haben, müssen Sie ein gewisses Verständnis dafür haben.

1.$scope ist ein Scope, der auch als Objekt verstanden werden kann.

　2.$scope bietet einige Tools und Methoden, wie z. B. $watch() und $apply() usw.

　3.$scope ist auch eine Ausführungsumgebung (Scope).

　4. Der untergeordnete $scope kann die Eigenschaften und Methoden des übergeordneten $scope erben.

5. Jede Angular-Anwendung hat nur einen $scope ($rootscope, befindet sich in ng-app).

3. Modularisierung und Abhängigkeitsinjektion

Sehen Sie sich den folgenden Code an, der den Controller definiert:

var myApp = angular.module('angularApp', []);

myApp.controller('HelloCtrl', ['$scope',function($scope) {
    $scope.greeting = {
      text: 'Hello'
    };
  }
]);
myApp.controller('ByeCtrl', ['$scope',function($scope) {
    //.....
  }
]);

Erinnern Sie sich noch an die eingangs erläuterte Definition von Controller? Verwenden Sie direkt die Methode funciton name(){}. Langsam stellten wir fest, dass es schwierig sein wird, zu verwalten, wenn zu viele Controller vorhanden sind. Um die Modularisierung von Angualrjs zu realisieren, müssen wir auf die obige Schreibmethode umsteigen. Anschließend erkläre ich Ihnen die Bedeutung dieses Codes.

Zeile 1: Rufen Sie zuerst den Modulnamen der gesamten Seite „myApp“ ab. AngularApp ist der Wert von ng-app in HTML .

Zeile 3: Definieren Sie einen Controller mit dem Namen „HelloCtrl“;

Zeile 9 ist die gleiche wie oben.

Auf diese Weise haben wir unbewusst Modularität erreicht! ! !

Hier rufen wir nur die Controller-Methode auf, und die im ersten Abschnitt erwähnten Direktiven, Filter und anderen Methoden sollten alle auf myApp aufgerufen werden, um die Antwortfunktion zu erreichen. Verwenden Sie dann mehrere Module, um ein Projekt abzuschließen, und wir haben die Abhängigkeitsinjektion erreicht! !

OK, oben finden Sie die Anweisungen zur Verwendung dieser drei Hauptmodule. Ich hoffe, dass es für das Studium aller hilfreich sein wird. . . Wenn Sie etwas zu den obigen Anmerkungen nicht verstehen, fragen Sie mich einfach und ich werde es Ihnen auf jeden Fall beantworten. Ich wünsche euch allen ein glückliches Leben!