angularJS模块化技术详解
- 小云云原创
- 2018-02-26 13:49:141293浏览
本文主要和大家分享angularJS模块化技术详解，希望能帮助到大家。
1、directive 指令
<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、模块化（重用）
1）按需加载、动态加载
2）封装、隔离
1、directive 指令
<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、模块化（重用）
1）按需加载、动态加载
2）封装、隔离
相关推荐：
AngularJS模块学习之Anchor Scroll_AngularJS
AngularJS模块管理问题的非常规处理方法_AngularJS
AngularJS、 Angular 2、Angular4的区别详解
以上是angularJS模块化技术详解的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：JS原型详解说明下一篇：Js快速排序方法实例