NotăPentru a efectua acest tutorial, este recomandabil să aveți o bază clară pe AngularJS, deoarece nu vom intra în detalii despre unele aspecte tehnice ale acestei tehnologii.
În timp ce știm, AngularJS Ne oferă un număr mare de module, servicii și filtre care sunt utile la crearea unei aplicații web sau mobile pentru ziua de azi. Există alte module pe care nu le putem găsi în miezul acestui cadru, unul dintre acestea este ngRoute. Acest modul are funcția de a utiliza adrese URL prietenoase, atribuindu-i un controler și un șablon care este apelat automat prin Ajax.
Mai multe informații despre ngRoute:
Folosind ngRoute
Mai întâi creăm directorul nostru de proiect, îl vom numi routeapp, în acest director creăm un alt public numit, în public creăm un fișier index.html. Acum, în public creăm un director numit js unde vom plasa fișierele noastre unghiulare. În interiorul lui js începem să plasăm primele două fișiere numite app.js și controller.js
Putem obține toate versiunile actuale ale angularjs la acest link: https://code.angularjs.org/. Pentru a folosi tutorialul vom folosi versiunea 1.5.5 https://code.angularjs.org/1.5.5/
Cod Index.html
Traseu Ng dinamicCodul App.js
angular.module ('routeapp', ['ngRoute', 'routeapp.controller']);Cod Controller.js
angular.module ('routeapp.controller', []) .controller ('MainController', function () {console.log ('AngularJS');});Acum rulăm acest lucru pe un server web. Puteți folosi orice doriți, fie că este vorba de Apache, nginx, Tomcat etc. Pentru cazul meu voi folosi expres din nodejs. Dacă doriți să o faceți și cu nodejs, puteți urma pașii următori. Dacă nu ați folosit niciodată nodejs, puteți urma următorul tutorial unde este explicat:
- Creați arhitectură frontend cu npm, bower și grunt.
Folosim următoarea comandă în rădăcina proiectului din linia de comandă.
npm ini
npm install --save-dev expressDupă instalare expresă creăm un fișier numit în rădăcina proiectului server.js și adăugăm următorul cod:
var express = require ('express'); var app = express (); var port = Number (process.env.PORT || 3000); app.use (express.static (__ dirname + '/ public')); app.listen (port, function () {console.log ('Aplicația a început de la http: // localhost:' + port);});Acum executăm comanda:
nod server.jspentru a porni serverul web.
Când porniți serverul web, verificați dacă consola de inspecție a elementelor browserului dvs. a tastat cuvântul AngularJS.
Acum hai să facem utilizarea ngRoute.
Folosirea rutelor
Vom folosi funcția de configurație unghiulară pentru a crea rutele aplicației noastre web.
.config (funcție ($ routeProvider) {$ routeProvider .when ('/ home', {templateUrl: 'tpl / home.html', controller: 'HomeController'}) .în caz contrar ({redirectTo: '/ home'}); }) Codul App.js- /Acasă: URI-ul pentru pagina noastră de pornire.
- templateURL: calea șablonului nostru pentru acasă.
- controlor: Controlerul atribuit pentru șablonul de pornire.
- In caz contrar: Plasați site-ul nostru în / acasă în mod implicit
În corpul index.html adăugăm o etichetă div cu atributul ng-view cine va fi responsabil cu redarea șablonului home.html și a șabloanelor viitoare pe care urmează să le creăm în tutorial.
Informații despre ngView:
Cod în index.html:
Adăugăm controlerul de acasă controller.js .controller ('HomeController', function () {console.log ('HomeController');})Dacă totul a decurs corect, ar trebui să obțineți ceva de genul următoarei imagini:
Persistența datelor
Am testat deja că serviciul nostru de rute funcționează corect, continuăm cu crearea unui modul pentru gestionarea utilizatorilor, în acest modul putem crea, enumera, edita și șterge utilizatori. Pentru tutorial nu este nevoie să comunicăm cu un backend, care vom face persistența datelor cu o matrice, ceea ce înseamnă că aceste date sunt temporare și că de fiecare dată când reîmprospătăm aplicația, datele menționate se vor pierde.
Începem prin a crea următoarele fișiere services.js Da valori.js în directorul js
angular.module ('routeapp.values', []) .value ('Users', []); Codul Values.js
angular.module ('routeapp.services', ['routeapp.values']) .factory ('Baze de date', ['Users', function (Users) {return {DataUser: {add: function (user) {Users.push (utilizator);}, 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];} returnează copia;}}}]); Codul Services.js
În serviciile js creăm două fabrici numite Baze de date Da Util.
- Baze de date: Se va ocupa de persistența datelor înregistrate de utilizator (folosind funcții add, update, list, get, destroy).
- Util: Acesta va servi drept clonator al datelor de care vom avea nevoie atunci când înregistrăm un utilizator.
Injectăm modulul de servicii în app.js
routeapp.servicesCodul pentru prima linie a app.js ar arăta astfel:
angular.module ('routeapp', ['ngRoute', 'routeapp.controller', 'routeapp.services'])Acum trebuie doar să salvăm scripturile services.js și values.js în index.html, așezați-le înaintea scriptului app.js pentru a evita orice fel de inconvenient în executarea aplicației.
Înainte de a continua, să testăm că aplicația noastră nu prezintă erori în consola de dezvoltare. Așa au fost create fișierele până acum.
Continuăm să creăm șabloanele pentru înregistrarea și lista utilizatorilor. Creăm în tpl to user.html și user-list.html
Nume utilizator Nume Email SalvareCod utilizator.html
| Utilizator | Nume | Poștă |
|---|---|---|
| {{item.username}} | {{item.name}} | {{item.email}} |
În controller.js adăugăm controlerul pentru user.html și user-list.html
.controller ('UserController', function ($ scope, Database, Util) {$ scope.user = {}; $ scope.save = function () {var user = Util.clone ($ scope.user); Databases.DataUser .add (utilizator); $ scope.user = {};};}) .controller ('UserListController', funcție ($ scope, Database) {$ scope.dataUser = Databases.DataUser.list ();})Cod Controller.js
Adăugați în index.html linkurile pentru a accesa cele două șabloane:
- Înregistrați utilizatorul
- Consultați utilizatorul
Trebuie doar să adăugăm noile rute pe care le-am creat în config app.js, așezați-le înainte de altfel funcționează:
.when ('/ user', {templateUrl: 'tpl / user.html', controller: 'UserController'}) .when ('/ user / list', {templateUrl: 'tpl / user-list.html', controller : 'UserListController'}) Să vedem cum merge totul până acum.
MARI
Testați înregistrând mai mulți utilizatori și verificând dacă se înregistrează corect de la Consultați utilizatorii.
Gata, acum continuăm cu actualizarea și eliminarea utilizatorilor. Pentru a actualiza un utilizator, trebuie doar să adăugați funcții noi la UserController, schimbăm codul anterior pentru acest nou:
.controller ('UserController', funcție ($ scope, Baze de date, Util, $ routeParams, $ locație) {var userID = $ routeParams.userID; var isEdit = (userID! = nedefinit); $ scope.user = {}; dacă (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 = {};};}) Explicația noului cod:- $ routeParams: Acest serviciu va returna parametrii GET ai aplicației noastre, în acest caz îl vom folosi pentru a returna ID-ul utilizatorului pe care urmează să îl actualizăm. $ routeParams.userID. Mai multe informații despre $ routerParams https: //docs.angular … ce / $ routeParams
De asemenea, trebuie să adăugăm o nouă cale în configurarea app.js:
.when ('/ user /: userID', {templateUrl: 'tpl / user.html', controller: 'UserController'})Este important să plasați această nouă cale sub calea „/ utilizator / listă”, astfel încât să ne prezinte un conflict cu aceasta din urmă.
- „/ user /: userID”: După cum putem vedea, această adresă URL are ceva special numit: userID, acesta este parametrul pe care îl vom folosi în UserController.
Rămâne doar să adăugăm o nouă coloană în user-list.html unde vom adăuga un link pentru a edita utilizatorul înregistrat.
Cod în user-list.htmlEditați | ×
Acum trebuie doar să testăm această nouă operațiune, să reîmprospătăm aplicația, să ne înregistrăm și apoi să edităm utilizatorul.
Trebuie doar să adăugăm funcționalitatea pentru a șterge utilizatorii. Creăm un nou șablon în tpl numit user-delete.html
Doriți să eliminați {{nume de utilizator}}?Elimina User-delete.html cod
Adăugăm un nou link în tabelul user-list.html pentru a accesa șablonul user-delete.html
Adăugăm în controller.js controlerul pentru user-delete.html numit UserDeleteControllerElimina
.controller ('UserDeleteController', function ($ scope, Bazele de date, $ routeParams, $ location) {var userID = $ routeParams.userID; $ scope.user = Databases.DataUser.get (userID); $ scope.destroy = function ( ) {Databases.DataUser.destroy (userID); $ location.path ('/ user / list');}}) Și adăugăm calea în config de app.js
.when ('/ user / delete /: userID', {templateUrl: 'tpl / user-delete.html', controler: 'UserDeleteController'})Reîmprospătăm aplicația, ne înregistrăm și apoi testăm operațiunea de eliminare a utilizatorului.
Am terminat aplicația noastră de bază! Am stăpânit deja crearea de rute manuale în aplicația noastră, dar dacă ne uităm cu atenție și vedem ce rute sunt construite:
- /Acasă
- / utilizator
- / utilizator / listă
- / user /: userID
- / user / delete /: userID
Cum se creează rute dinamice
Să ne uităm cu atenție la rutele noastre actuale, pentru a crea un nou utilizator, folosim ruta / utilizatorul.
- Pentru a interoga utilizatorii / utilizatorul / lista
- Pentru a-l edita / user /: userID
- Pentru a șterge / user / delete /: userID.
Putem crea unele rute în care se utilizează doar unul, doi sau trei parametri și aceștia îi captează, îi folosesc după bunul nostru plac. Ar arăta astfel:
Trebuie să clarificăm ceva, pentru ca rutele dinamice să funcționeze corect, trebuie să respectăm următoarele reguli, pentru a le explica vom folosi același exemplu de utilizator:
1. Numele utilizator ar trebui să fie folosit atât ca șablon, cât și ca prefix al controlerului.
2. Pentru interogările ca al doilea prefix din tutorial folosim lista de cuvinte, în același mod îl puteți schimba în orice doriți, dar cuvântul pe care îl utilizați trebuie să îl aibă atât în numele șablonului, cât și în nume a controlerului. Ex: user-list.html și UserListController; pentru ștergere: user-delete.html și UserDeleteController
3. Pentru a identifica prefixele din controlere, utilizați litere mari.
4. Numele controlerului trebuie să se încheie întotdeauna cu cuvântul Controler.
var route = {controller: 'RouteController', templateUrl: function (uri) {var pattern = new RegExp ("[0-9] +"); var part_uri = (! pattern.test (uri.param2) && typeof uri.param2! == 'undefined')? '-' + uri.param2: ''; returnează 'tpl /' + uri.param1 + part_uri + '.html'; }}; $ routeProvider .when ('/: param1', route) .when ('/: param1 /: param2', route) .when ('/: param1 /: param2 /: param3', route) .în caz contrar ({redirectTo: '/Acasă'}); Cod în app.js
Creăm trei modele de cale, deci atunci când aveți doar un singur parametru ar funcționa pentru / user și / home. Pentru doi parametri / user /: userID și / user / list. Pentru trei parametri / user / delete /: userID
De asemenea, trebuie să creăm un nou controler care va fi responsabil de ghidarea diferitelor controlere în funcție de URI.
.controller ('RouteController', function ($ scope, $ routeParams, $ controller, $ filter) {var prefix = $ filter ('prefixController') ($ routeParams.param1) + '' + $ filter ('prefixController') ( $ routeParams.param2); $ controller (prefix + 'Controler', {$ scope: $ scope});}) Codul RouteController
La rândul său, acest controler depinde de un filtru, creăm un fișier nou în directorul js numit filters.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 '';}};}); Codul Filters.js
Injectăm filtrul în app.js
routeapp.filtersImportăm scriptul filters.js în index.html plasat înaintea app.js
Trebuie să schimbăm un ultim detaliu în UserController Da UserDeleteController. Ca și acum, folosim parametri: param1 ,: param2 ,: param3; parametrul: userID nu va mai fi disponibil. Ceea ce trebuie să schimbăm în controlere. Pentru UserController folosiți param2 și pentru UserDeleteController param3
Cod UserController:
var userID = $ routeParams.param2;Cod UserDeleteController:
var userID = $ routeParams.param3;Am finalizat routerul nostru dinamic. Acum nu mai trebuie să ne facem griji cu privire la crearea de noi rute către site-ul nostru, deoarece totul este controlat de compania noastră RouterController și noua configurație a $ routerProvider, o puteți testa prin crearea de noi șabloane și atribuirea rutelor și controlerelor sale. În cele din urmă, putem crea un nou șablon care ne poate ajuta să detectăm atunci când încercăm să accesăm o adresă URL care nu se găsește pe site-ul nostru. Putem folosi un șablon 404. Îl vom crea în tpl cu numele 404.html
Cod pentru 404.html
404 Controller controler
.controller ('404Controller', function () {})Pentru a putea detecta când încercăm să accesăm un traseu indisponibil, putem folosi un ascultător angularjs cine se ocupă de ea. Înlocuim codul MainController prin următoarele:
.controller ('MainController', function ($ scope, $ location) {console.log ('AngularJS'); $ scope. $ on ('$ routeChangeError', function (next, current) {$ location.path ('/ 404 ');});}) Doar rulați aplicația și puneți o adresă URL care nu este disponibilă pe site-ul nostru, de exemplu http: // localhost: 300 … unknown-url. Aplicația va redirecționa imediat către / 404
Poti descărcați acest tutorial demo Aici:
routeapp.zip 344.9K 259 Descărcări
