在 Angular 中构建 $state

Question

我有一个网络应用程序。直到现在，我已经使用 .when 来定义所有 url。现在我想更好地了解 $state。所以，我有一个组成如下的网络： - 登录页面（public） -- 然后（私人）： - 仪表板主页 - 用户列表

私人方面由以下人员组成： - 带有欢迎信息的导航栏（顶部） - 带有按钮列表（主页和列表）的侧边栏（右侧） - 查看（我在这里看到仪表板主页，然后，如果用户按 'List'，请查看用户列表）。

在 main.js 我写了这个：

'use strict';

angular.module('app', [
'app.login',
'app.dashboard'
]).config(
['$stateProvider', '$urlRouterProvider', '$resourceProvider',
function($stateProvider, $urlRouterProvider, $resourceProvider) {

  $resourceProvider.defaults.stripTrailingSlashes = false;

$urlRouterProvider
  .otherwise('/login');

 $stateProvider

  // Definizione dei template di base per le pagine
  .state('app.dashboard', {
    url: '/dashboard',
    templateUrl: 'dashboard.html',
    controller: 'dashboardCtrl'
  })

  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'app.html',
  })

  .state('login', {
    url: '/login',
    templateUrl: 'login.html',
    controller: 'LoginController'
  })

  .state('app.list', {
    url: '/list',
    templateUrl: 'list.html',
    controller: 'ListController',
  })

}])

什么应该/不应该是摘要？我应该做一个 'common' $state 吗？还因为我想添加一个授权，如果你没有登录就不能继续。能帮我把路由结构化，理解抽象状态吗？

Answer 1

您使用抽象状态的原因是当您拥有 url non-navigable 的一部分时保持您的定义干燥。例如，假设您有一个如下所示的 url 方案：

/home/index
/home/contact

但是，无论出于何种原因在您的设计中，这个 url 是无效的（即页面没有目的）：

/home

现在你可以简单地为这种情况创建两个状态，具有完整的 urls，但是你会写两次 /home/，并且描述有点复杂。相反，最好的想法是创建一个主页摘要 parent，其中其他两个状态是 children（对于 ui-router 文档）：

$stateProvider
    .state('parent', {url: '/home', abstract: true, template: '<ui-view/>'} )
    .state('parent.index', {url: '/index', templateUrl: 'index.html' })
    .state('parent.contact', {url: '/contact', templateUrl: 'contact.html' })

请注意，在 parent 状态中，我们分配了一个模板，其唯一的 child 是 ui-view。这确保 children 被渲染（这可能是你的显示为空白的原因）。

有时您可能会注意到使用带有空白的抽象状态 url。此设置的最佳用途是当您需要 parental resolve 时。例如，您可能需要一些特定的服务器数据用于您的一部分状态。因此，您可以创建一个具有所需分辨率的空白 url parent，而不是将相同的解析函数放入您的每个状态。如果你想要分层控制器，它也可能很有用，其中 parent 对视图没有用处（不确定你为什么想要这个，但它是合理的）。

来源：

在 Angular 中构建 $state

Structure the $state in Angular

angularjs

controller

session-state-provider