Question

我是angularjs的新手，所以请考虑我的错误。

场景是，我有一个index.html页面和login.html页面，索引和登录将有不同的布局，因此不同的页眉和所有。所有其他页面预计登录将与index.html共享相同的布局

现在，我如何使用anuglar ui路由器导航到login.html。

myApp.config（function（$ stateProvider，$ urlRouterProvider）{

$stateProvider.state('home', {
        url: '/',
        templateUrl: 'app/views/site/home.html',
        controller: 'homeCtrl'
    }).state('login', {
        url: '/login',
        templateUrl: 'app/views/site/login.html'
    })
});

这不起作用，因为它将登录内容加载到索引保持页眉和页脚相同的索引中。我知道国家应该这样工作。

现在，有什么方法可以使用ui.router调用一个全新的视图。

我非常感谢你的帮助。感谢

Answer 1

您可以设置多个命名视图（https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views）。

这将允许您将页眉和页脚放入可以交换的单独视图中。但是，我认为没有办法完全换掉整个页面。

<body>
    <header ui-view="header"></header>
    <main ui-view="content"></main>
    <footer ui-view="footer"></footer>
</body>

.state('login', {
    views: {
      'header': { ... templates and/or controllers ... },
      'content': {  ... templates and/or controllers ... },
      'footer': {  ... templates and/or controllers ... },
    }
  })

Answer 2

我通过将整个布局转换为模板来实现这一目标。从本质上讲，我的index.html只不过是：

<html ng-app="appName" ng-strict-di>
<head>
    <title></title>
</head>
<body>
    <div class="ng-cloak" ng-cloak ui-view></div>
</body>
</html>

然后我使用抽象状态来创建模板区域。例如，我的身份证明：

$stateProvider
  .state('auth', {
    abstract: true,
    url: '/auth',
    template: '<div ui-view></div>'
  })

  .state('auth.login', {
    url: '/login',
    templateUrl: 'auth/login.html',
    controller: [ loginController],
    controllerAs: 'vm'
  })

  .state('auth.logout', {
    url: '/logout',
    resolve: {
      logout: [ 'api', function (api) {
        return api.getLogout().$promise;
      }]
    },
    controller: [ logoutController],
    controllerAs: 'vm'
  });

这会导致auth/login路径直接渲染到主ui-view，在那里它可以拥有自己独特的布局。同样，我可能有一个抽象的core状态，为我的应用程序的核心部分设置一个共同的范围和模板，它们共享一个共同的模板结构。

如果有重复使用的元素同时触及核心部分和身份验证部分，那么我使用ng-include来引入这些部分部分。

在角度js中重定向到新模板

2 个答案: