Heim > Artikel > Web-Frontend > Ausführliche Erklärung und Beispielcode zur AngularJS-Modularisierung

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

高洛峰Original: 2016-12-28 14:02:561594Durchsuche

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>

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jQuery EasyUI Tutorial-Panel (Panel)Nächster Artikel：jQuery EasyUI Tutorial-Panel (Panel)

In Verbindung stehende Artikel

Mehr sehen