ANGULARJS Study Notes

First, constant

The function can register the variable in the module and use it as a service.

For example:

var app = Angular.module ("MyModule", []). Constant ("Pageconfig", {pagesize:10});

By defining a global variable of the pageconfig available in a module, we can use the variable in the same way as a service in the module, for example:

App.controller ("Mycontroller", ["$scope", "Pageconfig", Function ($scope, pageconfig) {

$scope. pageSize = pageconfig.pagesize;

}]);

Variables defined by constant can no longer be modified once defined. Later we will talk about functions and their similar value functions.

Second, directive

Directive can be used for custom directives, and custom directives can be used to extend the functionality of HTML. For example, we can create our own element tags through directive, in the code below, we

Created a directive Lymipager, which is used to create a plug-in that implements paging functionality. The code for the JS section is as follows:

$(function(angular) {Angular.module ("Lymi.pagermodule", [])        //Paging configuration information. Constant ("Pagerconfig", {initvisiblepagecount:4, Initcurrentindex:1, Initpagecount:0}). directive ("Lymipager", ["Pagerconfig",function(pagerconfig) {return{link:function(Scope, ele, attrs) {//The response function when the page number of the paging plugin changesScope.pagechange=function(index) {Scope.currentindex=index; } scope. $watch ("Currentindex+pagecount",function () {                        //Define default values that act on the paging property                        if(!attrs.currentindex) {Scope.currentindex=Pagerconfig.initcurrentindex; } if(!attrs.pagecount) {Scope.pagecount=Pagerconfig.initpagecount; } if(!attrs.visiblepagecount) {Scope.visiblepagecount=Pagerconfig.initvisiblepagecount; }                        //Set Display page numbersScope.pagenums = []; varLow = 1, high = 1; varShowPage =Scope.visiblepagecount; if(Scope.pagecount > 0) {                            if(Scope.currentindex-1 + showpage <=scope.pagecount) { low=Scope.currentindex; High= Scope.currentindex-1 +ShowPage; } Else{ High=Scope.pagecount; Low= (Scope.pagecount-showpage < 0? 0:scope.pagecount-showpage) + 1; }                        }                         for(; low <= high; low++) {Scope.pagenums.push (low); }                        //calling externally bound functionsScope.onpagechange ();                }); }, Restrict:E, scope: {pagecount:"=", Currentindex:"=", Visiblepagecount:"@", Onpagechange:"&"}, Templateurl:"/html/lymipager.html"            }        }]);} (angular));

View Code

The HTML code is as follows:

<style>. Lymipagination{margin:0;padding:0;    }. lymipagination Li{Border:1px solid #99bbee;Color:#0088dd;List-style:None;margin:0;Padding-left:10px;Padding-right:10px;float: Left;cursor:Pointer;    }li.active{Background-color:#0088ff;Color: White;    }</style><ulclass= "Lymipagination">    <binNg-click= "Pagechange (1)">Home</Li>    <LiNg-click= "Pagechange (currentindex>1?currentindex-1:1)">Previous page</Li>    <binNg-class= "{Active:pagenum===currentindex}"Ng-click= "Pagechange (pagenum)"ng-repeat= "Pagenum in Pagenums">{{Pagenum}}</Li>    <LiNg-click= "Pagechange (currentindex<pagecount?currentindex+1:currentindex)">Next page</Li>    <LiNg-click= "Pagechange (pagecount)">Last</Li></ul>

View Code

The invocation instructions are as follows:

<lymi-pager page-count= "TotalPages" current-index= "PageIndex" visible-page-count= "4" class= "pager" On-page-change= "Search (searchkey,pageindex)" ></lymi-pager>

ANGULARJS Study Notes