Maison > Article > interface Web > Tutoriel de démarrage d'AngularJS (1) - Une brève introduction à l'utilisation du routage
Tutoriel de démarrage d'AngularJS (1) - Une brève introduction à l'utilisation du routage
- 黄舟original
- 2017-05-27 10:33:39840parcourir
Cet article présente principalement l'utilisation du AngularJSroutage et analyse brièvement le concept, la fonction et l'utilisation de base du routage AngularJS Pour la méthode, les amis qui en ont besoin peuvent se référer à
Cet article décrit l'utilisation du routage AngularJS avec des exemples. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
Selon la compréhension actuelle, ce module de routage NG peut être utilisé pour le développement d'une seule page avec plusieurs vues .
Publiez d'abord tous les codes :
HTML :
<!doctype html> <meta charset="UTF-8"> <html> <head> <link href="self.css" rel="external nofollow" rel="stylesheet"> </head> <body ng-app='routingDemoApp'> <h2>AngularJS 路由应用</h2> <ul> <li><a href="#/" rel="external nofollow" >首页</a></li> <li><a href="#/computers" rel="external nofollow" >电脑</a></li> <li><a href="#/user" rel="external nofollow" >用户</a></li> <li><a href="#/blabla" rel="external nofollow" >其他</a></li> </ul> <p ng-view></p> <script src="angular.min.js"></script> <script src="angular-route.min.js"></script> <script src="test.js"></script> </body> </html>
liste.html :
<p>
<h1>HI,这里是list.html</h1>
<h2>{{name}}</h2>
</p>JS :
var app = angular.module('routingDemoApp',['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{
template:'这是电脑分类页面'
})
.when('/user',{templateUrl:'list.html',controller:'listController'})
.otherwise({redirectTo:'/'});
}]);
app.controller('listController',function($scope){
$scope.name="ROSE";
});Tout d'abord, puisque j'utilise Angular1.5, je dois introduire angulaire-route.js supplémentaire :
<script src="angular.min.js"></script> <script src="angular-route.min.js"></script>
Pour utiliser le routage en NG, vous devez d'abord le définir dans un module spécifique :
.config(['$routeProvider', function($routeProvider){
//内容
}Faire correspondre le routage à travers deux méthodes : quand et autrement. (En fait, il correspond au caractère / après l'URL ci-dessus). Enfin, placez le champ ou le fichier correspondant au caractère correspondant dans le DOM avec la directive ng-view.
quand il contient de nombreux attributs. Vous pouvez définir Contrôleur à l'intérieur, et le contrôleur sera associé au champ ou au fichier correspondant. Tout comme le contrôleur listController dans le code ci-dessus. La directive
ng-view a de nombreuses règles :
Lors de la correspondance des itinéraires :
1. Créez une nouvelle portée actuelle.
2. Supprimer la portée précédente.
3. Associez le modèle actuel (contrôleur, etc.) à la portée actuellement nouvellement créée.
4. S'il existe un contrôleur associé intégré, associez-le à la portée actuelle.
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!