Explication détaillée des méthodes du module AngularJS_AngularJS

Qu'est-ce qu'AngularJS ?

AngularJs (ci-après dénommé ng) est un cadre structurel permettant de concevoir des applications Web dynamiques. Tout d’abord, il s’agit d’un framework et non d’une bibliothèque de classes. Comme EXT, il fournit un ensemble complet de solutions pour concevoir des applications Web. C'est plus qu'un simple framework javascript, car son cœur est en réalité une amélioration des balises HTML.

Qu'est-ce que l'amélioration des balises HTML ? En fait, il vous permet d'utiliser des balises pour compléter une partie de la logique de la page. La méthode spécifique consiste à utiliser des balises personnalisées, des attributs personnalisés, etc. Ces balises/attributs qui ne sont pas natifs du HTML ont un nom dans la directive ng:. Nous en reparlerons plus tard. Alors, qu’est-ce qu’une application Web dynamique ? Différentes des systèmes Web traditionnels, les applications Web peuvent fournir aux utilisateurs des opérations riches et mettre à jour en permanence les vues avec les opérations utilisateur sans saut d'URL. ng official déclare également qu'il est plus adapté au développement d'applications CRUD, c'est-à-dire d'applications avec plus d'opérations de données, plutôt que de jeux ou d'applications de traitement d'images.

Pour y parvenir, ng a introduit quelques fonctionnalités intéressantes, notamment le mécanisme de modèle, la liaison de données, les modules, les directives, l'injection de dépendances et le routage. Grâce à la liaison des données et des modèles, nous pouvons nous débarrasser des opérations DOM fastidieuses et nous concentrer sur la logique métier.

Une autre question, est-ce que ng est un framework MVC ? Ou le framework MVVM ? Le site officiel a mentionné que la conception de ng adopte l'idée de base de MVC, mais ce n'est pas entièrement MVC, car lors de l'écriture du code, nous utilisons effectivement l'instruction ng-controller (du moins d'après le nom, c'est MVC ), mais cette activité gérée par le contrôleur interagit essentiellement avec la vue, qui semble être très proche de MVVM. Tournons notre attention vers le titre peu accrocheur du site officiel : "AngularJS — Superheroic JavaScript MVW Framework".

La classe Module dans AngularJS est chargée de définir la façon dont l'application est démarrée. Elle peut également définir divers fragments de l'application via des déclarations. Jetons un coup d'œil à la manière dont il implémente ces fonctions.

1. Où est la méthode Main

Si vous venez du langage de programmation Java ou Python, alors vous voudrez peut-être savoir où se trouve la méthode principale dans AngularJS ? Où est la méthode qui démarre tout et est exécutée en premier ? Où se trouve la méthode dans le code JavaScript qui instancie et rassemble tout, puis demande à l'application de commencer à s'exécuter ?

En fait, AngularJS n'a pas de méthode main. AngularJS utilise la notion de modules pour remplacer la méthode main. Les modules nous permettent de décrire de manière déclarative les dépendances d'une application et comment l'assembler et la démarrer. Les raisons d'utiliser cette méthode sont les suivantes :

1. Les modules sont déclaratifs. Cela signifie qu'il est plus facile à écrire et à comprendre - le lire, c'est comme lire l'anglais ordinaire !

2. Il est modulaire. Cela vous oblige à réfléchir à la manière de définir vos composants et dépendances, en les rendant plus clairs.

3. Cela facilite les tests. Dans les tests unitaires, vous pouvez ajouter des modules de manière sélective et éviter le contenu du code qui ne peut pas être testé unitairement. Dans le même temps, lors des tests de scénarios, vous pouvez charger d'autres modules supplémentaires afin qu'ils puissent mieux fonctionner avec d'autres composants.

Par exemple, il existe un module appelé "MyAwesomeApp" dans notre application. En HTML, ajoutez simplement ce qui suit à la balise (ou techniquement, à n'importe quelle balise) :

Copier le code Le code est le suivant :

La directive ng-app indiquera à AngularJS d'utiliser le module MyAwesomeApp pour lancer votre application. Alors, comment définir les modules ? Par exemple, nous vous recommandons de définir des modules distincts pour les services, les directives et les filtres. Votre module principal peut alors déclarer des dépendances sur ces modules.

Cela facilite la gestion des modules, car ce sont tous de bons blocs de code complets, et chaque module a une et une seule fonction. Dans le même temps, les tests unitaires ne peuvent charger que les modules sur lesquels ils se concentrent, de sorte que le nombre d'initialisations peut être réduit et les tests unitaires deviendront plus raffinés et ciblés.

2. Chargement et dépendances

L'action de chargement du module se produit en deux étapes différentes, qui peuvent être reflétées dans le nom de la fonction. Il s'agit du bloc de code de configuration et du bloc de code d'exécution (ou appelé étape).

1.Bloc de code de configuration

Dans cette étape, AngularJS connectera et enregistrera toutes les sources de données. Par conséquent, seules les sources de données et les constantes peuvent être injectées dans les blocs Config. Les services qui ne sont pas sûrs d'avoir été initialisés ne peuvent pas être injectés.

2.Exécuter le bloc de code

Le bloc de code Run est utilisé pour démarrer votre application et démarrer l'exécution après la création de l'injecteur. Pour éviter d'avoir à configurer le système après ce point, seules les instances et constantes peuvent être injectées dans le bloc Run. Vous constaterez que dans AngularJS, le bloc Run est la chose la plus similaire à la méthode main.

3.Méthode rapide

Que pouvez-vous faire avec les modules ? Nous pouvons l'utiliser pour instancier des contrôleurs, des directives, des filtres et des services, mais vous pouvez faire bien plus avec les classes de modules. Méthodes API configurées comme suit :

1.config(configFn)

Vous pouvez utiliser cette méthode pour effectuer certains travaux d'enregistrement, qui doivent être terminés lorsque le module est chargé.

2.constant(nom, objet)

Cette méthode s'exécutera en premier, vous pourrez donc l'utiliser pour déclarer des constantes à l'échelle de l'application et les rendre disponibles dans toutes les méthodes de configuration (méthode de configuration) et d'instance (toutes les méthodes suivantes, telles que le contrôleur, le service, etc.).

3.controller(nom, constructeur)

Sa fonction de base est de configurer le contrôleur pour une utilisation ultérieure.

4.directive(nom,directiveFactory)

Vous pouvez utiliser cette méthode pour créer des directives dans votre application.

5.filter(nom,filterFactory)

Vous permet de créer des filtres AngularJS nommés, comme indiqué dans la section précédente.

6.run(initialisationFn)

Vous pouvez utiliser cette méthode si vous souhaitez effectuer certaines actions après le démarrage de l'injecteur, mais ces actions doivent être effectuées avant que la page ne soit disponible pour l'utilisateur.

7.value(nom,objet)

                                                                                                                                                                  --  permettant d'injecter des valeurs dans l'ensemble de l'application.

8.factory(nom,factoryFn)

Si vous avez une classe ou un objet et que vous devez lui fournir une logique ou des paramètres avant de pouvoir l'initialiser, vous pouvez utiliser l'interface d'usine ici. Une usine est une fonction chargée de créer certaines valeurs (ou objets) spécifiques. Regardons un exemple de la fonction greeter. Cette fonction nécessite un message d'accueil pour s'initialiser :

function Greeter(salutation) {
 this.greet = function(name) {
 return salutation + ' ' + name;
};
}

Un exemple de fonction greeter est le suivant :

myApp.factory('greeter', function(salut) {
 return new Greeter(salut);
});

Ensuite, vous pouvez l'appeler ainsi :

var myGreeter = greeter('Halo');

9.service(nom,objet)

La différence entre factory et service est que factory appellera directement la fonction qui lui est transmise, puis renverra le résultat de l'exécution ; tandis que le service utilisera le mot-clé "new" pour appeler le constructeur qui lui est transmis, puis renverra les résultats. Ainsi, l'ancienne Greeter Factory peut être remplacée par le Service Greeter suivant :

myApp.service('greeter', Greeter);

每当我们需要一个greeter实例的时候，AngularJS就会调用新的Greeter()来返回一个实例。

10.provider(name,providerFn)

provider是这几个方法中最复杂的部分（显然，也是可配置性最好的部分）。provider中既绑定了factory也绑定了service，并且在注入系统准备完毕之前，还可以享受到配置provider函数的好处（也就是config块）。

我们来看看使用provider改造之后的greeter Service是什么样子：

myApp.provider('greeter', function() {
 var salutation = 'Hello';
 this.setSalutation = function(s) {
 salutation = s;
}
 function Greeter(a) {
 this.greet = function() {
 return salutation + ' ' + a;
}
}
 this.$get = function(a) {
 return new Greeter(a);
};
});

这样我们就可以在运行时动态设置问候语了（例如，可以根据用户使用的不同语言进行设置）。

var myApp = angular.module(myApp, []).config(function(greeterProvider) {
greeterProvider.setSalutation('Namaste');
});