0
votes

pourrait se diriger vers différents modèles en angulaire

ci-dessous est une page HTML, ne pouvait pas obtenir de contenu lorsque vous cliquez sur la page 1

<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
                <script src="JavaScript.js"></script>
</head>
<body ng-app="myapp">
    <div class="Container">
        <nav class="navbar navbar-default">
            <ul class="navbar navbar-nav">
                <li>
                    <a href="#!Page1">Page 1</a>
                    <a href="#!Page2">Page 2</a>
                    <a href="">Page 3</a>
                </li>
            </ul>
        </nav>
    </div>

    <div ng-view></div>

    <script>
        var app = angular.module("myapp", ["ngRoute"]);

app.config(function ($routeProvider){
    $routeProvider.when("/page1", {
        template :  <h1>Page 1</h1>
    })
        .when("/page2", {
            template: <h1>Page 2</h1>
        })
        .otherwise({
            template: <h1>note found</h1>
        })
});
    </script>

</body>
</html>

html angularjs angular2-routing

0 commentaires

3 Réponses :

0
votes

Vous pouvez utiliser redirectTo () code> méthode avec sinon () code> méthode. Aussi, devez mettre href = "#" code> sous tag code>.

<!DOCTYPE html>
 <html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

<body ng-app="myApp">

<p><a href="#/!">Main</a></p>

<a href="#!red">Red</a>
<a href="#!green">Green</a>

<a href="#">Oranger</a>
<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "main.htm"
    })
    .when("/red", {
        templateUrl : "red.htm"
    })
    .when("/green", {
        templateUrl : "green.htm"
    })
  .otherwise({redirectTo:'/'});
});
</script>

<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</body>
</html>

0 commentaires

1
votes

La première erreur que vous avez manquée autour de citations pour des modèles de code JavaScript: xxx

et non besoin d'utiliser une marque d'exclamation dans les liens: xxx

3 commentaires

@Shivanipatel Pouvez-vous écrire en détail ce qui ne fonctionne pas?

J'ai passé le même code dans l'exemple de W3schools. Je ne travaillerai même pas pour / page1, / page2 URL

Page de travail avec mes corrections https://jsbin.com/dazebayawa/1

0
votes

Il y a quelques erreurs: premièrement, dans le HREF, vous avez utilisé le capital p code> alors que dans la définition de route, c'est une petite lettre, c'est-à-dire p code>, 2e que vous n'avez pas besoin Pour utiliser ! code> dans le HREF, c'est-à-dire qu'il devrait être comme href = # page1 code> et le 3ème one est un modèle doit être en tant que chaîne c'est-à-dire sous une seule / double citation.

p>



<html>
<head>
    <meta charset="utf-8"/>
    <title></title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
    <script src="JavaScript.js"></script>
</head>
<body ng-app="myapp">
<div class="Container">
    <nav class="navbar navbar-default">
        <ul class="navbar navbar-nav">
            <li>
                <a href="#page1">Page 1</a>
                <a href="#page2">Page 2</a>
                <a href="#">Page 3</a>
            </li>
        </ul>
    </nav>
</div>

<div ng-view></div>

<script>
    var app = angular.module("myapp", ["ngRoute"]);

    app.config(function ($routeProvider) {
        $routeProvider.when("/page1", {
            template: '<h1>Page 1</h1>'
        })
            .when("/page2", {
                template: '<h1>Page 2</h1>'
            })
            .otherwise({
                template: '<h1> note found </h1>'
            })
    });
</script>

</body>
</html>

0 commentaires