Forum : routing n'est pas fonctionne en angular js

Bonjour ,
je trouve probléme au cours de testée page contient de lien par angular js

le probléme est quand il clique sur la lien la page reste blanc c'st à dire aucun modification sera fait sur la page

voilà vode index.html:

<!DOCTYPE <!DOCTYPE html>
    <html>
    <head>
        <title>authentification with Angular JS</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <link rel="stylesheet" type="text/css" href="style.css">

    </head>
    <body class="container" ng-app="starter" >

    <a href="#/outside">Outside</a>
    <a href="#/outside.register">register</a>
    <a href="#/outside.login">Login</a>
    <a href="#/inside">Inside</a>

    <ui-view></ui-view>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" ></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>

    <script src="app.js"></script>
    <script src="controller.js"></script>
    <script src="service.js"></script>
    <script src="constants.js"></script>

    </body>
    </html>

voilà cpde app.js:

var e = angular.module('starter',[])

e.config(function($routeProvider,$urlRouterProvider){
    $routeProvider
    .when('/outside',{
        //url: '/outside',
        abstract: true,
        templateUrl: 'outside.html'
    })

    .when('/outside.login',{
        //url: '/login',
        templateUrl: 'login.html',
        controller: 'LoginCtrl'
    })

    .when('/outside.register',{
        //url: '/login',
        templateUrl: 'register.html',
        controller: 'RegisterCtrl'
    })

    .when('/inside',{
        //url: '/inside',
        templateUrl: 'inside.html',
        controller: 'InsideCtrl'
    });

    //$urlRouterProvider.otherwise('/outside/login');

}); 

e.run(function($rootScope,$state,AuthService,AUTH_EVENTS){
    $rootScope.$on('$stateChangeStar',function(event, next, nextParams, fromState){
        if(!AuthService.isAuthenticated()) {
            if (next.name !== 'outside.login' && next.name !== 'outside.register'){
                event.preventDefault();
                $state.go('outside.login');
            }
        }
    });
});

et par exemple voilà page login.html:

  <div class="form-group">
    <label for="Login">Login</label>
    <input type="text" class="form-control" id="username" placeholder="Enter Username">
  </div>

  <div class="form-group">
    <label for="Password">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Enter Password">
  </div>

  <button type="submit" class="btn btn-primary" ng-click="login()">Login</button> <br><br>
  <button type="submit" class="btn btn-primary" ui-serf="outside.register">Register</button>

je sais pas quelle est l'erreur car en console il affiche aucun erreur .
merci d'avance

etorion

Tu utilise en même temps ui-router et angular router ...
Le $stateProvider n'est pas renseigné .

Et pour finir les liens ui-sref ne sont renseignés.

Voivi un petit exemple, j'ai repris ton code.
Comme je n'avais pas les services , contrôleurs,... j'ai commenté un certain nombre de choses.

https://plnkr.co/edit/DQkQH8WxADWOdYRxhzbj?p=preview

Je te conseil ce lien :

https://scotch.io/tutorials/angular-routing-using-ui-router

routing n'est pas fonctionne en angular js

1 réponse