AngularJS Route: Ui-router

Ui-router is a client-side routing framework provided by Angular-ui, which solves many of the deficiencies of native Ng-route:
Views cannot be nested. This means that $scope will be unnecessarily re-loaded. This is why we introduced Ui-route in the onboard.
Multiple views are not supported under the same URL. This requirement is also common: we want the navigation bar to have a view (and the corresponding controller), a content section with another view (and the corresponding controller).
Ui-router put forward the concept of $state. A $state is the state of a current navigation and UI, and each $state needs to bind a URL Pattern. In the controller and template, the URL jumps and routes are made by changing the $state. This is a simple example:

<!--in index.html--><body ng-controller= "Mainctrl" >    <section ui-view></section></ body>//in App-states.js$stateprovider    . State (' contacts ', {        URL: '/contacts ',        Template: ' Contacts.html ',        controller: ' Contactctrl '    })    . State (' Contacts.detail ', {        URL: '/contacts/: ContactId ",        templateurl: ' contacts.detail.html ',        controller:function ($stateParams) {            //If we got here From a URL of/contacts/42            $stateParams. contactId = = = "";        }    });

When accessing/contacts, the contacts $state is activated to load the corresponding controller and view. In Ui-router, it is common to use $state to complete page jumps instead of directly manipulating URLs. For example, the script uses $state.go:

$state. Go (' contacts ');  Specifies the state name, which is equivalent to jumping to/contacts$state.go (' Contacts.detail ', {contactid:42});  Equivalent to jump to/CONTACTS/42

　

Use Ui-sref (this is a directive) in the template:

<a ui-sref= "Contacts" >contacts</a><a ui-sref= "Contacts.detail ({contactid:42})" >Contact 42</a >

　　

Nested views

Views that differ from angular native ng-route,ui-router can be nested, and view nesting usually corresponds to the nesting of $state. Contacts.detail is Contacts's child $state,contacts.detail.html will also act as a sub-page for contacts.html:

<!--contacts.html-->
The usage and ng-view of the above Ui-view look very similar, but the difference is that Ui-view can be nested with $state at any level, that is, contacts.detail.html can still contain a ui-view, its $ State may be contacts.detail.hobbies.

Named views
In Ui-router, you can have multiple views under a $state that have their own templates and controllers. This is also what Ng-route does not have, giving the front-end routing great flexibility. See Example:
<!--index.html--><body><div ui-view= "Filters" ></div>    <div ui-view= "Tabledata" > </div>    <div ui-view= "graph" ></div>    </body>
　　
This template contains three named Ui-view that can be used to set up templates and controllers individually:
$stateProvider    . State ("Report", {views        : {            ' filters ': {                templateurl: ' report-filters.html ',                Controller:function ($scope) {... controller stuff just for filters view ...}            },            ' Tabledata ': {                templateurl: ' report-table.html ',                controller:function ($scope) {... controller stuff just for Tabledata view ...}            },            ' G Raph ': {                templateurl: ' report-graph.html ',                controller:function ($scope) {... controller stuff just for graph View ...}}    )
　　
AngularJS Route: Ui-router