Question

我是AngularJS的新手，我对如何在以下场景中使用angularjs ui-router感到困惑：

它由两部分组成。第一部分是主页，其中包含登录和注册视图，第二部分是仪表板（成功登录后）。

当我登录成功时，需要从登录表单导航到“主页”。
当我点击注册按钮时，我需要从登录页面
同样我也需要一个“忘记密码”屏幕

我当前的路由器在下面。我该怎么做这个功能？（请帮助一些HTML代码和相关的控制器）

app.js：

'use strict';
    //Define Routing for app
    angular.module('myApp', []).config(['$routeProvider', '$locationProvider',
      function($routeProvider,$locationProvider) {
        $routeProvider
        .when('/login', {
            templateUrl: 'login.html',
            controller: 'LoginController'
        })
        .when('/register', {
            templateUrl: 'register.html',
            controller: 'RegisterController'
          })
        .when('/forgotPassword', {
            templateUrl: 'forgotpassword.html',
            controller: 'forgotController'
          })
       .when('/home', {
           templateUrl: 'views/dashBoard.html',
           controller: 'dashBordController'
        })
        .otherwise({
           redirectTo: '/login'
        });

    }]);
});

Answer 1

首先，没有人会为您设计一个符合您要求/功能的网站。 stackoverflow针对具体问题，您的问题过于宽泛，更多关于它 - How to Ask。但是为了帮助您进行从ngRoute到ui.router的转换，我可以描述语法的外观，以便您可以将其用于您的网站。

<小时/>

转换为`ui.router`

您的配置不会发生太大变化。您需要将.when替换为.state，使用正确的提供程序，并使用正确的语法。这是一个只有少数几个州的例子：

＆＃13;

app.config(config);
/* your preferred way of injecting */
config.$inject = ['$stateProvider', '$urlRouterProvider'];

function config($stateProvider, $urlRouterProvider) {
  $stateProvider.
  state("HomepageState", {
    url: "/home",
    templateUrl: 'views/dashBoard.html',
    controller: 'dashBordController'
  }).
  state("RegisterState", {
    url: "/register",
    templateUrl: 'register.html',
    controller: 'RegisterController'
  })
  /*
    more can be added here...
  */
  $urlRouterProvider.otherwise('/login');
}

＆＃13;

<小时/>

重定向

填写登录表单后，用户将按下以下内容：

<button ng-click="login()">Sign in</button>

将调用函数login()，该函数将验证/验证用户是否可以登录。（您还可以<form ng-submit="login()">使用<button type="submit">...）然后，如果一切正常，用户获得了会话/ cookie，您可以通过以下方式重定向到另一个页面：

$state.go("HomepageState");

（别忘了将$state注入你的控制器）

<小时/>

高级导航

将来如果您拥有按索引列出的用户个人资料。您可以使用$stateParams改进路由。他们的工作是检查URL中的任何其他参数。例如：网址：/profile/721可以包含url:"/profile/:id"的州。然后，您可以使用$stateParams.id提取该ID，并在控制器中使用它。你的重定向看起来像：

$state.go("ProfileState", { "id": 721});

angularJs导航从ng-route到ui-router

app.js：

1 个答案:

转换为`ui.router`

导航

重定向

高级导航

angularJs导航从ng-route到ui-router

app.js：

1 个答案:

转换为ui.router

导航

重定向

高级导航

转换为`ui.router`