如何使用AngularJs将一个页面导航到另一个页面
发布时间:2020-12-17 07:53:34 所属栏目:安全 来源:网络整理
导读:如何从一个页面导航到另一个页面.假设我有一个登录页面,在输入用户名和密码fileds后点击提交按钮需要验证,如果用户名和密码都正确,则需要进入主页.主页内容需要显示.我在这里发布代码.在浏览器中,网址正在发生变化,但内容未发生变化. 的index.html html ng-a
如何从一个页面导航到另一个页面.假设我有一个登录页面,在输入用户名和密码fileds后点击提交按钮需要验证,如果用户名和密码都正确,则需要进入主页.主页内容需要显示.我在这里发布代码.在浏览器中,网址正在发生变化,但内容未发生变化.
的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",$location) { });
正如@dfsq所说,你需要一个ng-view来放置你的新视图.当然,如果您在索引中添加ng-view,您将看到索引和home的内容.这里的解决方案是创建两个部分视图,一个用于登录身份验证,另一个用于主页.索引文件应仅包含ng-view以及要在整个应用程序中保持不变的元素(菜单,页脚…)
这是我所说的代码: <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) { $routeProvider.when('/home',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脚本放在索引中,它将在整个应用程序中. 希望能帮助到你 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |