English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

AngularJS模块化详解及实例代码

AngularJS ha alcune grandi caratteristiche, come ad esempio:

  1 MVC

  2 Modularizzazione

  3 Sistema di direttive

  4 Bindaggio bidirezionale dei dati

Quindi, in questo articolo vedremo la modularizzazione di AngularJS.

  Prima di tutto, parliamo del motivo per cui si deve implementare la modularizzazione:

  1 Aumenta la riutilizzabilità del modulo

  2 Attraverso la definizione del modulo, si può personalizzare l'ordine di caricamento

  3 In i test unitari, non è necessario caricare tutto il contenuto

  Nei precedenti esempi, il codice del controller è stato scritto direttamente all'interno del tag script, così dichiarate le funzioni sono globali, ovviamente non è una scelta ottimale.

  Vediamo come si fa la modularizzazione:       

 <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>

  Prima di tutto, attraverso la variabile globale angular, crea il modulo myAppModule

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

  Il primo parametro è il nome dell'applicazione associata, questa app indica il punto di ingresso di angular nella pagina, simile alla funzione main.

  Il secondo parametro [] indica i moduli dipendenti.

  Vediamo come utilizzare i moduli!

<!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>

  Just bind myApp to ng-app, and it's done.

  In the script, we created a filter and a controller through the module.

  The role of filter is to add string decoration.

  The role of the controller is to initialize variables.

  The running result of the program is as follows:

          This is the material sorting of AngularJS Modularization, and more related materials will be supplemented in the future, thank you all for your support to this site!

Declaration: The content of this article is from the network, the copyright belongs to the original author, the content is contributed and uploaded by Internet users spontaneously, this website does not own the copyright, has not been manually edited, nor assumes relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (when sending an email, please replace # with @) for reporting, and provide relevant evidence. Once verified, this site will immediately delete the suspected infringing content.