angularJS模块化技术详解

小云云 原创: 2018-02-26 13:49:14 946浏览

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