Question

我是angularjs的新手...我正在尝试使用路由器功能从登录页面导航到下一页....我的登录页面如下

 <body>
<div id='content' ng-app='myApp' ng-controller='LoginController'>
<div class="container">
  <form class="form-signin" role="form" ng-submit="login()">
    <h3 class="form-signin-heading">Login Form</h3>
    <span><b>Username :</b>&nbsp;
        <input type="username" class="form-control" ng-model="user.name"  required>
    </span>
    </br></br>
    <span><b>Password :</b>&nbsp;&nbsp;
        <input type="password" class="form-control" ng-model="user.password" required>
    </span>
    <label class="checkbox">
      <input type="checkbox" value="remember-me"> Remember me
    </label>
   <button class="btn btn-lg btn-primary btn-block"  type="submit" >           
     <b>Sign in</b></button>
   {{nameis}}
   </form>
   </div> <!-- /container -->
   </div>
  <div ng-view></div>
 </body>

我的app.js文件如下

'use strict';
//Define Routing for app

var applog = angular.module('myApp',[]);
applog.config(['$routeProvider', '$locationProvider',
 function($routeProvider,$locationProvider) {
  $routeProvider
  .when('/login', {
    templateUrl: '/navAng.html',
    controller: 'LoginController'
  })    
  .otherwise({
   redirectTo: '/navAng.html'
  });
  $locationProvider.html5Mode(true); //Remove the '#' from URL.
}]);

我的控制器js文件如下

 applog.controller("LoginController", function($scope, $location,$window){
 $scope.nameis = "Test";

 $scope.go = function ( path ) {
  $location.path( path );
};


$scope.login=function()
   {

    var username=$scope.user.name;
    var password=$scope.user.password;
    if(username=="admin" && password=="admin")
    {

        $location.path( "/navAng.html" );
    }
    else
    {
        $scope.message="Error";
        $scope.messagecolor="alert alert-danger";
    }
  }

});

老实说我不知道我哪里出错...问题是我在网址标签中正确获取了网页的网址但是我需要按回车才能转到该页面...我的意思是页面是没有刷新它只是改变现有的网址，只是坐在同一页面（即登录页面）....有人可以帮助....

Answer 1

添加角度路径库。在最新的角度版本中，它可作为单独的模块使用。因此，您需要注入＆＃39; ngRoute＆＃39;使用$ routeProvider服务

<强>的index.html：

<html ng-app='myApp'>
 <head> 
  <script src="angular.js"></script>
  <script src="angular-route.js"></script>
</head>
<body>
  <div ng-view></div>
  <script type="text/javascript">
    'use strict';
    //Define Routing for app
    var applog = angular.module('myApp', ['ngRoute']);

    applog.config(['$routeProvider', '$locationProvider',
      function($routeProvider, $locationProvider) {
      $routeProvider
       .when('/', {
         templateUrl: '/login.html',
         controller: 'LoginController'
        })
       .when('/navAng', {
         templateUrl: '/navAng.html',
         controller: 'navAngController'
        })
        .otherwise({
         redirectTo: '/'
        });
        $locationProvider.html5Mode(true); //Remove the '#' from URL.
     }]);

     applog.controller("LoginController", function($scope, $location, $window) {
     //$scope.nameis = "Test";

     $scope.go = function(path) {
       $location.path(path);
     };

    $scope.login = function() {
      var username = $scope.user.name;
      var password = $scope.user.password;
      if (username == "admin" && password == "admin") {
       $location.path("/navAng");
      } else {
       $scope.message = "Error";
       $scope.messagecolor = "alert alert-danger";
      }
    }
  });

  // next page controller
   applog.controller("navAngController", function($scope, $location, $window) {
    $scope.msg= "Success";     
   });
  </script>
 </body>
</html>

使用单独的html进行登录。因为，您在index.html中使用ng-view 的的login.html：

<div id='content' ng-controller='LoginController'> <div class="container"> <form class="form-signin" role="form" ng-submit="login()"> <h3 class="form-signin-heading">Login Form</h3> <span><b>Username :</b>  <input type="username" class="form-control" ng-model="user.name" required> </span> <span><b>Password :</b>   <input type="password" class="form-control" ng-model="user.password" required> </span> <label class="checkbox"> <input type="checkbox" value="remember-me"> Remember me </label> <button class="btn btn-lg btn-primary btn-block" type="submit" > <b>Sign in</b> </button> {{nameis}} </form> </div>  </div>

当登录和密码正确时，这是另一个导航页面的 navAng.html：

<div> {{msg}} </div>

无法从一个页面导航到另一个页面

1 个答案: