如何使用AngularJs將一頁導航到另一頁

如何從一頁導航到另一頁。假設我有一個登錄頁面，輸入用戶名和密碼文件後點擊提交按鈕它需要驗證，如果用戶名和密碼都正確，它需要回到主頁。主頁內容需要顯示。在這裏，我張貼代碼。在瀏覽器中，url正在改變，但內容沒有改變。如何使用AngularJs將一頁導航到另一頁

的index.html

<html ng-app='myApp'> 
<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/> 
<script 
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> 
<script 
    src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> 
</head> 

<body > 
    <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>&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> 
       <br><br>     
       <button class="btn btn-lg btn-primary btn-block" type="submit"> 
        <b>Sign in</b> 
       </button> 
      </form> 
     </div> 
     <!-- /container --> 
    </div> 
    <script src='test.js' type="text/javascript"></script> 
</body> 
</html>

home.html做爲

Hello I am from Home page

test.js

var applog = angular.module('myApp',['ngRoute']); 

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

applog.controller("LoginController", function($scope, $location) { 
    $scope.login = function() { 
     var username = $scope.user.name; 
     var password = $scope.user.password; 
     if (username == "admin" && password == "admin") { 
      $location.path("/home"); 
     } else { 
      alert('invalid username and password'); 
     } 
    }; 
}); 

applog.controller("HomeController", function($scope, $location) { 

});

來源

2015-11-15 Ranga Reddy

哪裏是ngView？ – dfsq

你能告訴我我需要補充的地方嗎？ –

如果我在index.html中添加

，它會顯示index.html內容+我的home.html內容，但我只想顯示home.html內容 –

正如@dfsq說你需要一個NG-視圖將有新的看法。當然，如果你在索引中添加你的ng-view，你會看到index和home的內容。這裏的解決方案是創建兩個部分視圖，一個用於登錄身份驗證，另一個用於家庭。索引文件應該只包含ng視圖和那些你想保持在你的整個應用程序中不變的元素（菜單，頁腳...）

這裏是我正在說的代碼： index.html

<html ng-app='myApp'> 
<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/> 
<script 
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> 
<script 
    src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> 
<script src='test.js' type="text/javascript"></script> 
</head> 

<body > 
    <div ng-view></div> 
    <script src='test.js' type="text/javascript"></script> 
</body> 
</html>

你的新的路由配置

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

，並把您的登錄代碼的auth.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>&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> 
       <br><br>     
       <button class="btn btn-lg btn-primary btn-block" type="submit"> 
        <b>Sign in</b> 
       </button> 
      </form> 
     </div> 
     <!-- /container --> 
    </div>

請記住，如果您將test.js腳本放在索引中，它將位於整個應用程序中。

希望它可以幫助

來源

2015-11-15 13:52:24 davidivad

的index.html

<html ng-app='myApp'> 
<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/> 
<script 
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> 
<script 
    src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> 
</head> 

<body > 
    <div ng-view></div> 
    <script src='test.js' type="text/javascript"></script> 
</body> 
</html>

test.js

var applog = angular.module('myApp',['ngRoute']); 

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

applog.controller("LoginController", function($scope, $location) { 
    $scope.login = function() { 
     var username = $scope.user.name; 
     var password = $scope.user.password; 
     if (username == "admin" && password == "admin") { 
      $location.path("/home"); 
     } else { 
      alert('invalid username and password'); 
     } 
    }; 
}); 

applog.controller("HomeController", function($scope, $location) { 

});

的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>&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> 
      <br><br> 
      <button class="btn btn-lg btn-primary btn-block" type="submit"> 
       <b>Sign in</b> 
      </button> 
     </form> 
    </div> 
    <!-- /container --> 
</div>

來源

2015-11-15 13:47:28 ChE

謝謝它的工作 –

如何使用AngularJs將一頁導航到另一頁

回答

相關問題