我是 Angular JS 新手。我开发了一个登录应用程序。我创建了一个登录表单，其中有登录按钮。单击登录按钮时我想要 导航到 home.html 页面我使用了 $location.path('/home') 但它被附加在现有的 url 上但没有显示。任何人都可以帮助我 有了这个
Index.js:在此我使用routeconfig定义了路由。
var myapp = angular
.module("mainModule", ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/login", {
templateUrl: "Templates/login.html",
controller: "LoginController",
controllerAs: "loginctrl",
caseInsensitiveMatch: true
})
.when("/Home", {
templateUrl: "Templates/Home.html",
controller: "HomeController",
controllerAs: "Homectrl",
caseInsensitiveMatch: true
})
})
.controller("LoginController", function ($scope, $location) {
$scope.username = "";
$scope.password = "";
$scope.Login = function () {
if ($scope.username == "a" || $scope.password == "a") {
alert("SuccessFully Logged in")
$location.path("/Home");
}
//alert('Hello'+$scope.username+""+$scope.password);
}
})
.controller("HomeController", function ($scope) {
})
登录.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="mainModule">
<head>
<title></title>
<script src="../Scripts/angular.js"></script>
<script src="../Scripts/angular-route.js"></script>
<script src="../index.js"></script>
</head>
<body>
<div ng-controller="LoginController">
<table>
<tbody>
<tr>
<th>UserName:</th>
<th><input type="text" value="" ng-model="username" /></th>
</tr>
<tr>
<th>Password:</th>
<th><input type="password" value="" ng-model="password" /></th>
</tr>
<tr>
<th><button name="Submit" ng-click="Login()"> Submit</button>
</tr>
</tbody>
</table>
</div>
</body>
</html>
首页.Html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml ng-app=" mainmodule">
<head>
<title></title>
<script src="../Scripts/angular.js"></script>
<script src="../Scripts/angular-route.js"></script>
<script src="../index.js"></script>
</head>
<body ng-controller="HomeController">
hi
</body>
</html>
网址生成为:http://localhost:40613/Templates/Login.html#/Home 因此，Home.html 的路由如上生成，而不是 http://localhost:40613/Templates/Home.html请帮我解决这个问题
最佳答案
一些问题:
- 包括
otherwise用于配置路由 - 部分内容不应包含
<!doctype html>定义 - 包括
<div ng-view> - 要使 URL 看起来正确，请检查 html5mode
这是工作代码:http://jsbin.com/zemofiyicu/edit?html,output
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular-route.js"></script>
<script>
var myapp = angular
.module("mainModule", ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when("/login", {
templateUrl: "login.html",
controller: "LoginController"
})
.when("/home", {
templateUrl: "home.html",
controller: "HomeController"
})
.otherwise({ redirectTo: '/login' });
})
.controller("LoginController", function ($scope, $location) {
$scope.username = "";
$scope.password = "";
$scope.Login = function () {
if ($scope.username == "a" || $scope.password == "a") {
alert("SuccessFully Logged in")
$location.path("home");
}
}
})
.controller("HomeController", function ($scope) {
$scope.message = "It works";
})
</script>
</head>
<body ng-app="mainModule">
<a href="#/home">home</a>
<a href="#/login">login</a>
<div ng-view></div>
<script type="text/ng-template" id="home.html" >
<h1>Home</h1>
<h2>{{ message }}</h2>
</script>
<script type="text/ng-template" id="login.html" >
<table>
<tbody>
<tr>
<th>UserName:</th>
<th><input type="text" value="" ng-model="username" /></th>
</tr>
<tr>
<th>Password:</th>
<th><input type="password" value="" ng-model="password" /></th>
</tr>
<tr>
<th><button name="Submit" ng-click="Login()"> Submit</button>
</tr>
</tbody>
</table>
</script>
</body>
</html>
关于angularjs - 从 Controller 导航到 Angular js中的其他页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39413800/