Maison > Article > interface Web > Trois modules majeurs de notes d'étude angulairejs (modal, contrôleur, vue)_AngularJS

Trois modules majeurs de notes d'étude angulairejs (modal, contrôleur, vue)_AngularJS

WBOYoriginal: 2016-05-16 15:38:121136parcourir

Aujourd'hui, je vais principalement vous expliquer en détail les trois modules majeurs d'angularjs : modal, contrôleur et vue.

Tout d'abord, laissez-moi vous parler de la relation entre ces trois modules.

1. Le modèle de données (modal) fournit principalement des données. Il n'interagit pas directement avec les vues.

2. Le contrôleur enregistre les données fournies par le modal et fonctionne avec la vue.

3.view est la vue, qui est l'affichage de la page.

4. En bref, le contrôleur est responsable de la communication entre les données et les vues, et constitue l'interface entre les deux. Leur division du travail est claire et la modularisation est réalisée.

1. Comment utiliser le modèle de données (modal) ?

En parlant de modèles de données, regardons l'exemple du tutoriel précédent :

<!DOCTYPE html>
 <html ng-app="app"> 
   <head>
   <meta charset="UTF-8">
   <title>Document</title>
     <script src="angular-1.2.19/angular.js"></script> <!-- 引入了AngularJS包 -->
     <script src="controll.js"></script> //引入控制器
   </head>
   <body>
     <div ng-controller="controller"> 
       <input type="text" ng-model="text">
       <b>{{greeting.text}} {{text}}</b>
     </div>
   </body>
 </html>

1. Introduisez d'abord le package angulairejs. Lors du démarrage, recherchez d'abord la directive ng-app, qui spécifie la portée entière

;

2. Ensuite, vous continuerez à chercher des instructions spécifiques. Vous trouverez ici ng-model, qui définit un modèle de données "texte".

3. Le modèle de texte est utilisé ci-dessous, ce qui permet d'obtenir une liaison bidirectionnelle. (Tant qu'il entre dans le cadre de ng-app, le texte peut être utilisé directement)

2. Comment utiliser le contrôleur ?

Tout d’abord, parlons de quelques points clés de l’utilisation du contrôleur :

1. Ne réutilisez pas les contrôleurs pour les vues. Un contrôleur n'est généralement responsable que d'un petit ensemble de vues (correspondance biunivoque) ;

2. Ne faites pas fonctionner directement le DOM dans le contrôleur Ce n'est pas la responsabilité du contrôleur Pour faire fonctionner le DOM, utilisez la commande directive (voir le tutoriel précédent) ;

3. N'effectuez pas d'opérations de filtrage des données dans le contrôleur. Il existe un service de filtrage dédié pour implémenter cela

;

4. D'une manière générale, les différents contrôleurs ne s'appellent pas et l'interaction entre les contrôleurs s'effectue généralement par le biais d'événements.

Regardons ensuite la partie bleue du code ci-dessus. Le contenu de control.js est :

 function controller($scope){
   $scope.greeting = {
     text : 'hello'
   };
 }

Angularjs trouve une instruction ng-controller, puis il trouvera l'endroit où cette instruction est définie, qui est le fichier control.js, et vous pourrez ensuite utiliser Greeting.text pour obtenir directement sa valeur.

3. Comment utiliser les vues ?

Lorsqu'on parle de la façon d'utiliser les vues, les directives doivent être mentionnées. (C'est une nouvelle connaissance !!!)

Regardons un morceau de code :

var appModule = angular.module('app', []); //app是html中ng-app指令的名称

appModule.directive('hello', function() { //定义一个指令，名称叫hello
  return {
    restrict: 'E',
    template: '<div>Hi there</div>',
    replace: true
  };
});

Le code ci-dessus définit une balise de commande. Vous pouvez essayer 5d31ad12eb7f2467fa10436b397d69f6ce2196d7bcfa28427152ee3efb4b3e34 directement en html et voir ce qui se passe ! ! !

Ensuite je vous expliquerai la signification de chaque attribut :

1.restrict : (string) paramètre optionnel, indiquant sous quelle forme l'instruction est déclarée dans le DOM. Les valeurs sont : E (élément), A (attribut), C (classe), M (commentaire) ; l'exemple ci-dessus est défini sur la forme d'élément (5d31ad12eb7f2467fa10436b397d69f6ce2196d7bcfa28427152ee3efb4b3e34

) ;

2.template : (chaîne ou fonction) paramètres facultatifs, contenu renvoyé, l'exemple ci-dessus renvoie un div

3.templateUrl : Comme ci-dessus, renvoie le contenu via l'URL. Si beaucoup de contenu est renvoyé, il est recommandé d'utiliser cet attribut.

4.relace : (valeur booléenne), la valeur par défaut est fausse. L'exemple ci-dessus est défini sur true : la page sera remplacée par le div renvoyé après avoir utilisé la balise hello.

5.transclude : (valeur booléenne), lorsqu'il est défini sur true. Cette option de configuration nous permet d'extraire le contenu contenu dans l'élément de la directive et de le placer à un emplacement spécifique dans le modèle de directive, utilisé avec ng-transclude.

6. Il existe également d’autres attributs. Apprenons-en plus à leur sujet plus tard. . .

OK, ce qui précède sont les instructions d'utilisation de ces trois modules principaux. J'espère que cela sera utile à l'étude de chacun. . . S'il y a quelque chose que vous ne comprenez pas dans les notes ci-dessus, demandez-le-moi et j'y répondrai certainement pour vous. Je vous souhaite à tous une vie heureuse !

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：Comment implémenter l'effet glisser-déposer du menu du site Web à l'aide de JSArticle suivant：Comment implémenter l'effet glisser-déposer du menu du site Web à l'aide de JS

Articles Liés

Voir plus