The Difference Between ng-route and ui-router of Angular routes is described in detail. ng-routeui-router

The Difference Between ng-route and ui-router of Angular routes is described in detail. ng-routeui-router

What is a route?

Routing is the basis for AngularJS to build a single page application.

A route is a network component that distributes network data or requests.

Routing is an application component used to request URL distribution and redirection. Angular performs core configuration processing through the $ routeProvider routing service provider.

Ng route

Ng routing is a simple routing operation officially provided by AngularJS.

Ng route consists of three main components: Route instruction, routing service, and routing service provider.

Route command: ng-view

The ngView command is used to render the page to which the route points to the current page layout.

Syntax:

<ng-view [onload=”string”] [autoscroll]=”string”></ng-view>

1. Onload: Execute the expression in the attribute value when the view changes
2. Autoscroll: automatically triggers the $ anchorScroll event when the view changes.

Event:

Once the routing view is loaded, the $ viewContentLoaded event is automatically triggered.

Route provider: $ routeProvider

Description:

Built-in service object built-in service object $ routeProvider is mainly used for Route Configuration
The use of the Service must depend on the ngRoute module, that is, the module must be added in the project, that is, the animate-route.js must be added in the project

Main Methods:

When (path, route); used to jump to the view specified by route when accessing the path | -- path: route jump path | -- route: route object <Component Object>, a json object, otherwise (params), is used to jump to the default path or view when a non-stored path is accessed. | -- params: Specifies the path or route object.

Built-in service <routing service>: $ route & $ routeParams

$ Route is used to describe the deep hyperlink information. It listens to the $ location. url () Address and maps the url address to the specified route view.

$ RouteParams allows developers to process parameters in a route.

Ui Routing

Ng routes officially provided by Angular already have very powerful functions, but in some cases there are some areas that are not very useful, if a large number of deep nesting routes appear in the project, the ng route is not very suitable for processing.

The third party provides a powerful routing processing function, which can be very simple for routing nesting.

Ui-route: ui route, third-party route

The main function of ui routing is the routing operation in the project. Compared with the official ng routing, its processing method is more concise and easy to use, especially when it involves a large number of Route nesting in the project, you can use the ui route to quickly and conveniently complete the route jump process in the project.

Ui-view: Command

Ui-view is the instruction for displaying data on the template page in ui routing. It can be used as a tag attribute or as a tag attribute.

<div ui -viewviewviewview></div>><ui -view></uiview>

You can also name the ui-view command to display the corresponding data on the ui-view with the corresponding name during route jump.

Conclusion: Differences

① Ng routing cannot implement multi-page applications

② Ui routing: it is easier to process route nesting and can be done in the state () function.

③ Comparison Between ngRoute and ui-route:

$ When-> $ state when the route status is configured

$ RouteParams-> $ stateParams configuration with Parameters

$ RouteProvider-> $ stateProvider dependent injection module

<Div ng-view> </div>-> <div ui-view> </div> commands bound to the page

④ In uiRoute, You can nest a deeper route, that is, there can be a route in the route (there are roughly two situations: 1. Horizontal 2. Vertical ).

(1) nested Routing

(2) multi-view Routing

NgRoute cannot nest deeper routes.

Use the code to see the differences between the two:

Ng route: first configure and register ngRoute

The Code is as follows:

 var app = angular.module(“myApp", ['ngRoute']);         app.config(["$routeProvider",function($routeProvider){ }]); 

Ui routing: Use hello world for example:

<! DOCTYPE html> 
The effect is as follows:


This is a simple single page Jump. If you are interested, you can think about multi-page applications.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.