AngularJS + UI-路由器常見的CRUD配置

我正在努力使用ui-router配置，它將在應用程序中定義基本的CRUD。AngularJS + UI-路由器常見的CRUD配置

我需要能夠添加，刪除，編輯和搜索客戶端。相當基本的任務。

URL爲「/ clients /」的主頁面顯示[添加客戶端]按鈕和用[搜索]按鈕進行搜索的關鍵字輸入字段。

一旦我在搜索字段中輸入內容並按下按鈕，我應該導航到「/ clients/search /：keyword」，但基本上我會留在同一頁面上，並且搜索結果將加載到輸入字段下方。

這很容易實現，但是當我需要編輯客戶端時開始有趣。

當我點擊搜索結果中的一行時，我希望彈出窗口顯示客戶端信息/表單。同時，應用程序應導航到某個URL，以便我可以使用該URL與某人共享，或者基本上在我的瀏覽器中使用後退按鈕。所以應用程序應該導航到「/ clients/edit /：clientId」。總體來說，對嗎？

當我嘗試添加新客戶端時，應該會發生類似情況。應用程序導航到「/客戶端/添加」或「/客戶端/編輯/ 0」。

你會爲此組織路線嗎？ Obovioulsy，Sticky routes和Deep State Redirect在這裏是必需的。所以我設法組織它到目前爲止是這樣的：

function clientStateConfig ($stateProvider, $rootScope) { 

    console.log('Client State :: init'); 

    $stateProvider.state('main.clients', { 
    url: '/clients', 
    skipAuthorisation: true, 
    controller: 'ClientStateController as clientState', 
    template: clientStateTemplate 
    }).state('main.clients.create', { 
    url: '/create', 
    skipAuthorisation: true, 
    views: { 
     'modal': { 
     template: '<div ui-view></div>' 
     } 
    }, 
    onEnter: showClientModal 
    }).state('main.clients.edit', { 
    url: '/edit/:clientId', 
    skipAuthorisation: true, 
    views: { 
     'modal': { 
     template: '<div ui-view></div>' 
     } 
    }, 
    onEnter: showClientModal 
    }).state('main.clients.search', { 
    url: '/search/:keyword', 
    skipAuthorisation: true, 
    deepStateRedirect: true, 
    sticky: true, 
    views: { 
     'search': { 
     template: clientSearchStateTemplate, 
     controller: 'ClientSearchStateController as clientSearch' 
     } 
    } 
    }); 

}; 

function showClientModal ($uibModal, $previousState, $rootScope) { 

    $previousState.memo('modalInvoker'); // remember the previous state with memoName 'modalInvoker' 

    let modal = $uibModal.open({ 
    template: clientModalTemplate, 
    backdrop: 'static', 
    controller: 'ClientModalController as clientModal' 
    }); 

}

ClientState模板：

<h1>Clients</h1> 
<div ui-view="search"></div> 
<div ui-view="modal"></div>

搜索模板： {{客戶}}

模態和控制器代碼與我認爲不相關。因此，第一個也是主要的問題是 - 當我導航到「/ clients /」時，顯然我看不到搜索字段，因爲我需要轉到「/ clients/search /」。所以客戶路線應該總是重定向到搜索。但是如果它總是重定向搜索 - 當用戶輸入「/ clients/edit/123」時彈出問題就出現了。在這種情況下，它不應該導航。

其他方式：我可以將搜索字段放入根ClientState模板中，並從那裏觸發$ state.go（'main.clients.search'）搜索按鈕。這將是理想的。但是當用戶從瀏覽器直接輸入url「/ clients/search/superkeyword」時，問題就會出現，ClientState將無法訪問該關鍵字狀態參數，因爲它是子狀態參數。所以關鍵字輸入字段將是空白的。

我完全迷茫與困惑。你會如何解決這個問題？

來源

2015-11-05 Fyodor

也許你可以使用'url：'/ clients？clientId''這會將clientId添加到$ stateParams中並且可以在你的控制器中使用。你可能會使用$ stateParams在一個URL上做所有的事情，因爲搜索可能是列表的過濾器，並使用'url：'/ clients？clientId＆keyword'' – Tristan

儘管您可能能夠獲得某種解決方案，但將urls與modals混合在一起會是一種痛苦。他們通常需要在單個url中提供背景url和模態url信息（例如通過查詢參數等）。你可以做一些不同的事情。

刪除所有模態的需要。有幾種方法可以做到這一點。
- 您可以擁有單獨的搜索頁面和客戶端頁面（但如果您的要求是用戶將快速選擇不同的用戶，那麼這可能會使UX出現問題）。
- 您可以將搜索和選定客戶端的html烘焙到同一頁面中。例如有一個包含搜索結果的區域（側邊欄或其他指定區域）。
把搜索和模態URL轉換成一個單一的更復雜的路由設置（例如/clients/edit/:id?search=test）
實現這兩種模態版本和一個單頁的版本。單頁版本將具有自己的URL（例如/clients/edit/:id），而模式版本仍然可以運行，但不會更改當前視圖的網址。

就我個人而言，我會在沒有模態的情況下執行最後一個建議，然後測試用戶體驗，如果確定需要模式，請將其作爲單獨的功能實施，不會影響網址。

來源

2015-11-05 06:05:49

AngularJS + UI-路由器常見的CRUD配置

回答

相關問題