Detaillierte Erläuterung der modularen AngularJS-Technologie-js-Tutorial-php.cn

Detaillierte Erläuterung der modularen AngularJS-Technologie

小云云

Freigeben： 2018-02-26 13:49:14

Original

1341 Leute haben es durchsucht

Dieser Artikel teilt Ihnen hauptsächlich die detaillierte Erklärung der modularen AngularJS-Technologie mit und hofft, allen zu helfen.

1. Direktivenbefehl

<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>

Nach dem Login kopieren

2. Modularisierung (Wiederverwendung)

1 ) On-Demand-Laden, dynamisches Laden

1. Anweisungen zur Direktive

<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>

Nach dem Login kopieren

2 (Wiederverwendung)

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!