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 来处理两个不同的州。然后，对于两者来说，控制器都会很常见。这是最好的实践。我在任何地方都会遇到范围问题。

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

对于Admin，stff有不同的标题，sidemenu。这就是为什么我设计了不同的状态和不同的htmls。

请帮帮我。

Answer 1

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

标题
页脚
边栏
主要内容

第一个三个组件将与几乎所有应用程序状态保持一致。因此，最好使用abstract，header＆amp;创建footer（意味着此状态无法直接访问）状态。 sidebar组件。应用程序的每个部分都将驻留在自己的名为ui-view中。

此后，main-content视图将被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'}
    }
})

这是一个好的做法，在Angular js中使用单个templateUrl用于多个状态吗？

1 个答案: