如何使用AngularJs将页面导航到另一页面
如何从一页导航到另一页。假设我有一个登录页面，在输入用户名和密码字段并单击提交按钮后，它需要验证，如果用户名和密码都正确，则需要进入主页。主页内容需要显示。我在这里发布代码。在浏览器中，URL不断变化，但内容没有变化。
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) {
});
问题答案：
正如@dfsq所说，您需要一个ng-view来放置新视图。当然，如果将ng-
view添加到索引中，您将看到索引和home的内容。这里的解决方案是创建两个局部视图，一个局部视图用于登录身份验证，另一个局部视图。索引文件应仅包含ng-
view以及要在整个应用中保持不变的元素（菜单，页脚…）
这是我要说的代码：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> <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>
请记住，如果将test.js脚本放入索引中，它将在整个应用程序中。
希望能帮助到你
-
问题内容： 我正在使用ajax调用在服务文件中执行功能，并且如果响应成功，我想将页面重定向到另一个URL。目前，我正在通过使用简单的js“ window.location = response[‘message’];”来做到这一点。但是我需要用angularjs代码替换它。我看过关于的各种解决方案，他们使用了$location。但是我是新手，对实现它有困难。 问题答案： 您可以使用Angular
-
我有以下问题我搞不清楚。我有一个带有ListView的pageControl。列表有一个项目模板设置，我正在从js脚本绑定列表。当我单击该项目以导航到另一个PageControl时，我添加了一个事件处理程序。事件启动，但当我执行winjs.navigation.navigate时，第二个页面没有加载。 第1页HTML： 第1页JS：
-
问题内容： 我正在使用jQuery Mobile和AngularJS开发混合移动应用程序。 我决定将以下两者结合使用： jQuery Mobile 良好的用户界面功能 不太重（例如，与Sencha Touch相比） AngularJS 良好的性能和资源管理（缓存，异步请求） 个人经验 我几乎没有使用jQuery Mobile的经验，并且在我学习的过程中，我注意到两者的页面导航模型之间可能存在冲突。
-
我在平台上开发,并安装了模板。 我想显示一个页。如果我使用属性显示，则html页面将显示在完整的窗口中，并且我无法从该属性返回。我唯一的方法是需要重新初始化应用程序。 所以，我从这里浏览了所有库及其函数http://msdn.microsoft.com/en-us/library/windows/apps/hh770584.aspx
-
问题内容： 好的，我设置了一个会话…但是现在如何在其他页面上使用它呢？ 我试着做 问题答案： 如果您的PHP设置清晰（会话写正常）并且cookie通常发送到浏览器（并保留了），则您应该可以执行以下操作 在第一页上： 在第二页上： 请注意，在发送任何输出之前，必须先调用session_start（），因此，如果必须在会话_start中使用@，它可能会隐藏警告。 由于这些是警告，如果给定的示例不起作用
-
我有两个页面：home.jsp和stylechoosertable.jsp。jsp有一个指向stylechoosertable.jsp的简单链接。两者都在src-main-webapp-views中。启动应用程序运行良好，加载home.jsp也很好。然而，当我点击链接时，它会转到一个404未找到的页面。 下面是HomeController.java > 仅本地:8080/MySpringMVC/打