CODEWITHSUNDEEP
angularjsangularjs-routing
Ranga Reddy
Ranga Reddy

Reputation: 3086

How to navigate one page to another page using AngularJs

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

});

Upvotes: 6

Views: 48709

Answers (2)

David Ortiz
David Ortiz

Reputation: 995

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

Upvotes: 5

ChE
ChE

Reputation: 105

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>

Upvotes: 5

Related Questions