Connaissez-vous le principe de routage d’angularjs ? Voici les principes détaillés du routage angulairejs

Cet article vous présente principalement le principe de routage de angularjs, ainsi que les étapes pour utiliser le routage angulairejs Ce n'est pas trop approfondi, tout le monde devrait pouvoir le faire. comprends-le. Ensuite, regardons ensemble cet article

1 Jetons un coup d'œil à l'introduction d'angularjs :

Le mécanisme de routage AngularJS est fourni par le module ngRoute, ce qui nous permet de décomposer la vue en une mise en page et une vue modèle, et de charger dynamiquement la vue modèle dans la mise en page en fonction du changement d'URL, réalisant ainsi la fonction de saut de page d'une application monopage.

2. Regardez à nouveau l'url dans AngularJS

Le signe # est ajouté à l'url de l'application WEB monopage. Le signe # représente un emplacement sur. la page Web. Tout ce qui se trouve à droite est l'identifiant utilisé pour marquer l'emplacement. Le signe # et le contenu suivant sont appelés fragments de hachage dans l'URL. Ils ne seront pas envoyés au serveur. Les trois URL suivantes demandent la même adresse au serveur. Si vous modifiez uniquement le contenu après le signe #, l'actualisation n'entraînera pas le rechargement de la page Web.

http://www.php.cn/

http://www.php.cn/#123

http://www.php.cn/ #123/456

3. Parlons maintenant de l'utilisation du routage :

1. Importer des fichiers et injecter des dépendances

Depuis la version 1.2, AngularJS a séparé ngRoutes du code principal en un module indépendant. Par conséquent, nous devons installer et injecter une dépendance sur ngRoute dans la déclaration du module pour utiliser la fonction de routage normalement dans les applications AngularJS. (Si vous souhaitez en savoir plus sur AngularJs, rendez-vous sur le site Web PHP chinois AngularJs Learning Manual colonne)

<script src="angular-route.min.js"></script>
var app = angular.module("myApp",[&#39;ngRoute&#39;]);

2. Créez un modèle de mise en page

La raison pour laquelle un modèle de mise en page est créé est d'indiquer à AngularJS où la mise en page doit être rendue. Grâce à la directive ng-view, nous pouvons spécifier avec précision la position de rendu de la vue modèle dans le DOM.

<div ng-app="myApp">
    <a ng-href="#/music">音乐</a>
    <a ng-href="#/movie">电影</a>
    <a ng-href="#/novel">小说</a>
    <a ng-href="#/other">其他</a>
    <div ng-view></div>
</div>

3. Créez des vues modèles

myMusic.html

<p>这里是音乐界面啦</p>

myMovie.html

<p>这里是电影界面啦</p>

myNovel.html

<p>这里是小说界面啦</p>

home.html

<p>我是首页界面</p>

4 Définir la table de routage

app.config(['$routeProvider',function($routeProvide) {
    $routeProvide
        .when('/',{templateUrl:"home.html"})
        .when('/music',{templateUrl:"myMusic.html"})
        .when('/movie',{templateUrl:"myMovie.html"})
        .when('/novel',{templateUrl:"myNovel.html"})
        .otherwise({redirectTo:'/'});
}]);

D'accord, c'est tout. L'intégralité du contenu de cet article (si vous souhaitez en savoir plus sur angulairejs, il est recommandé d'aller sur la colonne du site PHP chinois AngularJS Learning Manual pour apprendre). message ci-dessous

【Recommandation de l'éditeur]

Quelles sont les différences entre Angularjs et Vue ? Détails de comparaison entre Angularjs et Vue

Quels sont les avantages d'Angularjs ? Voici les sept avantages d'angularjs que vous devez connaître

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!