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

}]); 

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

回答

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应该是局部的,它不应该再有脚本引用它,他们已经从索引页只

success.html加载

<div> 
    Success Message 
</div> 

Working Demo

+0

你好。感谢您的答复。我尝试添加这些更改。但是在添加ng-view时,我的浏览器浏览器正在崩溃。你能帮我 – user5304396

+0

@ user5304396看起来像我把错误的plunkr link..let我加上正确的一个..给我一分钟 –

+0

@ user5304396看看udpated plunkr链接谢谢:) –