Tout d'abord, créez une page index.html
<!doctype html>
<html ng-app="mainApp">
<head>
<meta charset="UTF-8"/>
<title>Angular JS + Spring MVC test</title>
<link rel="stylesheet" href="resources/bootstrap/css/bootstrap.min.css" />
<script src="resources/js/lib/angular/angular.js"></script>
<script src="resources/js/lib/angular/angular-resource.js"></script>
<script src="resources/js/lib/angular/angular-route.js"></script>
<script src="resources/js/mainApp.js"></script>
<script src="resources/js/InsuranceAddController.js"></script>
</head>
<body>
<p id="wrapper">
<p ng-view></p>
</p>
</body>
</html>Créez ensuite une page de routage add.html
<p class="row">
....
</p>Puis mainApp.js, le js utilisé pour contrôler la distribution des routes et les modèles
var mainApp = angular.module('mainApp', [ 'ngRoute', 'ngResource' ]);
mainApp.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/add.do', {
templateUrl : 'insurance_add.html',
controller : 'InsuranceAddController'
});
} ]);
Créez ensuite InsuranceAddController.js pour gérer certains js ou autres de la page add.html
mainApp.controller('InsuranceAddController', ['$scope', '$location', function($scope, $location) {
$scope.gotoList = function() {
...
};
}]);Ce que je veux réaliser, c'est écrire une pagination sur cette page, et ma compréhension est d'écrire un contrôleur sur cette page de routage,
<p class="row">
<p ng-controller="PaginationDemoCtrl">
...
</p>
</p>
Ajoutez ensuite le code de contrôle de PaginationDemoCtrl dans InsuranceAddController.js
mainApp.controller('InsuranceAddController', ['$scope', '$location', function($scope, $location) {
$scope.gotoList = function() {
...
};
}]);
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PaginationDemoCtrl', function ($scope, $log) {
...
});Cependant, une erreur est signalée. Comment y parvenir ? (Question stupide d'un débutant, s'il vous plaît, soyez indulgents avec moi)
Ce qui suit est la DÉMO de pagination (je souhaite lancer la démo de pagination dans la page de routage add.html)
<p ng-controller="PaginationDemoCtrl">
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true">
</uib-pagination>
</p>
<script>
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PaginationDemoCtrl', function ($scope, $log) {
$scope.totalItems = 64;
$scope.currentPage = 4;
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function() {
$log.log('Page changed to: ' + $scope.currentPage);
};
$scope.maxSize = 5;
$scope.bigTotalItems = 175;
$scope.bigCurrentPage = 1;
});
</script>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Je peux vous dire avec précision qu'il n'y a aucun problème à utiliser
controllerde cette manière. Une erreur signifie que vous avez fait une erreur quelque part, par exemple : Où est définiPaginationDemoCtrl?Écrivez également une pagination, pourquoi avez-vous besoin d'en mettre un autre
controllerà l'intérieur ?D'où vient l'application principale ici ? Le navigateur peut-il le reconnaître correctement ?