How to navigate one page to another page using AngularJs

Asked 15/11, 2015 at 13:33 Answered 15/11, 2015 at 13:52

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>&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) {

});

Roentgenogram answered 15/11, 2015 at 13:33 Comment(4)

Can you tell me where i need to add. – Roentgenogram 15/11, 2015 at 13:38

If i add <div ng-view></div> in index.html it is displaying index.html content + my home.html content but i want to display only home.html content – Roentgenogram 15/11, 2015 at 13:39

one suggestion: use ui-route instead of ng-route. – Arrogance 15/11, 2015 at 13:40

I tried that only also. It is not working. If you have any working example can you please provide me. – Roentgenogram 15/11, 2015 at 13:42

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>&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>

Have in mind that if you place the test.js script in index it will be in the whole app.

Hope it helps

Kirima answered 15/11, 2015 at 13:52 Comment(0)

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) {

});

<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>

Cephalochordate answered 15/11, 2015 at 13:47 Comment(0)