首页 文章

angularJs导航从ng-route到ui-router

提问于
浏览 次
1

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

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

  • 当我登录成功时需要从登录表单导航到"Home page" .

  • 当我点击注册按钮时，我需要从登录页面导航到"Registration page"

  • 同样我也需要一个"forgot password"画面

我目前的路由器在下面 . 我该怎么做这个功能？ （请帮助一些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'
        });

    }]);
});
angularjs angular-ui-router

1 回答

  • 1

    首先，没有人会为您设计一个符合您要求/功能的网站 . stackoverflow 是针对具体问题的，您的问题太广泛了，更多关于它的问题 - How to Ask . 但是为了帮助您从 ngRoute 转换到 ui.router ，我可以描述语法应该是什么样的，这样您就可以将它用于您的网站 .

    转换为ui.router

    你的配置不会改变那么多 . 您需要将 .when 替换为 .state ，使用正确的提供程序，并使用正确的语法 . 这是一个只有几个州的例子：

    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');
}

    导航

    您应该始终使用状态进行导航 . 所以用 ui-sref="state" 替换 href="url" . 以下是锚链接的一些示例：

    <a ui-sref="HomepageState">Home page</a>
<a ui-sref="RegisterState">Register</a>

    不要忘记用 ui-view 替换 ng-view . （对于较旧的浏览器支持，最好使用 <div ui-view></div> 而不是 <ui-view></ui-view> ）

    重定向

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

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

    这将调用一个函数 login() ，它将验证/验证用户是否可以登录 . （你也可以 <form ng-submit="login()"> 与 <button type="submit">... ）然后，如果一切正常并且用户获得了他的会话/ cookie，你可以重定向到另一个页面：

    $state.go("HomepageState");

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

    高级导航

    将来，如果您有按索引列出的用户配置文件 . 您的路由可以使用 $stateParams 进行改进 . 他们的工作是检查URL中的任何其他参数 . 例如：URL： /profile/721 可以具有 url:"/profile/:id" 的状态 . 然后，您可以使用 $stateParams.id 提取该ID并在控制器中使用它 . 你的重定向看起来像：

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

相关问题