Geek Answers Handbook

How to efficiently archive the state machine of an AngularUI UI router?

I am very new to AngularUI's new Ui-router library, which allows us to create nested views using the state machine configuration service, and I'm trying to find a better way to archive my states. I am creating an application that uses nested views, but my implementation is slightly different from the many examples I have seen.

The demonstration ui-routershows how the representation of nested performed using a finite state machine syntax {parent}.{child}.{grandchild}, which parentmay have an equivalent route /home, /order, /aboutetc.

Let's now create a sample website. Suppose at the top level we have 3 views that we want to display. 3 types: /home, /order, and /about. All of these views are mostly siblings, as regards ui-router. However, we need an abstract state for the actual root of our application. This state we will call root.

$stateProvider.
    .state('root', {
        abstract: true
        url: '/',
        templateUrl: 'templates/index.html`
    })

Templates /index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div ui-view></div>
</body>
</html>

Now, since it rootis abstract, we cannot just go directly to /to see our pages, we must call one of the child states home, aboutor order. Allows you to create these states.

$stateProvider
    .state('home', {
        url:'',
        templateUrl: 'templates/home.html'
    })
    .state('about', {
        url:'/about',
        templateUrl: 'templates/about.html'
    })
    .state('order', {
        url:'/order',
        templateUrl: 'templates/order.html'
    })

, /, /about /order, home, about order . , .

home about , , order, , ​​ overview, accounts, . order overview, , overview, , and billings`.

, order. ui-view, overview, accounts billings.

/order.html

<ul id="navMenu">
        <li ui-sref-active="active"><a ui-sref="">Back</a></li>
        <li ui-sref-active="active"><a ui-sref=".overview">Overview</a></li>
        <li ui-sref-active="active"><a ui-sref=".accounts" >Accounts</a></li>
        <li ui-sref-active="active"><a ui-sref=".billing">Billing</a></li>
</ul>

<div ui-view></div>

$stateProvider

$stateProvider
    .state('order', {
        abstract: true,
        url: '/order/:id',
        templateUrl: 'templates/order.html'
    })
    .state('order.overview', {
        url: '/overview',
        templateUrl: 'templates/order.overview.html'
    })
    .state('order.accounts', {
        url: '/accounts',
        templateUrl: 'templates/order.accounts.html'
    })
    .state('order.billing', {
        url: '/billing',
        templateUrl: 'templates/order.billing.html'
    })

, order , . . , ""

                          root (abstract)
                           / |  \
                          /  |   \
                         /   |    \
                        /    |     \
                     home  order  about
                           / |  \
                          /  |   \
                         /   |    \
                        /    |     \
                       /     |      \
                overview  accounts billing

, , , accounts , . , accounts , . , ENTIRE . accounts account.details :

/order/:orderId/accounts OR /order/3/accounts


/order/:orderId/accounts/:accountId OR /order/3/accounts/71

, 3 71 . ui-router accounts.details accounts, , details, INSIDE accounts. , , ui-router. accounts, , AngularUI accounts.

, -, , , ui-router. , , , .

- , ?

+4
1

:

:

, 3 71 . ui-router accounts.details , , , INSIDE . , , ui-router. , , AngularUI .

. , , , , . , , . , .

, , . , , , , , . , . . ui-router $state.

, $state.reload . , .

+1

More articles:


All Articles