javascript - Angular 验证中的登录页面重定向

标签 javascript angularjs url-routing angularjs-routing angularjs-forms

var app = angular.module('myApp', ['ngRoute']);

app.config(['$routeProvider', function($routeProvider) {       
  $routeProvider.
  when('/success', {
    templateUrl: 'success.html',
    controller: 'sucCtrl'


  }).
  otherwise({
    redirectTo: '/index'
  })
}])


app.controller('validateCtrl', function($scope, $http, $location) {

  $scope.submit = function(user,password) {
    //for local storage validation

    $http.get('credentials.json').then(function(response) {
      $scope.credentials = response.data;

      if((user === $scope.credentials.username) && (password === $scope.credentials.password)){
        alert("ok");
         $location.path('/success');
      }

      else{
        alert("nit "); }



    });    


  };

})

app.controller('sucCtrl',['$scope', function($scope) {
  alert("succs");

}]);

这可能是一个初学者问题。我正在尝试验证我的登录表单并在成功时重定向到 success.html。但我无法导航到下一页。我尝试使用 $location.path('/success')。 这是 plunker 中的工作示例.. http://plnkr.co/edit/0v7njznHdtwgpaG2NfwA?p=preview

最佳答案

您错过了编写 ng-view 指令来将路线更改显示在 View 上。另外,你的 html 页面结构也很困惑。请参阅下面的评论,这将帮助您使其发挥作用并改进它。

您应该将该 ng-view 指令放在正文中,以便所有 View 都将根据路由更改加载。

此外,您应该仅从路由加载表单 html,我建议您在 config 中再添加一条路由,该路由将在 /login 上显示form.html(登录表单)

配置

app.config(['$routeProvider', function($routeProvider) {       
  $routeProvider.
  when('/success', {
    templateUrl: 'success.html',
    controller: 'sucCtrl'
  })
  .when('/login', {
    templateUrl: 'form.html',
    controller: 'validateCtrl'
  }).
  otherwise({
    redirectTo: '/login'
  })
}])

标记

<body>
  <div ng-view></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
  <script src="login.controller.js"></script>
</body>

您的 success.html 应该是部分的,它不应该再次引用脚本,它们仅从索引页加载

成功.html

<div>
  Success Message
</div>

Working Demo

关于javascript - Angular 验证中的登录页面重定向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32421314/

相关文章:

用于 Javascript 正则表达式和数字的 Javascript 正则表达式

javascript - AngularJS—— View 不会在我的浏览器中呈现?

javascript - jquery $ ('div' .html 不适用于第三方模块( Angular )

javascript - Angular : compile google maps infoWindow content to use ng-click

asp.net - ASP MVC 路由 - 如何更改默认 id 参数的名称,同时保持默认路由不变

python - Google App Engine 中的 CSS 映射问题

javascript - 将 initialState 中的数据与来自服务器的预加载数据合并

JavaScript 函数返回

IIS 6.0 中根目录下的 ASP.NET URL 路由

javascript - 浏览器的 HTTP 缓存曾经用于存储 XMLHttpRequest 响应吗?