Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der modularen AngularJS-Technologie
<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>
1 ) On-Demand-Laden, dynamisches Laden
<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>
1) On-Demand-Laden, dynamisches Laden 2) Kapselung, Isolation
Verwandte Empfehlungen:
AngularJS-Modullernen - Anchor Scroll_AngularJS
Unkonventionelle Wege zum Umgang mit AngularJS-Modulverwaltungsproblemen_AngularJS
Detaillierte Erläuterung der Unterschiede zwischen AngularJS, Angular 2 und Angular4
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der modularen AngularJS-Technologie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!