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:561606Durchsuche
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('myApp',[]);
myAppModule.filter('test',function(){
return function(name){
return 'hello, '+name+'!';
};
});
myAppModule.controller('myAppCtrl',['$scope',function($scope){
$scope.name='xingoo';
}]);
</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('myApp',[]);
myAppModule.filter('test',function(){
return function(name){
return 'hello, '+name+'!';
};
});
myAppModule.controller('myAppCtrl',['$scope',function($scope){
$scope.name='xingoo';
}]);
</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:
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!