Drei Hauptmodule von AngularJS-Studiennotizen (Modal, Controller, View)

Drei Hauptmodule von AngularJS-Studiennotizen (Modal, Controller, View)_AngularJS

WBOY

Freigeben： 2016-05-16 15:38:12

Original

1206 Leute haben es durchsucht

Heute werde ich Ihnen hauptsächlich die drei Hauptmodule von AngularJS im Detail erklären: Modal, Controller und View.

Lassen Sie mich zunächst etwas über die Beziehung zwischen diesen drei Modulen erzählen.

1. Das Datenmodell (modal) stellt hauptsächlich Daten bereit. Es interagiert nicht direkt mit Ansichten.

2. Der Controller speichert die vom Modal bereitgestellten Daten und arbeitet mit der Ansicht.

3.view ist die Ansicht, also die Seitenanzeige.

4. Kurz gesagt, der Controller ist für die Kommunikation zwischen Daten und Ansichten verantwortlich und stellt die Schnittstelle zwischen beiden dar. Ihre Arbeitsteilung ist klar und die Modularisierung wird erreicht.

1. Wie verwende ich das Datenmodell (modal)?

Apropos Datenmodelle: Schauen wir uns das Beispiel aus dem vorherigen Tutorial an:

<!DOCTYPE html>
 <html ng-app="app"> 
   <head>
   <meta charset="UTF-8">
   <title>Document</title>
     <script src="angular-1.2.19/angular.js"></script> <!-- 引入了AngularJS包 -->
     <script src="controll.js"></script> //引入控制器
   </head>
   <body>
     <div ng-controller="controller"> 
       <input type="text" ng-model="text">
       <b>{{greeting.text}} {{text}}</b>
     </div>
   </body>
 </html>

Nach dem Login kopieren

1. Führen Sie zunächst das AngularJS-Paket ein und suchen Sie zunächst nach der NG-App-Direktive, die den gesamten Umfang angibt

2. Anschließend suchen Sie weiter nach konkreten Anweisungen. Hier finden Sie ng-model, das ein „Text“-Datenmodell definiert.

3. Im Folgenden wird das Textmodell verwendet, sodass eine bidirektionale Bindung erreicht wird. (Solange es im Rahmen von ng-app liegt, kann Text direkt verwendet werden)

2. Wie verwende ich den Controller?

Lassen Sie uns zunächst über einige wichtige Punkte bei der Verwendung des Controllers sprechen:

1. Verwenden Sie keine Controller für Ansichten. Ein Controller ist im Allgemeinen nur für einen kleinen Satz von Ansichten verantwortlich (Eins-zu-Eins-Korrespondenz).

2. Betreiben Sie das DOM nicht direkt im Controller. Um das DOM zu bedienen, verwenden Sie den Direktivenbefehl (siehe vorheriges Tutorial).

3. Führen Sie keine Datenfilterungsvorgänge im Controller durch. Es gibt einen speziellen Filterdienst, um dies zu implementieren

4. Im Allgemeinen rufen sich verschiedene Controller nicht gegenseitig an, und die Interaktion zwischen Controllern erfolgt im Allgemeinen über Ereignisse.

Dann schauen wir uns den blauen Teil des Codes oben an. Der Inhalt von control.js ist:

Angularjs findet eine NG-Controller-Anweisung und dann den Ort, an dem diese Anweisung definiert ist, nämlich die Datei control.js, und dann können Sie Greeting.text verwenden, um ihren Wert direkt abzurufen.

 function controller($scope){
   $scope.greeting = {
     text : 'hello'
   };
 }

Nach dem Login kopieren

3. Wie verwende ich Ansichten?

Wenn es um die Verwendung von Ansichten geht, müssen Anweisungen erwähnt werden. (Das ist neues Wissen!!!) Schauen wir uns einen Code an:

Der obige Code definiert ein Befehls-Tag. Sie können direkt in HTML ausprobieren. ! !

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

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

Nach dem Login kopieren

Dann erkläre ich die Bedeutung jedes Attributs:

1.restrict: (String) optionaler Parameter, der angibt, in welcher Form die Anweisung im DOM deklariert wird. Die Werte sind: E (Element), A (Attribut), C (Klasse), M (Kommentar); das obige Beispiel ist auf Elementform eingestellt ();

2.template: (String oder Funktion) optionale Parameter, zurückgegebener Inhalt, das obige Beispiel gibt ein div zurück;

3.templateUrl: Wie oben, Rückgabe von Inhalten über die URL. Wenn viele Inhalte zurückgegeben werden, wird empfohlen, dieses Attribut zu verwenden.

4.relace: (Boolescher Wert), der Standardwert ist false. Das obige Beispiel ist auf „true“ gesetzt: Die Seite wird durch das zurückgegebene div ersetzt, nachdem das Hallo-Tag verwendet wurde.

5.transclude: (Boolescher Wert), wenn auf true gesetzt. Diese Konfigurationsoption ermöglicht es uns, den im Element der Direktive enthaltenen Inhalt zu extrahieren und ihn an einer bestimmten Stelle in der Direktivenvorlage zu platzieren, die mit ng-transclude verwendet wird.

6. Es gibt auch einige andere Attribute. Später erfahren wir mehr darüber. . .

Okay, oben sind 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!