NoterPour réaliser ce tutoriel il est conseillé d'avoir une base claire sur AngularJS, puisque nous n'entrerons pas dans les détails sur certains aspects techniques de cette technologie.
Alors que nous savons, AngularJS Il nous fournit un grand nombre de modules, de services et de filtres utiles lors de la création d'une application Web ou mobile pour aujourd'hui. Il existe d'autres modules que nous ne pouvons pas trouver au cœur de ce framework, l'un d'eux est ngRoute. Ce module a pour fonction d'utiliser des URL conviviales en lui attribuant un contrôleur et un modèle qui est appelé automatiquement via Ajax.
Plus d'informations sur ngRoute :
Utiliser ngRoute
Nous créons d'abord notre répertoire de projet, nous l'appellerons routeapp, dans ce répertoire nous créons un autre appelé public, en public nous créons un fichier index.html. Maintenant, à l'intérieur de public, nous créons un répertoire appelé js où nous allons placer nos fichiers angulaires. Dans js, nous commençons à placer deux premiers fichiers appelés app.js et controller.js
Nous pouvons obtenir toutes les versions actuelles d'angularjs sur ce lien : https://code.angularjs.org/. Pour utiliser le tutoriel nous utiliserons la version 1.5.5 https://code.angularjs.org/1.5.5/
Code index.html
Route dynamique NgCode App.js
angular.module ('routeapp', ['ngRoute', 'routeapp.controller']);Code Controller.js
angular.module ('routeapp.controller', []) .controller ('MainController', function () {console.log ('AngularJS');});Maintenant, nous l'exécutons sur un serveur Web. Vous pouvez utiliser ce que vous voulez, que ce soit Apache, nginx, Tomcat, etc. Pour mon cas, j'utiliserai express de nodejs. Si vous souhaitez également le faire avec nodejs, vous pouvez suivre les étapes suivantes. Si vous n'avez jamais utilisé nodejs vous pouvez suivre le tutoriel suivant où il est expliqué :
- Créez une architecture frontale avec npm, bower et grunt.
Nous utilisons la commande suivante à la racine du projet à partir de la ligne de commande.
npm ini
npm install --save-dev expressAprès le installation rapide nous créons un fichier à la racine du projet appelé serveur.js et on ajoute le code suivant :
var express = require ('express'); var app = express (); var port = Nombre (process.env.PORT || 3000); app.use (express.static (__ dirname + '/ public')); app.listen (port, function () {console.log ('App démarrée à http: // localhost:' + port);});Exécutons maintenant la commande :
serveur de nœud.jspour démarrer le serveur Web.
Lorsque vous démarrez le serveur Web, vérifiez que la console de l'inspecteur d'éléments de votre navigateur a tapé le mot AngularJS.
Faisons maintenant le utilisation de ngRoute.
Utilisation des itinéraires
Nous utiliserons le fonction de configuration angulaire pour créer les itinéraires de notre webapp.
.config (fonction ($ routeProvider) {$ routeProvider .when ('/ home', {templateUrl: 'tpl / home.html', contrôleur: 'HomeController'}) .otherwise ({redirectTo: '/ home'}); }) Code App.js- /domicile: l'URI de notre page d'accueil.
- URL du modèle : le chemin de notre modèle pour la maison.
- manette: Le contrôleur affecté au modèle d'accueil.
- Sinon: Placez notre site Web dans / home par défaut
À l'intérieur du corps de index.html, nous ajoutons une balise div avec l'attribut ng-vue qui sera en charge du rendu du template home.html et des futurs templates que nous allons créer dans le tutoriel.
Informations sur ngView :
Code dans index.html :
Nous ajoutons le contrôleur domestique dans contrôleur.js .controller ('HomeController', function () {console.log ('HomeController');})Si tout s'est bien passé, vous devriez obtenir quelque chose comme l'image suivante :
Persistance des données
Nous avons déjà testé que notre service de routage fonctionne correctement, nous continuons à créer un module pour gérer les utilisateurs, dans ce module, nous pouvons créer, répertorier, modifier et supprimer des utilisateurs. Pour le tutoriel, nous n'avons pas besoin de communiquer avec un backend, ce qui nous allons faire la persistance des données avec un tableau, ce qui signifie que ces données sont temporaires et qu'à chaque rafraîchissement de l'application, ces données seront perdues.
On commence par créer les fichiers suivants services.js Oui valeurs.js dans le répertoire js
angular.module ('routeapp.values', []) .value ('Users', []); Code valeurs.js
angular.module ('routeapp.services', ['routeapp.values']) .factory ('Databases', ['Users', function (Users) {return {DataUser: {add: function (user) {Users.push (user);}, list: function () {return Users;}, update: function (index, user) {return Users [index] = user;}, get: function (index) {return Users [index];} , destroy: function (index) {return Users.splice (index, 1);}}};}]) .factory ('Util', [function () {return {clone: function (obj) {if ( null = = obj || "object"! = typeof obj) return obj; var copy = obj.constructor (); for (var attr in obj) {if (obj.hasOwnProperty (attr)) copy [attr] = obj [ attr];} renvoyer une copie;}}}]); Code Services.js
Dans services js, nous créons deux usines appelées Bases de données Oui Utile.
- Bases de données : Il s'occupera de la persistance des données des enregistrements de l'utilisateur (en utilisant les fonctions add, update, list, get, destroy).
- Utile: Il servira de cloneur des données dont nous aurons besoin lors de l'enregistrement d'un utilisateur.
Nous injectons le module de services dans notre app.js
routeapp.servicesLe code de la première ligne de app.js ressemblerait à ceci :
angular.module ('routeapp', ['ngRoute', 'routeapp.controller', 'routeapp.services'])Il ne nous reste plus qu'à enregistrer les scripts services.js et values.js dans index.html, les placer avant le script app.js pour éviter tout type de désagrément dans l'exécution de l'application.
Avant de continuer, testons que notre application ne présente pas d'erreurs dans la console de développement. C'est ainsi que les fichiers ont été créés jusqu'à présent.
Nous continuons à créer les modèles pour l'enregistrement et la liste des utilisateurs. Nous créons dans tpl vers user.html et user-list.html
Nom d'utilisateur Nom E-mail EnregistrerCode utilisateur.html
| Utilisateur | nom | Poster |
|---|---|---|
| {{item.nom d'utilisateur}} | {{nom de l'article}} | {{item.email}} |
Dans contrôleur.js nous ajoutons le contrôleur pour user.html et user-list.html
.controller ('UserController', function ($ scope, Databases, Util) {$ scope.user = {}; $ scope.save = function () {var user = Util.clone ($ scope.user); Databases.DataUser .add (utilisateur); $ scope.user = {};};}) .controller ('UserListController', fonction ($ scope, Databases) {$ scope.dataUser = Databases.DataUser.list ();})Code Controller.js
Ajoutez dans index.html les liens pour accéder aux deux modèles :
- Enregistrer l'utilisateur
- Consulter l'utilisateur
Il nous suffit d'ajouter les nouvelles routes que nous avons créées à la configuration app.js, de les placer avant le sinon fonction:
.when ('/ user', {templateUrl : 'tpl / user.html', contrôleur : 'UserController'}) .when ('/ user / list', {templateUrl : 'tpl / user-list.html', contrôleur : 'UserListController'}) Voyons comment tout se passe jusqu'à présent.
AGRANDIR
Testez en enregistrant plusieurs utilisateurs et en vérifiant qu'ils s'enregistrent correctement depuis Consulter les utilisateurs.
Prêt, maintenant nous continuons avec la mise à jour et l'élimination des utilisateurs. Pour mettre à jour un utilisateur, ajoutez simplement une nouvelle fonctionnalité à UserController, on change le code précédent pour ce nouveau :
.controller ('UserController', fonction ($ scope, Databases, Util, $ routeParams, $ location) {var userID = $ routeParams.userID; var isEdit = (userID! = undefined); $ scope.user = {}; if (isEdit) {$ scope.user = Databases.DataUser.get (userID);} $ scope.save = function () {var user = Util.clone ($ scope.user); if (isEdit) {Databases.DataUser. update (userID, user); $ location.path ('/ user / list');} else {Databases.DataUser.add (user);} $ scope.user = {};};}) Explication du nouveau code :- $ routeParams : Ce service retournera les paramètres GET de notre application, dans ce cas nous l'utiliserons pour retourner l'ID de l'utilisateur que nous allons mettre à jour. $ routeParams.userID. Plus d'informations sur $ routerParams https: //docs.angular … ce / $ routeParams
Nous devons également ajouter un nouveau chemin dans la configuration de app.js :
.when ('/ user /: userID', {templateUrl: 'tpl / user.html', contrôleur: 'UserController'})Il est important de placer ce nouveau chemin sous le chemin '/user/list', afin qu'il nous présente un conflit avec ce dernier mentionné.
- '/ utilisateur / : ID utilisateur' : Comme nous pouvons le voir, cette URL a quelque chose de spécial appelé : userID, c'est le paramètre que nous utiliserons dans UserController.
Il ne reste plus qu'à ajouter une nouvelle colonne dans user-list.html où nous ajouterons un lien pour éditer l'utilisateur enregistré.
Code dans user-list.htmlÉditer
Il ne nous reste plus qu'à tester cette nouvelle opération, rafraîchir l'application, enregistrer puis éditer l'utilisateur.
Nous avons seulement besoin d'ajouter la fonctionnalité pour supprimer des utilisateurs. Nous créons un nouveau modèle en tpl appelé user-delete.html
Vous voulez supprimer {{Nom d'utilisateur}}?Supprimer User-delete.html code
Nous ajoutons un nouveau lien dans la table user-list.html pour accéder au modèle user-delete.html
Nous ajoutons dans controller.js le contrôleur pour user-delete.html appelé UserDeleteControllerSupprimer
.controller ('UserDeleteController', function ($ scope, Databases, $ routeParams, $ location) {var userID = $ routeParams.userID; $ scope.user = Databases.DataUser.get (userID); $ scope.destroy = function ( ) {Databases.DataUser.destroy (userID); $ location.path ('/ user / list');}}) Et nous ajoutons le chemin dans la configuration de app.js
.when ('/ user / delete /: userID', {templateUrl: 'tpl / user-delete.html', contrôleur: 'UserDeleteController'})Nous actualisons l'application, nous inscrivons puis testons l'opération de suppression de l'utilisateur.
Nous avons terminé notre application de base ! Nous maîtrisons déjà la création de routes manuelles dans notre application, mais si nous regardons de près et voyons de quoi sont construites les routes :
- /domicile
- / utilisateur
- / liste d'utilisateur
- / utilisateur / : ID utilisateur
- /utilisateur/supprimer/:ID utilisateur
Comment créer des itinéraires dynamiques
Regardons de près nos routes actuelles, pour créer un nouvel utilisateur nous utilisons la route / user.
- Pour interroger les utilisateurs/utilisateur/liste
- Pour l'éditer / user / : userID
- Pour supprimer / utilisateur / supprimer / : ID utilisateur.
Nous pouvons créer des itinéraires où seulement un, deux ou trois paramètres sont utilisés et ceux-ci les capturent, les utilisent à notre guise. Cela ressemblerait à ceci :
Nous devons clarifier quelque chose, pour que les routes dynamiques fonctionnent correctement, nous devons suivre les règles suivantes, pour les expliquer, nous utiliserons le même exemple d'utilisateur :
1. Le nom d'utilisateur doit être utilisé à la fois comme modèle et comme préfixe de contrôleur.
2. Pour les requêtes comme deuxième préfixe dans le didacticiel, nous utilisons la liste de mots, de la même manière que vous pouvez la changer en ce que vous voulez, mais le mot que vous utilisez doit l'avoir à la fois dans le nom du modèle et dans le nom du contrôleur. Ex : user-list.html et UserListController; pour supprimer : user-delete.html et UserDeleteController
3. Afin d'identifier les préfixes dans les contrôleurs, utilisez des majuscules.
4. Les noms de contrôleur doivent toujours se terminer par le mot Controller.
var route = {contrôleur : 'RouteController', templateUrl : fonction (uri) {var pattern = new RegExp ("[0-9] +"); var part_uri = (! pattern.test (uri.param2) && typeof uri.param2! == 'undefined')? '-' + uri.param2 : ''; return 'tpl /' + uri.param1 + part_uri + '.html'; }}; $ routeProvider .when ('/: param1', route) .when ('/: param1 /: param2', route) .when ('/: param1 /: param2 /: param3', route) .otherwise ({redirectTo: '/domicile'}); Code dans app.js
Nous créons trois modèles de chemin, donc lorsque vous n'avez qu'un seul paramètre, cela fonctionnerait pour / user et / home. Pour deux paramètres /user/ : userID et /user/list. Pour trois paramètres / user / delete / : userID
Nous devons également créer un nouveau contrôleur qui sera chargé de guider les différents contrôleurs en fonction de l'URI.
.controller ('RouteController', fonction ($ scope, $ routeParams, $ controller, $ filter) {var prefix = $ filter ('prefixController') ($ routeParams.param1) + '' + $ filter ('prefixController') ( $ routeParams.param2); $ contrôleur (préfixe + 'Controller', {$ scope : $ scope});}) Code RouteController
Ce contrôleur dépend à son tour d'un filtre, nous créons un nouveau fichier dans le répertoire js appelé filter.js
angular.module ('routeapp.filters', []) .filter ('prefixController', function () {return function (text) {if (typeof text === 'undefined') {return '';} var p_string = new RegExp ('[az] + [0-9] *'); var p_int = new RegExp ("[0-9] +"); if (p_int.test (text)) {return '';} else if (p_string.test (text)) {return text.charAt (0) .toUpperCase () + ((text.length> 1)? text.slice (1): '');} else {return '';}};}); Code Filters.js
On injecte le filtre dans app.js
routeapp.filtersNous importons le script filter.js dans index.html placé avant app.js
Nous devons changer un dernier détail dans UserController Oui UserDeleteController. Comme maintenant nous utilisons les paramètres : param1,: param2,: param3; le paramètre : userID ne sera plus disponible. Ce que nous devons changer dans les contrôleurs. Pour UserController, utilisez param2 et pour UserDeleteController param3
Code UserController:
var userID = $ routeParams.param2;Code UserDeleteController:
var userID = $ routeParams.param3;Nous avons finalisé notre routeur dynamique. Désormais, nous n'avons plus à nous soucier de créer de nouvelles routes vers notre site puisque tout est contrôlé par notre RouteurContrôleur et la nouvelle configuration du $ routerProvider, vous pouvez le tester en créant de nouveaux modèles et en attribuant ses routes et ses contrôleurs. Enfin, nous pouvons créer un nouveau modèle qui peut nous aider à détecter lorsque nous essayons d'accéder à une URL qui ne se trouve pas sur notre site. On peut utiliser un template 404. On va le créer en tpl avec le nom 404.html
Code pour 404.html
404Contrôleur du contrôleur
.controller ('404Controller', fonction () {})Afin que nous puissions détecter lorsque nous essayons d'accéder à un itinéraire indisponible, nous pouvons utiliser un auditeur angularjs qui s'en occupe. Nous remplaçons le code de Contrôleur principal par ce qui suit :
.controller ('MainController', function ($ scope, $ location) {console.log ('AngularJS'); $ scope. $ on ('$ routeChangeError', function (next, current) {$ location.path ('/ 404');});}) Il suffit de lancer l'application et de mettre une URL non disponible sur notre site, par exemple http:// localhost: 300… unknown-url. L'application redirigera immédiatement vers / 404
Tu peux téléchargez ce tutoriel démo ici:
routeapp.zip 344.9K 259 téléchargements
