All geek questions in one place

How to navigate one page to another page using AngularJs

How to navigate from one page to another. Suppose I have a login page, after entering the username and password, when you click the "Submit" button, it should be checked, and if both the username and password are correct, it needs to go to the home page. The contents of the home page should be displayed. Here I post the code. The browser URL changes, but the content does not change.

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>&nbsp; <input type="username" class="form-control" ng-model="user.name" required> </span> </br> </br> <span><b>Password :</b>&nbsp;&nbsp; <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) { });
+5
source share
2 answers

Like @dfsq said you need an ng-view to post your new view there. Of course, if you add your ng-view to the index, you will see the contents of the index and the house. The solution here is to create two partial views, one for log authentication and one for home. The index file should contain only ng-view and those elements that you want to keep constant throughout the application (menu, footer ...)

Here is the code of 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>

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 enter your auth.html login code

 <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>&nbsp; <input type="username" class="form-control" ng-model="user.name" required> </span> </br> </br> <span><b>Password :</b>&nbsp;&nbsp; <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>

Keep in mind that if you put test.js script in the index, this will be the whole application.

Hope this helps

+4
source

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>&nbsp; <input type="username" class="form-control" ng-model="user.name" required> </span> </br> </br> <span><b>Password :</b>&nbsp;&nbsp; <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>
+5
source

Source: https://habr.com/ru/post/1235993/

More articles:


All Articles