如何使用 AngularJs 将一个页面导航到另一个页面 [英] How to navigate one page to another page using AngularJs
问题描述
如何从一页导航到另一页.假设我有一个登录页面，在单击提交按钮时输入用户名和密码文件后，它需要验证，如果用户名和密码都正确，则需要转到主页.首页内容需要显示.我在这里发布代码.在浏览器中 url 正在更改但内容未更改.
index.html
<头><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/><脚本src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script><脚本src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script><身体><div id='content' ng-controller='LoginController'><div class="容器"><form class="form-signin" role="form" ng-submit="login()"><h3 class="form-signin-heading">登录表单</h3><span><b>用户名:</b> <输入类型=用户名"class="form-control" ng-model="user.name" required></span></br></br><span><b>密码:</b> <输入类型=密码"class="form-control" ng-model="user.password" required></span><br><br><button class="btn btn-lg btn-primary btn-block" type="submit"><b>登录</b></表单><!--/容器-->
<script src='test.js' type="text/javascript"></script></html>
home.html
你好，我来自首页test.js
var applog = angular.module('myApp',['ngRoute']);applog.config([ '$routeProvider', '$locationProvider',功能($routeProvider，$locationProvider){$routeProvider.when('/home', {templateUrl : 'home.html',控制器:'家庭控制器'}).除此以外({重定向到:'index.html'});//$locationProvider.html5Mode(true);//从URL中删除'#'.}]);applog.controller("LoginController", function($scope, $location) {$scope.login = function() {var 用户名 = $scope.user.name;var 密码 = $scope.user.password;if (username == "admin" && 密码 == "admin") {$location.path("/home" );} 别的 {alert('用户名和密码无效');}};});applog.controller("HomeController", function($scope, $location) {});正如@dfsq 所说，你需要一个 ng-view 来放置你的新视图.当然，如果您在索引中添加 ng-view，您将看到索引和主页的内容.这里的解决方案是创建两个局部视图，一个用于登录身份验证，另一个用于家庭.索引文件应仅包含 ng-view 和您希望在整个应用程序中保持不变的元素(菜单、页脚...)
这是我所说的代码:index.html
<头><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/><脚本src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script><脚本src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script><script src='test.js' type="text/javascript"></script><身体><div ng-view></div><script src='test.js' type="text/javascript"></script></html>您的新路由配置
applog.config([ '$routeProvider', '$locationProvider',功能($routeProvider，$locationProvider){$routeProvider.when('/home', {templateUrl : 'home.html',控制器:'家庭控制器'})$routeProvider.when('/', {templateUrl : 'auth.html',控制器:'登录控制器'}).除此以外({重定向到:'index.html'});//$locationProvider.html5Mode(true);//从URL中删除'#'.}]);并将您的登录代码放在 auth.html 文件中
<div class="容器"><form class="form-signin" role="form" ng-submit="login()"><h3 class="form-signin-heading">登录表单</h3><span><b>用户名:</b> <输入类型=用户名"class="form-control" ng-model="user.name" required></span></br></br><span><b>密码:</b> <输入类型=密码"class="form-control" ng-model="user.password" required></span><br><br><button class="btn btn-lg btn-primary btn-block" type="submit"><b>登录</b></表单><!--/容器-->
请记住，如果您将 test.js 脚本放在 index 中，它将在整个应用程序中.
希望能帮到你
How to navigate from one page to another page. Assume i have a login page, after entering username and password fileds while click on submit button it needs to validate and if both username and password is correct it needs to go home page. Home page content needs to display. Here i am posting code. In Browser url is changing but content is not changing.
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> <input type="username"
class="form-control" ng-model="user.name" required> </span> </br>
</br> <span><b>Password :</b> <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) {
});
As @dfsq said you need an ng-view for placing there your new view. Of course if you add your ng-view in the index you will see the content of the index and of home. The solution here is creating two partial views, one for the log in authentication and the other for home. The index file should contain only the ng-view and those elements you want to keep constant in your whole app (menu, footer...)
Here is the code for what I'm saying: 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>
Your new route configuration
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.
}
]);
and put your login code inside the auth.html file
<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> </br>
</br> <span><b>Password :</b> <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>
Have in mind that if you place the test.js script in index it will be in the whole app.
Hope it helps
这篇关于如何使用 AngularJs 将一个页面导航到另一个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
