[Angularjs] views and routes (iii)

Write in front

In the previous article, we mainly introduced the second parameter of when method in routing, several common properties, and the function. This article will describe several common services related to routing.

Series Articles

[Angularjs]ng-select and Ng-options

[Angularjs]ng-show and Ng-hide

[Angularjs] View and Route (i)

[Angularjs] View and Routing (ii)

$routeParams

In this case, when designing a route, we want to pass the parameter on the route, but how do we receive it when we jump to the specified route? This will use the $ROUTEPARAMS directive. The passed parameter, Angularjs will parse it out and pass it to $routeparams.

An example

$routeProvider         . When ('/user/:name ', {          controller:' Usercontroller ',          Templateurl:' views/user.html '          });

The approximate meaning of this example is to query the user information by name.

When access to such a route is #/user/wolfy,angularjs adds a key named name to the $routeparams and its value is set to the value in the loaded URL. For example here, $routeParams object looks something like this:

{name: ' Wolfy '}

It is important to note that if you want to access these variables in the controller, you need to inject the $routeparams into the controller:

App.controller (' Usercontroller ',function($scope, $routeParams) {                     console.log ($routeParams. Name );});

$location Services

ANGULARJS provides a service to parse the URL in the Address bar and gives you access to the route that corresponds to the current path of the app. It also provides the ability to modify paths and handle various forms of navigation.

The $location service encapsulates the API for Window.location objects in javasrcipt more gracefully, and or Angularjs inherits them together.

When an application needs to jump internally, it is the best scenario for using the $location service, such as a jump after the user has registered, modified, or logged in.

$location service does not have the ability to refresh the entire page. If you need to refresh the entire page, you need to use the $window.location object (an interface for window.location).

Several common methods of $location services

Path ()

$location. Path (); // used to get the current path of the page. 

Modifies the current path and jumps to another URL in the app that is empty when the URL is fetched, and the URL is modified when the route is passed:

$location. Path ('/'); // Modify path to '/' route

The path () method interacts directly with the HTML5 history API, so the user can return to the previous page by clicking the Back button.
Replace ()

ANGULARJS provides the replace () method to do this if you want the user to not click the Back button after a jump (for a jump after a login that takes place after a jump):

$location. Path (' home '); $location. replace (); // or $loaction. Path (' home '). replace ();

Absurl ()

The Absurl () method is used to go back to the full URL after encoding.

$location. Absurl ();

Hash ()

The hash () method is used to go back to the hash fragment in the URL:

$location. hash (); // returns the current hash fragment

Host ()

This method is used to go back to the host in the URL:

$location. Host (); // host of the current URL

Port ()

This method is used to get the port number in the URL:

$location. Port ();

Protocol ()

This method is used to obtain the protocol in the URL:

$location. Protocol ();

Search ()

This method is used to get the query string in the URL:

$location. Search ();

We can change the query string part of the URL by passing in the new query parameter in this method:

// Object Settings Query $location. Search ({name: ' Wolfy ', UserName: ' Wolfy Sun '}); // sets the query $location with a string . Search (' name=wolfy&username=wolfy sun ');

The search method can receive two parameters:

• Search (optional, string, or object): This parameter is pending for a new study. The value of a hash object can be an array.
• Paramvalue (optional, String): If the type of the search parameter is a string, then Paramvalue overrides the corresponding value in the URL as the value of the parameter. If the value of paramvalue is null, the corresponding parameter is removed.

An example

// the URL with the # number, see? URL of the number, see  url below = http://www.wolfy.com? #name =wolfy

Use the search method to get the arguments, so you can:

// get URL parameters   $location. Search (). Name;   // or  

URL ()

This method is used to get the URL of the current page:

$location. URL (); // the string for the URL

If a parameter is passed when the URL () method is called, the current URL is set and modified, which modifies the path, query string, and hash in the URL, and returns $location.

// sets the new URL$location. URL ('/home?name=wolry#hashthing ');

The URL () method can receive two parameters:

URL (optional, string): The base prefix of the new URL.

Replace (optional, string): The path you want to modify.

Summarize

In the current project, more $routeparams and $location.path () are used to get the parameters passed, and when the user completes an operation, the modified route jumps to the new templateurl. and render in places where the Ng-view is occupied.

Article from

Angularjs Authoritative Tutorials

[Angularjs] views and routes (iii)