Detailed explanation of angularJS modular technology-JS Tutorial-php.cn

Detailed explanation of angularJS modular technology

小云云

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

Original

1285 people have browsed it

This article mainly shares with you the detailed explanation of angularJS modular technology, hoping to help everyone.

1. Directive instruction

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

Copy after login

2. Modularization (reuse)

1) On-demand loading, dynamic loading
2) Encapsulation, isolation

1, directive instructions

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

Copy after login

2, modularization (reuse)

1) On-demand loading, dynamic loading
2) Encapsulation, isolation

Related recommendations:

AngularJS module learning Anchor Scroll_AngularJS

Unconventional methods to deal with AngularJS module management issues_AngularJS

Detailed explanation of the differences between AngularJS, Angular 2, and Angular4

The above is the detailed content of Detailed explanation of angularJS modular technology. For more information, please follow other related articles on the PHP Chinese website!