English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriel de base AngularJS

Vues AngularJS

AngularJS prend en charge les applications Web à une page en utilisant plusieurs vues sur une seule page. À cette fin, AngularJS fournit ng-View et ng-Instruction template et le service $routeProvider.

ng-Instruction view

ng-L'instruction view crée uniquement un placeholder, où vous pouvez placer la vue correspondante (HTML ou ng-template vue).

Utilisation

Utilisez ng dans le module principal-La vue définit div.

<div ng-app "mainApp">
　　　...
　　　<div ng-view></div></div>

ng-Instruction template

ng-L'instruction template est utilisée pour créer une vue HTML à l'aide de balises de script. Elle contientidPropriété, cette propriété est utilisée par $routeProvider pour mapper les vues avec les contrôleurs.

Utilisation

Définissez le bloc de script dans le module principal en tant que ng-template.

<div ng-app "mainApp">
　　　...
　　　<script type "text/ng-template" id "addStudent.htm">
　　　　　　<h2> Ajouter un étudiant </h2>
　　　　　　{{message}}
　　　</script>
</div>

Service $routeProvider

$routeProvider est un service clé qui peut configurer les URL, les associer aux pages HTML correspondantes ou aux pages ng-template mapping, et ajoutez-y le contrôleur.

Utilisation1

Définissez le bloc de script dans le module principal en tant que ng-template.

<div ng-app "mainApp">　
　　　...　
　　　<script type "text/ng-template" id "addStudent.htm">　
　　　　　　<h2> Ajouter un étudiant </h2>　
　　　　　　{{message}}　
　　　</script>　　
</div>

Utilisation2

Utilisez un bloc de script défini dans le module principal et configurez la configuration de routage.

var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
　　　$routeProvider
　　　
　　　.when('/addStudent', {
　　　　　　templateUrl: 'addStudent.htm', controller: 'AddStudentController'
　　　})
　　　.when('/viewStudents', {
　　　　　　templateUrl: 'viewStudents.htm', controller: 'ViewStudentsController'
　　　})
　　　.otherwise ({
　　　　　　redirectTo: ''/addStudent
　　　});
});

Dans l'exemple ci-dessus, les points suivants sont importants-

  • $routeProvider est défini comme une fonction sous le module mainApp configuration, utilisant la clé '$routeProvider'.

  • $routeProvider.when pour définir l'URL "}}/addStudent", l'URL correspond à " addStudent.htm". addStudent.htm devrait être situé sur le même chemin que la page principale HTML. Si la page HTML n'est pas définie, il est nécessaire de définir ng-template est utilisé avec id ="addStudent.htm". Nous avons utilisé ng-template.

  • "otherwise" est utilisé pour définir la vue par défaut.

  • "controller" est utilisé pour définir le contrôleur approprié pour la vue.

Exemple en ligne

Les exemples ci-dessous montrent l'utilisation de toutes les instructions ci-dessus.

testAngularJS.htm

<html>
　　　<head>
　　　　　　<title>Angular JS Views</title>
　　　　　　<script src "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script>
　　　　　　<script src "https://cdn.staticfile.org/angular.js/1.3.14/angular-route.min.js">
　　　　　　</script>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>AngularJS-Exemple d'application de vue/h2>
　　　　　　<div ng-app "mainApp">
　　　　　　　　　<p><a href "https://fr.oldtoolbag.com/run/angularjs-views-1.html#addStudent" target="_self">Ajouter un étudiant</a></p>
　　　　　　　　　<p><a href "https://fr.oldtoolbag.com/run/angularjs-views-1.html#viewStudents" target="_self">Voir les étudiants</a></p>
　　　　　　　　　<div ng-view></div>
　　　　　　　　　
　　　　　　　　　<script type "text/ng-template" id "addStudent.htm">
　　　　　　　　　　　　<h2>Ajouter un étudiant</h2>
　　　　　　　　　　　　{{message}}
　　　　　　　　　</script>
　　　　　　　　　
　　　　　　　　　<script type "text/ng-template" id "viewStudents.htm">
　　　　　　　　　　　　<h2>Voir les étudiants</h2>
　　　　　　　　　　　　{{message}}
　　　　　　　　　</script>
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　var mainApp = angular.module("mainApp", ['ngRoute']);
　　　　　　　　　mainApp.config(['$routeProvider', function($routeProvider) {
　　　　　　　　　　　　$routeProvider
　　　　　　　　　　　　
　　　　　　　　　　　　.when('/addStudent', {
　　　　　　　　　　　　　　　templateUrl: 'addStudent.htm',
　　　　　　　　　　　　　　　controller: 'AddStudentController'
　　　　　　　　　　　　})
　　　　　　　　　　　　.when('/viewStudents', {
　　　　　　　　　　　　　　　templateUrl: 'viewStudents.htm',
　　　　　　　　　　　　　　　controller: 'ViewStudentsController'
　　　　　　　　　　　　})
　　　　　　　　　　　　.otherwise({
　　　　　　　　　　　　　　　redirectTo: ''/addStudent
　　　　　　　　　　　　});
　　　　　　　　　});
　　　　　　　　　mainApp.controller('AddStudentController', function($scope) {
　　　　　　　　　　　　$scope.message = "Cette page sera utilisée pour afficher le tableau d'ajout d'étudiants";
　　　　　　　　　});
　　　　　　　　　mainApp.controller('ViewStudentsController', function($scope) {
　　　　　　　　　　　　$scope.message = "Cette page sera utilisée pour afficher tous les étudiants";
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>
Vérifiez et voyez‹/›

Résultat de la sortie

Ouvrir le fichier dans un navigateur webtestAngularJS.htmet voir les résultats.

Scope (Portée) AngularJSAjax AngularJS