AngularJS-帶向導的UI-Router

Question

我正在使用ui-router來設置我的路由，如下所示：

$stateProvider
    .state('root', {
        url: "",
        templateUrl: 'path/login.html',
        controller: 'LoginController'
    })
    .state('basket', {
        url: "/basket",
        views: {
            '': {
                templateUrl: 'path/basket.html',
                controller: 'BasketController'
            },
            'address@basket': {
                templateUrl: 'path/address.html',
                controller: 'AddressController'
            },
            'confirmation@basket': {
                templateUrl: 'path/confirmation.html',
                controller: 'ConfirmationController'
            },
            'payment@basket': {
                templateUrl: 'path/payment.html',
                controller: 'PaymentController'
            }
        }
    });

在我的basket.html我正在使用basket.html mgo-angular-wizard創建一個“步驟欄”。

<wizard on-finish="finishedWizard()">

<wz-step title="Address">
    <div ui-view="address"></div>
</wz-step>

<wz-step title="Confirmation">
    <div ui-view="confirmation"></div>
</wz-step>

<wz-step title="Payment">
    <div ui-view="payment"></div>
</wz-step>

到目前為止，一切正常。 但是我需要創建在這些頁面之間導航的按鈕。 例如：地址頁面需要一個按鈕，該按鈕將用於調用確認頁面。 我在網絡上看到一些使用ui-sref="$state.go('basket.address')"但是由於我沒有使用此結構（帶點），所以我不知道該怎么做它（使用confirmation@basket無效）。

我是Angular的新手，正在學習流程。 提前致謝。

Answer 1

在我看來，除了Ui.Router之外，您不需要其他任何東西，因為它是有角度的，因此您可以以無狀態的方式在狀態之間進行導航（例如，在服務中保存某些內容）。

嵌套狀態可能是一件好事...

腳步：

1. 創建父抽象狀態：允許子狀態繼承視圖，解析，URL片段的籃子 。
2. 創建子狀態： 地址； 確認 付款

 angular .module('checkout', ['ui.router']) .config(function($stateProvider) { var basket = { name: 'basket', url: '/basket/', abstract: true, views: { "main": { template: "<h1>Bye</h1>", controller: function() { alert('bye'); } }, "sidebar": { template: "<ul><li>LINK</li></ul>", controller: function() { console.log('sidebar view'); } } } }; var address = { name: 'basket.address', url: '' }; var confirmation = { name: 'basket.confirmation', url: 'confirmation/', views: { "main@": { template: "<h1>ss</h1>", controller: function() { alert('ss'); } } } }; var payment = { name: 'basket.payment', url: 'payment/', views: { "main@": { template: "<h1>zz</h1>", controller: function() { alert('zz'); } } } }; $stateProvider .state(basket) .state(address) .state(confirmation) .state(payment) ; }) ; 

 <section ui-view="main"></section> <aside ui-view="sidebar"></aside> <ul> <li><a ui-sref="basket.address">Address</a></li> <li><a ui-sref="basket.confirmation">Confirmation</a></li> <li><a ui-sref="basket.payment">Payment</a></li> </ul> 

3. 通過angular.module（'checkout'）。value創建一個服務，該服務存儲所有結帳進度。

---

順便說一句，如果您需要將所有視圖和狀態都保存在一個視圖中，則可能需要這個名為STICKY STATES的 Ui.Router.extra，該鏈接提供了許多示例...

希望能幫助到你！