Comment naviguer d'une page à une autre page en utilisant AngularJs

La façon de naviguer d'une page à une autre page. Supposons que j'ai une page de login, après avoir entrer le nom d'utilisateur et le mot de passe champs en cliquant sur le bouton "soumettre", il doit valider et si à la fois le nom d'utilisateur et le mot de passe est correcte, il doit aller en page d'accueil. Page d'accueil besoins de contenu à afficher. Je suis ici poster du code. Dans le Navigateur l'url change, mais le contenu n'est pas en train de changer.

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

});

où est ngView?
Pouvez-vous me dire où je dois ajouter.
Si j'ajoute <div ng-view></div> dans index.html c'est l'affichage de index.html contenu + mon home.html le contenu, mais je veux afficher seulement home.html contenu
une suggestion: utilisation de l'interface utilisateur de l'itinéraire au lieu de ng-route.
J'ai essayé aussi. Il n'est pas de travail. Si vous avez des exemple de travail pouvez-vous svp me fournir.

OriginalL'auteur Ranga Reddy | 2015-11-15

angularjs angularjs-routing

@Dfsq dit, vous avez besoin d'une ng-view pour y plaçant votre nouveau point de vue. Bien sûr, si vous ajoutez votre ng-view dans l'index qui vous permettra de voir le contenu de l'index et de la maison. La solution ici est de créer deux vues partielles, l'une pour la connexion de l'authentification et de l'autre pour la maison. Le fichier d'index doit contenir uniquement les ng-vue et les éléments que vous souhaitez conserver constant dans votre ensemble de l'application (menu, pied de page...)

Voici le code pour ce que j'en dis:
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>

Votre nouvel itinéraire de 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.
    }
]);

et de mettre votre code de connexion à l'intérieur de la auth.html fichier

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

Avoir à l'esprit que si vous placez le test.js script dans la page d'index, il sera dans l'ensemble de l'application.

Espère que cela aide

OriginalL'auteur davidivad

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>

Merci Cela a fonctionné

OriginalL'auteur ChE

Vous devez vous connecter pour publier un commentaire.