Angularjs learning notes and angularjs learning notes

Angularjs learning notes and angularjs learning notes
1. constant

This function can register variables in the module and use them as services.

For example:

Var app = angular. module ("MyModule", []). constant ("pageConfig", {pageSize: 10 });

The preceding method defines the global variable of pageConfig available in a module. We can use this variable in the module like using services, for example:

App. controller ("MyController", ["$ scope", "pageConfig", function ($ scope, pageConfig ){

$ Scope. pageSize = pageConfig. pageSize;

}]);

Variables defined by constant cannot be modified once defined. Later we will talk about the value functions with similar functions.

Ii. directive

Directive can be used for custom commands. Custom commands can be used to expand HTML functions. For example, you can use directive to create your own element tag. In the following code, we

A command lymiPager is created to create a plug-in that implements the paging function. The javascript code is as follows:

$ (Function (angular) {angular. module ("lymi. pagerModule ", []) // page configuration information. constant ("pagerConfig", {initVisiblePageCount: 4, initCurrentIndex: 1, initPageCount: 0 }). directive ("lymiPager", ["pagerConfig", function (pagerConfig) {return {link: function (scope, ele, attrs) {// response function scope when the page number of the paging plug-in changes. pageChange = function (index) {scope. currentIndex = index;} scope. $ watch ("currentIndex + pageCount", function () {// Defines the default value if (! Attrs. currentIndex) {scope. currentIndex = pagerConfig. initCurrentIndex;} if (! Attrs. pageCount) {scope. pageCount = pagerConfig. initPageCount;} if (! Attrs. visiblePageCount) {scope. visiblePageCount = pagerConfig. initVisiblePageCount;} // sets the display page number scope. pagenums = []; var low = 1, high = 1; var showPage = 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);} // call the external bound function scope. 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 #99 bbee; 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> <ul class = "lymiPagination"> <li ng-click = "pageChange (1) "> homepage </li> <li ng-click =" pageChange (currentIndex> 1? CurrentIndex-1: 1) "> previous page </li> <li ng-class =" {active: pagenum = currentIndex} "ng-click =" pageChange (pagenum) "ng-repeat =" pagenum in pagenums ">{{ pagenum }}</li> <li ng-click =" pageChange (currentIndex <pageCount? CurrentIndex + 1: currentIndex) "> next page </li> <li ng-click =" pageChange (pageCount) "> last page </li> </ul>

View Code

The Calling command is as follows:

<Lymi-pager page-count = "totalPages" current-index = "pageIndex" visible-page-count = "4" class = "pager" on-page-change = "search (searchKey, pageIndex) "> </lymi-pager>

Important direve ve attributes:

Restrict attribute: This attribute can take four values ("ECMA"), E | element, C | class, M | comment, A | attribute, and four values can be selected multiple times, for example, if it is set to "EA", it indicates that custom commands can be used as elements or attributes.

Template and templateUrl: A string template and a Url template respectively. A Url template points an address to the path of the template file.

Link property: the value of this property is a function. This function registers a response event for a specific element. You need to use the scope parameter to perform operations on the element. The link property and the compile property are exclusive.

Compile attribute: the value of this attribute is also a function. The return value of this function is used as the value of the link attribute (if any ), if the function to be implemented is to change it before DOM rendering, and it is not used

The scope parameter can use the compile attribute.