Maison > Article > interface Web > Explication détaillée de la technologie modulaire angulaireJS

Explication détaillée de la technologie modulaire angulaireJS

小云云original: 2018-02-26 13:49:141288parcourir

Cet article partage principalement avec vous l'explication détaillée de la technologie modulaire angulaireJS, dans l'espoir d'aider tout le monde.

1. Commande directive

<span style="font-size: 14px;"><!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script><br>    <script><br>        var app = angular.module('test',[]);<br>        app.controller('con1',function($scope){<br>            $scope.arr = ['app','abc','beer','clear'];<br>        });<br>        app.directive('abc',function(){<br>            alert("执行了directive")            return {<br>                restrict:'E',<br>                template:                '<input type="text" ng-model="str"/>\<br>                 <ul>\<br>                    <li ng-repeat="v in arr" ng-show="v.indexOf(str)!=-1">{{v}}</li>\<br>                 <ul>'<br>            }<br>        })    </script><br>    </head><body><br>    <p ng-app="test" ng-controller="con1"><br>        <abc></abc><br>    </p></body></html><br></span>

2. Modularisation (réutilisation)

1. ) Chargement à la demande, chargement dynamique
2) Encapsulation et isolation

1 Instructions de la directive

<span style="font-size: 14px;"><!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script><br>    <script><br>        var app = angular.module('test',[]);<br>        app.controller('con1',function($scope){<br>            $scope.arr = ['app','abc','beer','clear'];<br>        });<br>        app.directive('abc',function(){<br>            alert("执行了directive")            return {<br>                restrict:'E',<br>                template:                '<input type="text" ng-model="str"/>\<br>                 <ul>\<br>                    <li ng-repeat="v in arr" ng-show="v.indexOf(str)!=-1">{{v}}</li>\<br>                 <ul>'<br>            }<br>        })    </script><br>    </head><body><br>    <p ng-app="test" ng-controller="con1"><br>        <abc></abc><br>    </p></body></html><br></span>

2. (Réutilisation)

1) Chargement à la demande, chargement dynamique
2) Encapsulation, isolation

Recommandations associées :

Anchor Scroll_AngularJS pour l'apprentissage du module AngularJS

Manières non conventionnelles de gérer les problèmes de gestion des modules AngularJS_AngularJS

Explication détaillée des différences entre AngularJS, Angular 2 et Angular4

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

angular 封装

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：Explication détaillée du prototype JSArticle suivant：Explication détaillée du prototype JS

Articles Liés

Voir plus