Rumah  >  Artikel  >  hujung hadapan web  >  angularJS模块化技术详解

angularJS模块化技术详解

小云云
小云云asal
2018-02-26 13:49:141288semak imbas

本文主要和大家分享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的区别详解

Atas ialah kandungan terperinci angularJS模块化技术详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:JS原型详解说明Artikel seterusnya:Js快速排序方法实例