Explication détaillée de la modularisation AngularJS et exemple de code-tutoriel CSS-php.cn

Explication détaillée de la modularisation AngularJS et exemple de code

高洛峰

Libérer： 2016-12-28 14:02:56

original

1618 Les gens l'ont consulté

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(&#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>

Copier après la connexion

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(&#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>

Copier après la connexion

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 :

AngularJS 模块化详解及实例代码

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 !