2017-10-04 81 views
0

这是我在angularjs中的第一页设置。一切工作正常,直到我试图添加路由。出于某种原因,我似乎无法前往Home screen。我的代码工作正常,但我无法路由该页面。即使我加了$location.path()但它没有工作。是否有任何其他方式来验证登录页面和路由

这是我plunker:https://plnkr.co/edit/9O5dHYZMKAqF07y7moVT

这里是我的代码:HTML

<div class="package col-md-12" ng-controller="credientials"> 

      <form ng-submit="loginform()" class="ng-scope ng-pristine ng-valid"> 

       <div class="form-group col-md-4"> 
        <label form="emailinput"><b>Email</b></label> 
        <input type="email" class="form-control" name="username" id="emailinput" placeholder="Enter email" ng-model="username"> 
       </div> 

       <div class="form-group col-md-4"> 
        <label form="pwdinput"><b>Password</b></label> 
        <input type="password" class="form-control" name="password" id="pwdinput" placeholder="Password" ng-model="password"> 
       </div> 

       <a ng-click="reloadPage()" class="navbar-brand" title="home"></a> 

       <div class="col-md-4"> 
        <button type="cancel" class="btn" ng-click="toggle_cancel()">Cancel</button> 

        <button class="btn btn-primary" ng-click="">Login</button> 
       </div><br/> 
        <span class="text-danger">{{ info }}</span> 
      </form> 
     </div> 

AngularJs:

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

    app.controller('credientials', function($scope,$route,$location,authentication) { 

     $scope.Urltemplate = 
     [ 
      { url: 'login.html' }, 
      { url: 'home.html'} 
     ]; 
      $scope.template = $scope.Urltemplate[0]; 
      $scope.loginform = function (username, password) { 
     if ($scope.username === '[email protected]' && $scope.password === '1') { 
      authentication.isAuthenticated = true; 
      $scope.template = $scope.Urltemplate[1]; 
      $scope.user = username; 
      $scope.info = authentication.isAuthenticated; 
      $location.path("/home.html"); 
     } else { 
      toastr.error('Invalid username and password'); 
     } 
     }; 
}); 
+0

2东西更新。将$ location.path('home.html')更改为$ location.path(“/ home”); '/ home'是您的注册路线,其次是您的index.html中缺少

。这告诉路由切换视图 –

+0

@PrinayPanday。我纠正了我的错误并做了修改。但是,当我包括'ng-view'我得到控制器不匹配错误。我不知道为什么? – phoine

回答

0

你应该包括在HTML ng-view使用不同的路由

在这里,我更新了你的运动员https://plnkr.co/edit/7L6A6niKMQ4vn2OYP3LN?p=preview

您没有,您使用的是在路线的一些文件,我已经改变你的主页进行测试,请与您的

+0

当我包含'ng-view'时,我得到了控制器不匹配错误。 – phoine

+0

我应该在'ng-view'中传递任何值吗 – phoine

+0

控制器需要在路由配置中声明...不要在html页面中使用ng-controller。有关模式详细信息,请查看[ngRoute]的官方文档(https://docs.angularjs.org/api/ngRoute) – Venkat

相关问题