javascript - 在 Angular js 中使用单个 templateUrl 表示多个状态是一个好习惯吗？

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 6 年前。

Improve this question

我正在使用 Angular 框架。我只是想知道我的工作方式好不好？如果没有，解决办法是什么。

我的要求是，如果我以管理员身份登录，我有一个个人资料页面如果我以员工身份登录，那么我有相同的个人资料(相同的 html)，但页眉、侧菜单、页脚不同

所以我像使用 $staeprovider 一样创建状态

.state('adminHeader', {
    url:'/adminHeader',
    templateUrl:'adminHeader.html'
})
 .state('adminHeader.sidebar', {
    url:'/sidebar',
    templateUrl:'sidebar.html'
})
.state('adminHeader.sidebar.profile', {
    url:'/profile',
    templateUrl:'profile.html'
})
.state('staffHeader', {
    url:'/staffHeader',
    templateUrl:'staffHeader.html'
})
.state('staffHeader.staffprofile', {
    url:'/staffHeader',
    templateUrl:'profile.html'
});

我在两种不同的状态下使用profile.html。那么 Controller 将是两者通用的。这是最佳实践吗？我在任何地方都会遇到范围问题。

如果没有，请建议解决此问题。

对于管理员来说，stff 有不同的标题、侧菜单。这就是为什么我设计了不同的状态和不同的 html。

请帮助我。

Answer 1

我建议您，您应该将您的应用程序页面分解为小组件。它将独立负责自己的 Angular 色。如果需要，他们将通过服务进行沟通。我想说，您可以在应用程序中取出以下组件列表。

1. 标题
2. 页脚
3. 侧边栏
4. 主要内容

第一个三个组件将与应用程序的几乎所有状态保持相同。因此，最好使用 header、footer 和 sidebar 组件创建一个 abstract(意味着该状态无法直接访问)状态。应用程序的每个部分都将驻留在其自己命名的 ui-view 中。

此后，main-content View 将替换为 admin 的子状态，可以是 admin.dash/admin.staff /admin.profile.

配置

.state('admin', {
  url: '/admin',
  abstract: true,
  controller: 'adminController',
  views: {
    '': {
      templateUrl: 'admin.html',
      controller: 'adminCtrl'
    },
    'header': {
      templateUrl: 'header.html',
      controller: 'headerCtrl'
    },
    'footer': {
      templateUrl: 'footer.html',
      controller: 'footerCtrl'
    }
  }
})
.state('admin.profile', {
  url: '/admin',
  views: {
    'main-content@admin': {
      templateUrl: 'profile.html',
      controller: 'profileCtrl'
    }
  }
})
.state('admin.dash', {
  url: '/dash',
  views: {
    'main-content@admin': {
      templateUrl: 'dash.html',
      controller: 'dashCtrl'
    }
  }
})

然后特殊的部分是当涉及到人员状态标题时将通过人员状态进行更改。

.state('admin.staff', {
    url:'/staff',
    views: {
       'main-content@admin': {
          templateUrl: 'staff.html',
          controller: 'staffCtrl'
       },
       'header@': {
          templateUrl: 'staffHeader.html',
          controller: 'staffHeaderCtrl'
       }
    }
})

如果您使用 Angular 1.5+ 实现它，您可以为应用程序和状态代码的每个部分创建一个组件，并使用可重用的组件架构将其简化为以下内容。

.state('admin', {
    url:'/admin',
    abstract: true,
    controller: 'adminController'
    views: {
       '': { component: 'admin' },
       'header': { component: 'header' },
       'footer': { component: 'footer' }
    }
})
.state('admin.profile', {
    url:'/admin',
    views: {
       'main-content@admin': { component: 'profile' }
    }
})
.state('admin.dash', {
    url:'/dash',
    views: {
       'main-content@admin': { component: 'dash' }
    }
})
.state('admin.staff', {
    url:'/staff',
    views: {
       'main-content@admin': { component: 'staff' },
       'header@': {  component: 'staff-header'}
    }
})