问题
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) {
});
回答1:
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
回答2:
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> <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>
来源：https://stackoverflow.com/questions/33720267/how-to-navigate-one-page-to-another-page-using-angularjs