Question

我有一些路线，其中一些视图使用我的index.html作为模板。在特定视图（例如登录页面）上，我不想将index.html用作模板。如何使用Angular执行此操作：

My routes:
.when('/user/:id/update',{
      templateUrl: 'views/updateUser.html',
      controller:  'updateUserCtrl'
  })
  .when('/role', {
    templateUrl: 'views/role.html',
    controller: 'RoleCtrl'
  })
  .when('/login', {
    controller: 'RoleCtrl' //Here I want a page withou template
  })

我已经尝试过使用这样的ui-route：

$stateProvider
.state('contacts', {
    abstract: true,
    template: '<ui-view/>',
    url: '/contacts'
})
.state('contacts.list', {
    // loaded into ui-view of parent's template
    templateUrl: 'contacts.list.html',
    url: '/list'
})
.state('contacts.detail', {
    // loaded into ui-view of parent's template
    templateUrl: 'contacts.detail.html',
    url: '/detail'
})

在这两种情况下，我的网页总是从我的index.html继承。

Answer 1

使用ui-router至少可以执行abstract：true将路由设置为无模板，并将控制器堆叠到视图中以实现分离行为。 https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

否则，对于vanilla angularjs，理论上你可以做模板：＆＃34;＆＃34;如果你想加载没有模板的控制器。 http://weblog.west-wind.com/posts/2013/Oct/15/Routing-to-a-Controller-with-no-View-in-Angular

Answer 2

不推荐使用它的方式，因为您的浏览器重新加载了应用的所有内容，并且它打破了单页应用程序的所有概念。

其中一种方法是在模板（html文件）中使用ng-view / ui-view，在服务/控制器中使用$location，以便在用户身份验证正常时替换网址。

看看这个plnkr中有两个有效的例子：

http://plnkr.co/edit/vPyH5lwbwYCMx6RCnVb0?p=preview

Answer 3

对于不希望index.html的基本模板（页眉，页脚等）出现的视图，您可以使用div覆盖整个页面（在该组件的html和css中）。

使用Angular而没有模板页面

3 个答案: