Угловой UI-роутер разной верстки главной страницы для разных представлений

Я немного застрял с проблемой UI-маршрутизатора, каждый быстрый ответ будет принята с благодарностью.

Мне удалось настроить главную главную страницу, которая будет использоваться на всех дочерних страницах. Содержание дочерних страниц также выбирается правильно.

Теперь точка, в которой я застрял, - это вид входа в систему / регистрации. Так как они не будут частью одного и того же главного макета, они будут простым макетом с элементами управления html в центре страницы, и больше ничего у меня не получается понять, как я могу включить логин / регистр в пользовательском интерфейсе логика

Это то, что я до сих пор:

логика UI-роутера:

app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise("/home");
    $locationProvider.html5Mode(true);

    $stateProvider
      .state("home", {
          url: "/home",
          templateUrl: "/views/home/index.html",
          controller: "homeController",
          contrllerAs: "homeCtrl",
          data: {
              css: '/assets/css/homepage.css'
          }
      })
        .state("ourteam", {
            url: "/ourteam",
            templateUrl: "/views/home/our-team.html"
        })
    .state("accountlogin", {
        url: "/accountlogin",
        templateUrl: "/views/home/login.html",
        controller: "loginController"
    })
});

Разметка главной страницы (не входящей в систему) в сокращенной версии:

<!DOCTYPE html>
<html>
<head>
    <base href="/" />
</head>
<body ng-app="app" ui-router-styles class="fixed-footer home-page">
    <header class="header">
        <div class="container">
            <nav class=" navbar">
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-nav-relm">
                        <li class="active"><a ui-sref="home">Home</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Borrowers <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a ui-sref="Link1">Link1</a></li>
                                <li><a ui-sref="Link2">Link2</a></li>
                                <li><a ui-sref="Link3">Link3</a></li>
                            </ul>
                        </li>
                        <li><a ui-sref="ourteam">Our Team</a></li>
                        <li><a ui-sref="contact">Contact</a></li>
                        <li><a ui-sref="accountlogin">Login</a></li>
                    </ul>

                </div>

            </nav>
        </div>
    </header>
    <!-- START CHILD CONTENT -->
 <ui-view></ui-view>
    <!-- END CHILD CONTENT -->
   </body>
</html>

Страница входа (сокращенная версия):

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body class="login">
    <div class="content" ng-app="app">
        <!-- BEGIN LOGIN FORM -->
        <div class="login-form" ng-controller="loginController">
            <div class="form-group">
                <label>Email</label>
                <input data-ng-model="loginData.userName" required autofocus/>
            </div>
            <div class="form-group">
                <label>Password</label>
                <input data-ng-model="loginData.password" required/>
            </div>
            <div>
                <button type="submit" ng-click="Login()">Login</button>
            </div>
        </div>
        <!-- END LOGIN FORM -->
    </div>
</body>
</html>

Теперь, что будет правильным способом перенаправить на этот новый макет (или включить в существующую главную страницу)?

Ответ очень ценится в это время.

Спасибо, лазиале

Источник

1 ответ

В "Функция входа в систему" ​​сначала попытайтесь аутентифицировать пользователя с помощью внутренних методов и служб, таких как Passport и JWT., а затем перенаправьте в определенное состояние, если ошибки нет.
Попробуйте это руководство. Проверьте подлинность API-интерфейса Node.js с помощью веб-токенов JSON.

Источник
Другие вопросы по тегам