2 
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");

}]);

This might be well a beginner question. I am trying to validate my login form and redirect to success.html on success. But I am unable to navigate to next page. I tried using $location.path('/success'). here is the working sample in plunker.. http://plnkr.co/edit/0v7njznHdtwgpaG2NfwA?p=preview

4

1 回答 1

2

您错过了编写ng-view指令以将路线更改显示在视图上。此外，您还搞砸了页面 html 的结构。请参阅下面的评论，这些评论将帮助您使其工作并改进它。

您应该将该 ng-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>

工作演示

于 2015-09-06T08:03:02.737 回答