In the process of learning AngularJS, I felt that it is a preferable way to obtain information from the server database at one time and paginate it on the front end. Because it saves the communication load of the front and back ends, and handes more display tasks to the front end.
This content is divided into two parts. The first part will briefly introduce AngularJS’s built-in service $location and its functions; the second part will realize the effect of pagination display of database information through a relatively complete comprehensive example.
When working on Mutilpe View & Route of angularJS, I feel that I should have a deeper understanding of angularJS's built-in services & location, because the operation of the built-in URL serving the browser is closely related. I feel that if this service is processed, it will be very helpful for page page turnover in the future.
Below are some of my small experiments and some experiences, which are written in vernacular and may not be so professional, but I hope it will be helpful for everyone to understand some concepts of angularJS.
This &location is used as a service, as a parameter of the controller's return function in dependency injection. The following is an example to explain the use of this service.
Section 1: Get URL information
&location provides some getter and setter methods, such as absUrl, path, protocol, host, port. The specific explanation is that these are the function names of the link address functions provided by &location. If these functions do not pass in any parameters when used, it means obtaining the current url information; if some parameters are passed in, it means setting the url information in the current browser.
Example 1
<!DOCTYPE html><html ng-app="LocationApp"><head lang="en"> <meta charset="UTF-8"> <title></title></head><body ng-controller="LocationController"><p>absUrl-----------{{absUrl}}</p><p>path---------------{{path}}</p><p>protocol-----------{{protocol}}</p><p>host----------------{{host}}</p><p>port----------------{{port}}</p><script src="angular.js"></script><script> var LocationApp = angular.module('LocationApp', []); LocationApp.controller('LocationController', ['$scope', '$location', function ($scope, $location) { $scope.absUrl = $location.absUrl(); $scope.path = $location.path(); $scope.protocol = $location.protocol(); $scope.host = $location.host(); $scope.port = $location.port(); }]);</script></body></html>From the screenshot, it can be clearly seen that the getter method provided by the $location service can easily obtain the current URL information of the l browser.
Careful students may have seen this path, why is there no value?
This is because there is no path information in the link address. If we manually set a path information through the path() method and then refresh the browser (the browser's url address is the information you modified when refreshing and will not change), we will see the path information. There are pictures and truth!
Example 2
$location.path('detail');
$scope.path = $location.path();
From the small modification above, I modified the code and first modified the value of its path attribute in the built-in service of $location (its essence is an object, which contains many attributes about url information).
Then get the new value through the getter method.
Also, because the URL information that serves the browser address bar is bidirectional binding (this is the most exquisite part of angularJS), no matter the attributes of the location object or the browser address bar, as long as one party's url information changes, the other party will also change. So I saw that there is also a path information like detail in the browser's address bar in the screenshot. This information was set through the code before.
About AngularJS implementation of pagination display function will be introduced to you in the next article, I hope you don’t miss it.