Ausführliche Erklärung und Beispielcode zur AngularJS-Modularisierung-CSS-Tutorial-php.cn

Ausführliche Erklärung und Beispielcode zur AngularJS-Modularisierung

高洛峰

Freigeben： 2016-12-28 14:02:56

Original

1590 Leute haben es durchsucht

AngularJS verfügt über mehrere Hauptfunktionen, wie zum Beispiel:

　1 MVC

　2 Modularität

　3 Befehlssystem

　4 Zwei-Wege-Datenbindung

In diesem Artikel werfen wir einen Blick auf die Modularisierung von AngularJS.

Lassen Sie uns zunächst darüber sprechen, warum die Modularisierung implementiert wird:

1 Erhöht die Wiederverwendbarkeit von Modulen

2 Durch die Definition von Modulen kann die Ladereihenfolge angepasst werden

　3 Beim Unit-Testen ist es nicht notwendig, den gesamten Inhalt zu laden

In den vorherigen Beispielen wurde der Controller-Code direkt in das Skript-Tag geschrieben. Die auf diese Weise deklarierten Funktionen sind global und offensichtlich nicht eins Auswahl.

Schauen wir uns an, wie man modularisiert:

<script type="text/javascript">
     var myAppModule = angular.module(&#39;myApp&#39;,[]);
      
     myAppModule.filter(&#39;test&#39;,function(){
       return function(name){
         return &#39;hello, &#39;+name+&#39;!&#39;;
       };
     });
 
     myAppModule.controller(&#39;myAppCtrl&#39;,[&#39;$scope&#39;,function($scope){
       $scope.name=&#39;xingoo&#39;;
     }]);
   </script>

Nach dem Login kopieren

Erstellen Sie zunächst das Modul myAppModule über die globale Variable Angular

angular.module('myApp',[ ]);

Der erste Parameter ist der Name der gebundenen Anwendungs-App. Diese App identifiziert den Einstiegspunkt von Angular auf der Seite, ähnlich der Rolle der Hauptfunktion.

Der zweite Parameter [] identifiziert die abhängigen Module.

Werfen wir einen Blick auf die Verwendung von Modulen!

<!doctype html>
<html ng-app="myApp">
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="myAppCtrl">
      {{name | test }}
    </div>
    <script type="text/javascript">
      var myAppModule = angular.module(&#39;myApp&#39;,[]);
       
      myAppModule.filter(&#39;test&#39;,function(){
        return function(name){
          return &#39;hello, &#39;+name+&#39;!&#39;;
        };
      });
 
      myAppModule.controller(&#39;myAppCtrl&#39;,[&#39;$scope&#39;,function($scope){
        $scope.name=&#39;xingoo&#39;;
      }]);
    </script>
  </body>
</html>

Nach dem Login kopieren

Binden Sie myApp direkt an ng-app und fertig.

Im Skript haben wir über Module einen Filter und einen Controller erstellt.

Die Funktion des Filters besteht darin, Zeichenfolgenmodifikationen hinzuzufügen.

Die Funktion des Controllers besteht darin, Variablen zu initialisieren.

Die laufenden Ergebnisse des Programms sind wie folgt:

AngularJS 模块化详解及实例代码

Das Obige ist die Sammlung von Informationen zur AngularJS-Modularisierung. Wir werden weiterhin relevante Informationen hinzufügen Die Zukunft. Vielen Dank für Ihre Unterstützung dieser Seite!

Weitere Artikel zu AngularJS-Modularisierungsdetails und Beispielcodes finden Sie auf der chinesischen PHP-Website!