本文主要和大家分享angularJS模塊化技術詳解，希望能幫助到大家。
1、directive 指令
<!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>
<script>
var app = angular.module('test',[]);
app.controller('con1',function($scope){
$scope.arr = ['app','abc','beer','clear'];
});
app.directive('abc',function(){
alert("執行了directive") return {
restrict:'E',
template: '<input type="text" ng-model="str"/>\
<ul>\
<li ng-repeat="v in arr" ng-show="v.indexOf(str)!=-1">{{v}}</li>\
<ul>'
}
}) </script>
</head><body>
<p ng-app="test" ng-controller="con1">
<abc></abc>
</p></body></html>
2、模塊化（重用）
1）按需加載、動態加載
2）封裝、隔離
1、directive 指令
<!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>
<script>
var app = angular.module('test',[]);
app.controller('con1',function($scope){
$scope.arr = ['app','abc','beer','clear'];
});
app.directive('abc',function(){
alert("執行了directive") return {
restrict:'E',
template: '<input type="text" ng-model="str"/>\
<ul>\
<li ng-repeat="v in arr" ng-show="v.indexOf(str)!=-1">{{v}}</li>\
<ul>'
}
}) </script>
</head><body>
<p ng-app="test" ng-controller="con1">
<abc></abc>
</p></body></html>
2、模塊化（重用）
1）按需加載、動態加載
2）封裝、隔離
相關推薦：
AngularJS模塊學習之Anchor Scroll_AngularJS
AngularJS模塊管理問題的非常規處理方法_AngularJS
AngularJS、 Angular 2、Angular4的區別詳解
以上就是angularJS模塊化技術詳解的詳細內容，更多請關注php中文網其它相關文章！