Maison > Article > interface Web > Explication détaillée des modules dans AngularJS_AngularJS

Explication détaillée des modules dans AngularJS_AngularJS

WBOYoriginal: 2016-05-16 16:17:16874parcourir

Avant de parler du module angularjs, introduisons d'abord quelques points de connaissances d'angular :

AngularJS est une technologie purement côté client écrite entièrement en Javascript. Il utilise les technologies conventionnelles de développement Web (HTML, CSS, Javascript) pour rendre le développement d'applications Web plus rapide et plus facile.

AngularJS simplifie grandement le développement d'applications en empaquetant certaines opérations de développement de bas niveau courantes et en les fournissant aux développeurs. AngularJS gérera automatiquement ces opérations de bas niveau. Ils comprennent :

Opération 1.DOM
2. Mettre en place la surveillance des événements
3. Validation des entrées, étant donné qu'AngularJS gérera la plupart de ces opérations, les développeurs peuvent se concentrer davantage sur la logique métier de l'application et moins sur l'écriture de code répétitif, sujet aux erreurs et de bas niveau.

Bien qu'AngularJS simplifie le développement, il apporte également des technologies exquises au client, notamment :

1. Séparation des données, de la logique métier et des vues
2. Liaison automatique des données et des vues
3. Services généraux
4. Injection de dépendances (principalement utilisée pour les services d'agrégation)
5. Compilateur HTML extensible (écrit entièrement en JavaScript)
6. Facile à tester
7. La demande des clients pour ces technologies existe en réalité depuis longtemps.

En parallèle, vous pouvez également utiliser AngularJS pour développer des applications monopage ou multipages, mais il est principalement utilisé pour développer des applications monopages. AngularJS prend en charge les opérations d'historique du navigateur, les boutons avant et arrière et les opérations de collecte dans les applications à page unique.

Ensuite, expliquons le module angulaireJS en détail.

La plupart des applications ont une méthode principale utilisée pour instancier, organiser et démarrer l'application. Les applications AngularJS n'ont pas de méthode principale, mais utilisent plutôt des modules pour déclarer comment l'application doit être démarrée. Cette méthode présente les avantages suivants :

1. Le processus de démarrage est déclaratif, il est donc plus facile à comprendre.
2. Il n'est pas nécessaire de charger tous les modules lors des tests unitaires, cette méthode est donc utile pour écrire des tests unitaires.
3. Des modules supplémentaires peuvent être ajoutés aux tests dans des circonstances spécifiques. Ces modules peuvent modifier la configuration et faciliter les tests de bout en bout.
4. Le code tiers peut être regroupé dans des modules réutilisables.
5. Les modules peuvent être chargés dans n'importe quel ordre séquentiel ou parallèle (car l'exécution du module lui-même est retardée).

Par exemple :

<!doctype html>
<html ng-app="myApp">
 <head>
  <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
  <script>
      var myAppModule = angular.module('myApp', []);
　　　　　　// configure the module.
　　　　　　// in this example we will create a greeting filter
　　　　　　myAppModule.filter('greet', function() {
 　　　　　　　　return function(name) {
  　　　　　　　　　　return 'Hello, ' + name + '!';
 　　　　　　　　};
　　　　　　});
  </script>
 </head>
 <body>
  <div>
   {{ 'World' | greet }}
  </div>
 </body>
</html>

Dans l'exemple ci-dessus, nous utilisons le module myApp pour démarrer l'application en la spécifiant dans 8f08cb147f69d67da71d45acc046f462.

L'exemple ci-dessus est très simple à écrire, mais il ne convient pas d'utiliser la même méthode d'écriture pour écrire des applications volumineuses. Nous vous recommandons de diviser votre candidature selon les modules suivants :

1. Un module de service utilisé pour faire des déclarations de service.
2. Un module d'instructions, utilisé pour déclarer des instructions.
3. Un module de filtre, utilisé pour faire des déclarations de filtres.
4. Un module au niveau de l'application qui dépend du module ci-dessus et contient le code d'initialisation.

Par exemple :

<!doctype html>
<html ng-app="xmpl">
 <head>
  <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
  <script src="script.js"></script>
 </head>
 <body>
  <div ng-controller="XmplController">
   {{ greeting }}!
  </div>
 </body>
</html>
[/code]

script.js:

[code]
angular.module('xmpl.service', []).   //服务模块
 value('greeter', {    //自定义greeter对象
  salutation: 'Hello',
  localize: function(localization) {
    this.salutation = localization.salutation;
  },
  greet: function(name) {
    return this.salutation + ' ' + name + '!';
  }
 }).
 value('user', {   //自定义user对象
  load: function(name) {
    this.name = name;
  }
 });
angular.module('xmpl.directive', []);  //指令模块
angular.module('xmpl.filter', []);   //过滤器模块
angular.module('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter']).  //模块xmpl依赖于数组中的模块
 run(function(greeter, user) {
  // 初始化代码，应用启动时，会自动执行
  greeter.localize({
    salutation: 'Bonjour'
  });
  user.load('World');
 })
// A Controller for your app
var XmplController = function($scope, greeter, user) {
   $scope.greeting = greeter.greet(user.name);
}

La raison de cette division est que vous devez souvent ignorer le code d'initialisation dans vos tests car ces codes sont plus difficiles à tester. En le décomposant, vous pouvez facilement l'ignorer pendant les tests. Les tests peuvent également être rendus plus spécifiques en chargeant uniquement les modules pertinents pour le test en cours. Ce qui précède n’est qu’une suggestion, vous pouvez l’ajuster en fonction de votre situation spécifique.

Un module est un ensemble de blocs de configuration et de code qui sont attachés à l'application pendant la phase de démarrage. Le module le plus simple se compose de deux types de collections de blocs de code :

Bloc de code de configuration - exécuté pendant les phases d'injection et de configuration du fournisseur d'injection. Seuls les fournisseurs d'injection et les constantes peuvent être injectés dans les blocs de configuration. Cela permet d'éviter que le service ne soit initialisé prématurément avant sa configuration.
Exécuter le bloc de code - exécuté après la création de l'injecteur et utilisé pour démarrer l'application. Seules les instances et constantes peuvent être injectées dans les blocs d'exécution. Cela permet d'éviter que la configuration du système ne se produise après l'exécution.

Mise en œuvre du code :

angular.module('myModule', []).  
　　config(function(injectables) { // provider-injector      配置代码块
　　　　// This is an example of config block.
　　　　// You can have as many of these as you want.
　　　　// You can only inject Providers (not instances)
　　　　// into the config blocks.
　　}). run(function(injectables) { // instance-injector      运行代码块
　　　　// This is an example of a run block.
　　　　// You can have as many of these as you want.
　　　　// You can only inject instances (not Providers)
　　　　// into the run blocks
　　});

Les modules disposent également de méthodes de configuration pratiques, leur utilisation équivaut à l'utilisation de blocs de code. Par exemple :

angular.module('myModule', []).
 value('a', 123).
 factory('a', function() { return 123; }).
 directive('directiveName', ...).
 filter('filterName', ...);
// is same as
angular.module('myModule', []).
 config(function($provide, $compileProvider, $filterProvider) {
  $provide.value('a', 123)
  $provide.factory('a', function() { return 123; })
  $compileProvider.directive('directiveName', ...).
  $filterProvider.register('filterName', ...);
 });

Les blocs de configuration seront appliqués dans l'ordre d'enregistrement de $provide, $compileProvider, $filterProvider. La seule exception concerne la définition des constantes, qui doivent toujours être placées au début du bloc de configuration.

Les blocs d'exécution sont ce qui ressemble le plus à une méthode principale dans AngularJS. Un bloc d'exécution est un morceau de code utilisé pour démarrer une application. Il est exécuté une fois que tous les services ont été configurés et que tous les injecteurs ont été créés. Les blocs d'exécution contiennent souvent du code difficile à tester, ils doivent donc être écrits dans des modules séparés afin de pouvoir être ignorés lors des tests unitaires.

Un module peut lister d'autres modules comme dépendances. "Dépend d'un module" signifie que le module dépendant doit être chargé avant ce module. Autrement dit, le bloc de configuration du module dépendant sera exécuté avant le bloc de configuration de ce module. Il en va de même pour les blocs d'exécution. Tout module ne peut être chargé qu'une seule fois, même s'il dépend de plusieurs modules.

Module est une méthode utilisée pour gérer la configuration de $injector et n'a rien à voir avec le chargement des scripts. Il existe de nombreuses bibliothèques sur Internet qui contrôlent le chargement des modules et elles peuvent être utilisées avec AngularJS. Comme les modules ne font rien lors du chargement, ils peuvent être chargés dans n'importe quel ordre ou en parallèle

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction à Angular et introduction à ses fonctionnalités_AngularJSArticle suivant：Introduction à Angular et introduction à ses fonctionnalités_AngularJS

Articles Liés

Voir plus