Question

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（＆＃39; / success＆＃39;）。这里是plunker的工作样品.. http://plnkr.co/edit/0v7njznHdtwgpaG2NfwA?p=preview

Answer 1

您错过了编写ng-view指令以获取路径更改以显示在视图上。你也搞砸了页面html的结构。请参阅以下评论，这些评论将帮助您使其发挥作用并加以改进。

您应该将ng-view指令放在body中，以便根据路由更改加载所有视图。

此外，您应该仅从路线中加载表单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>

<强>标记

<div>
  Success Message
</div>

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

<强> success.html

eventfd

Working Demo

登录页面重定向角度有效

1 个答案: