Question

我的项目中有两个HTML文件。登录屏幕和欢迎屏幕。当用户输入用户名/密码并单击“登录”按钮时，应导航欢迎屏幕，并显示消息“欢迎使用DemoWorld”+ userName。如何从login.html导航到WelcomeScreen.html页面？如何将值从用户名文本传递到WelcomeScreen？请帮我。

LoginScreen.html

<html ng-app="loginModule">
<head>
<meta charset="utf-8">
<title>BestBuy</title>
	<link rel="stylesheet" type="text/css" href="stylesheets/login.css" />
	<script src="D:\Desktop\Download\angular.js"></script>
	<script src="D:\Desktop\Download\angular.min.js"></script>
	<script src = "app/login.js"></script>
</head>
<body ng-controller="loginController">
<img id="logo"/>
<div class="container">
	<section id="content">
		<form action="">
			<h1>{{"Login"}}</h1>
			<div>
				<input type="text" ng-model = "username" placeholder="Username" id="username" />
			</div>
			<div>
				<input type="password" ng-model = "password" placeholder="Password" id="password" />
			</div>
			<div>
				<button type="button" id="btnLogin" ng-click="onClickLogin()">Login</button>
				<a href="#">{{"Lost your password?"}}</a>
				<a href="#">{{"Register"}}</a>
			</div>
		</form>
	</section>
</div>
</body>
</html>

LoginScreen.js

angular.module('loginModule', [])
   .controller('loginController', ['$scope', 'myservice', '$window', '$location', function($scope, myservice, $window, $location) {
        $scope.username = myservice.userName;
        function onClickLogin() {
            myservice.userName = this.username;
            console.log("click" + myservice.userName);
            //$window.location.href = "HomeScreen.html";
             $location.path( 'HomeScreen' );
        }

        $scope.onClickLogin = onClickLogin;
   }])
   .controller('homeController', ['$scope', 'myservice', function($scope, myservice) {

        $scope.homeHeader = "Welcome to BestBuy";
        $scope.welcomeUserMsg = myservice.userName;
        $scope.myservice = myservice;
        console.log("homeController" + JSON.stringify($scope.myservice));
   }])
   .service('myservice', function() {
        var getUserName = this;
        getUserName.userName = "";
    });

WelcomeScreen.html

<html ng-app="homeModule">
<head>
<meta charset="utf-8">
<title>BestBuy</title>
	<link rel="stylesheet" type="text/css" href="stylesheets/home_screen.css" />
	<script src="D:\Desktop\Download\angular.js"></script>
	<script src="D:\Desktop\Download\angular.min.js"></script>
	<script src = "app/login.js"></script>
</head>
<body ng-controller="homeController">
<div id="header">
	<label> {{welcomeUserMsg}} </label>
</div>
<div class="container">
	<section id="content">
		<form action="">
			<h1>{{homeHeader}}</h1>
			<table>
				<tr>
					<td>
						<img src="http://img.bbystatic.com/BestBuy_US/images/products/5674/5674002_sc.jpg">
						<br><label> Bookmark Title</label>
					</td>
					<td>
						<img src="http://img.bbystatic.com/BestBuy_US/images/products/5674/5674002_sc.jpg">
						<br><label> Bookmark Title1</label>
					</td>
				</tr>
				<tr>
					<td>
						<img src="http://img.bbystatic.com/BestBuy_US/images/products/5674/5674002_sc.jpg">
						<br><label> Bookmark Title2</label>
					</td>
					<td>
						<img src="http://img.bbystatic.com/BestBuy_US/images/products/5674/5674002_sc.jpg">
						<br><label> Bookmark Title3</label>
					</td>
				</tr>
			</table>
		</form>
	</section>
</div>
</body>
</html>

homeScreen.js

angular.module('homeModule', [])
	   .controller('homeController', ['$scope', 'myservice', function($scope, myservice) {
			
			$scope.homeHeader = "Welcome to BestBuy";
			$scope.welcomeUserMsg = myservice.userName;
			$scope.myservice = myservice;
			console.log("homeController" + JSON.stringify($scope.myservice));
	   }])

Answer 1

据我所知，您实际上是在刷新页面。刷新页面时，所有模块，控制器和服务都会初始化，并且数据会丢失。你需要能够持久保存数据的东西。

对于导航，您可以取消注释该行

$window.location.href = "HomeScreen.html"

您可以使用angular-local-storage.js。

在您的模块中注入它。在控制器中添加依赖性。您可以按照以下方式向其添加数据：

localStorageService.add('key', value);

您可以按照以下方式获取数据：

localStorageService.get('key');

如何导航到另一个HTML并以角度传递先前HTML页面中的值？

1 个答案: