angularJS模块化技术详解-js教程-PHP中文网

angularJS模块化技术详解

小云云

发布： 2018-02-26 13:49:14

原创

1449人浏览过

本文主要和大家分享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

PHPShops多用户商城系统

随着电子商务模式更加多样化，企业和个人的迫切需求，PHPShops多用户商城系统正可以为其提供专业的电子商务解决方案。社区化电子商务，主要面向行业类和地方门户类站点。 PHPShops多用户商城系统（简称PHPShops）是基于电子商务的一套平台交易系统，它采用目前最流行网站建设工具PHP＋MYSQL，实现模版分离技术，通过HTML交互式网页技术来实行客户端与服务器端的交流。无论在