Question

我有一个网络应用程序。到目前为止，我已经使用过.when来定义所有网址。现在我想更好地了解$ state。所以，我有一个网络，其组成如下： - 登录页面（公共） - 然后（私人）： - 仪表板回家 - 用户列表

私人方面由以下人员组成： - navbar（top）whith welcome messagges - 侧边栏（右侧）带有按钮列表（主页和列表） - 查看（我在主页上看到仪表板，然后，如果用户按下“列表＆＃39;”，请查看用户列表）。

在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',
  })

}])

应该/不应该是一个摘要？我应该做一个普通的＆＃39; $状态？另外，因为我想添加授权，如果您没有登录，就无法继续。你能帮我构建路由并理解抽象状态吗？

Answer 1

您使用抽象状态的原因是当您的部分网址不可导航时，保持您的定义干。例如，假设您有一个如下所示的网址方案：

/home/index
/home/contact

但是，无论出于何种原因，您的设计中此网址无效（即页面没有用途）：

/home

现在你可以简单地为这种情况创建两个状态，使用完整的URL，然而你会写/home/两次，描述有点复杂。最好的想法是创建一个家庭抽象父母，其他两个州是儿童（对于ui-router docs）：

$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' })

请注意，在父状态中，我们分配了一个唯一的子项为ui-view的模板。这可以确保渲染子项（并且可能是您的子项显示为空白的原因）。

有时您可能会注意到使用带有空白网址的抽象状态。当您需要父母resolve时，最好使用此设置。例如，您可能需要一些特定的服务器数据用于您的状态子集。因此，您可以创建一个具有所需解析的空白URL父级，而不是将相同的解析函数放入每个状态。如果你想要层次结构控制器，它也可能是有用的，其中父级对视图没有用处（不确定为什么你会想要这个，但它似乎是合理的）。

来源：Why give an "abstract: true" state a url?

在Angular中构造$ state

1 个答案: