ANGULARJS Built-in service $location and its functional detailed _angularjs

Source: Internet
Author: User

In the process of learning angularjs, it is a preferable way to get information from a server-side database and paging through the front end. Because it saves back and forth the communication load, the more display aspects of the task to the front-end processing.

This content is divided into two parts, the first part gives you a brief introduction of ANGULARJS's built-in service $location and its functions; the second part realizes the effect of pagination displaying database information by a comprehensive example.

In doing Angularjs's Mutilpe View & Route's work, I feel that we should have a deeper understanding of Angularjs's built-in service &location, because this built-in service to the browser's URL is closely related to the operation, Feel that if the service is handled well, it will be helpful to page-flipping in the future.

Here are some of my small experiments, as well as some of the experience, are written in the vernacular, may not be so professional, but I hope that you understand angularjs some of the concepts help.

This &location is used as an argument for the return function of the controller as a service, in the form of dependency injection (dependency injection). Here is an example to explain the use of this service.

Section 1: get URL information

&location offers a number of getter and setter methods, such as Absurl,path,protocol,host,port. The specific explanation is that these are the function names provided by &location for the linked address functions, if they are used without passing any arguments, the current URL information is obtained, or the URL information in the current browser is set if some arguments are passed in.

Instance 1

<! DOCTYPE html>
 
 

The screenshot can be seen clearly, $location the Getter method provided by this service can easily get the current URL information of L browser.

The careful schoolmate may have already seen, this path how does not have the value?
This is because there is no path 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 not changed when you refresh it), you will see the path information. There is a picture of the truth!

Instance 2

$location. Path (' detail ');
$scope. Path = $location. path ();

From the small changes above, I've modified the code to first modify the value of its path attribute in the $location service (essentially an object, which has a lot of properties about URL information) in the setter method.
The new value is then obtained through the Getter method.

Also because location this URL information service in the browser address bar is two-way binding (this is the most exquisite place of angularjs), so regardless of the Location object's properties or browser address bar, as long as one side of the URL information changes, then the other side will also follow the change. So see the screen in the browser's address bar also has a detail such a path information, this information is previously set by the code.

About ANGULARJS implementation of pagination display function in the next article for everyone to introduce, I hope we do not miss.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.