Home > Article > Web Front-end > Detailed explanation of angularJS modular technology

Detailed explanation of angularJS modular technology

小云云Original: 2018-02-26 13:49:141286browse

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>

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>

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!

angular 封装

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of JS prototypeNext article：Detailed explanation of JS prototype

See more