Maison >interface Web >tutoriel CSS >Explication détaillée de la modularisation AngularJS et exemple de code
Explication détaillée de la modularisation AngularJS et exemple de code
- 高洛峰original
- 2016-12-28 14:02:561612parcourir
AngularJS possède plusieurs fonctionnalités majeures, telles que :
1 MVC
2 Modularité
3 Système de commande
4 Liaison de données bidirectionnelle
Dans cet article, examinons la modularisation d'AngularJS.
Tout d'abord, parlons de la raison pour laquelle la modularisation est mise en œuvre :
1 Augmente la réutilisabilité des modules
2 En définissant les modules, l'ordre de chargement peut être personnalisé
3 Dans les tests unitaires, il n'est pas nécessaire de charger tout le contenu
Dans les exemples précédents, le code du contrôleur était écrit directement dans la balise script Les fonctions ainsi déclarées sont globales et évidemment pas une Best. choix.
Voyons comment modulariser :
<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>Tout d'abord, créez le module myAppModule via la variable globale angulaire
angular.module('myApp',[ ]);
Le premier paramètre est le nom de l'application liée. Cette application identifie le point d'entrée d'Angular dans la page, similaire au rôle de la fonction principale.
Le deuxième paramètre [] identifie les modules dépendants.
Voyons comment utiliser les modules !
<!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>Liez directement myApp à ng-app et c'est tout.
En script, nous avons créé un filtre et un contrôleur à travers des modules.
La fonction du filtre est d'ajouter une modification de chaîne.
La fonction du contrôleur est d'initialiser les variables.
Les résultats en cours du programme sont les suivants :
Ce qui précède est la collecte d'informations sur la modularisation AngularJS. Nous continuerons à ajouter des informations pertinentes dans. l'avenir. Merci pour votre soutien à ce site !
Pour plus d'articles sur les détails de la modularisation AngularJS et des exemples de codes, veuillez faire attention au site Web PHP chinois !