NotaPer eseguire questo tutorial è consigliabile avere una base chiara su AngularJS, poiché non entreremo nel dettaglio di alcuni aspetti tecnici di questa tecnologia.
Mentre sappiamo, AngularJS Ci fornisce un gran numero di moduli, servizi e filtri che sono utili quando si crea un'applicazione web o mobile per oggi. Ci sono altri moduli che non possiamo trovare nel nucleo di questo framework, uno di questi è ngRoute. Questo modulo ha la funzione di utilizzare URL amichevoli assegnandogli un controller e un modello che viene chiamato automaticamente tramite Ajax.
Maggiori informazioni su ngRoute:
Utilizzo di ngRoute
Per prima cosa creiamo la nostra directory del progetto, la chiameremo routeapp, all'interno di questa directory ne creiamo un'altra chiamata public, in pubblico creiamo un file index.html. Ora, all'interno di public creiamo una directory chiamata js dove collocheremo i nostri file angolari. All'interno di js iniziamo a posizionare due primi file chiamati app.js e controller.js
Possiamo ottenere tutte le versioni correnti di angularjs a questo link: https://code.angularjs.org/. Per utilizzare il tutorial utilizzeremo la versione 1.5.5 https://code.angularjs.org/1.5.5/
Codice Index.html
Percorso Ng dinamicoCodice App.js
angular.module ('routeapp', ['ngRoute', 'routeapp.controller']);Codice controller.js
angular.module ('routeapp.controller', []) .controller ('MainController', function() {console.log ('AngularJS');});Ora eseguiamo questo su un server web. Puoi usare quello che vuoi, che si tratti di Apache, nginx, Tomcat, ecc. Per il mio caso userò express da nodejs. Se vuoi farlo anche con nodejs puoi seguire i seguenti passaggi. Se non hai mai usato nodejs puoi seguire il seguente tutorial dove è spiegato:
- Crea architettura frontend con npm, bower e grunt.
Usiamo il seguente comando nella radice del progetto dalla riga di comando.
npm ini
npm install --save-dev expressDopo il installazione rapida creiamo un file nella radice del progetto chiamato server.js e aggiungiamo il seguente codice:
var express = require('express'); var app = express (); var porta = Numero (process.env.PORT || 3000); app.use (express.static (__ dirname + '/ public')); app.listen (port, function () {console.log ('App avviata da http: // localhost:' + port);});Ora eseguiamo il comando:
nodo server.jsper avviare il server web.
Quando avvii il server web verifica che la console di ispezione degli elementi del tuo browser abbia digitato la parola AngularJS.
Ora facciamo il uso di ngRoute.
Utilizzo dei percorsi
Useremo il funzione di configurazione angolare per creare i percorsi della nostra webapp.
.config (funzione ($ routeProvider) {$ routeProvider .quando ('/ home', {templateUrl: 'tpl / home.html', controller: 'HomeController'}) .otherwise ({redirectTo: '/ home'}); }) Codice App.js- /casa: l'URI per la nostra home page.
- URLmodello: il percorso del nostro modello per la casa.
- controllore: Il controller assegnato per il modello home.
- Altrimenti: Posiziona il nostro sito Web in / home per impostazione predefinita
All'interno del corpo di index.html aggiungiamo un tag div con l'attributo ng-view chi si occuperà del rendering del template home.html e dei futuri template che andremo a creare nel tutorial.
Informazioni su ngView:
Codice in index.html:
Aggiungiamo il controller di casa in controller.js .controller ('HomeController', function() {console.log ('HomeController');})Se tutto è andato bene dovresti ottenere qualcosa come la seguente immagine:
Persistenza dei dati
Abbiamo già testato che il nostro servizio di rotte funziona correttamente, continuiamo con la creazione di un modulo per gestire gli utenti, in questo modulo possiamo creare, elencare, modificare ed eliminare gli utenti. Per il tutorial non abbiamo bisogno di comunicare con un backend, che faremo la persistenza dei dati con un array, il che significa che questi dati sono temporanei e che ogni volta che aggiorniamo l'applicazione, tali dati andranno persi.
Iniziamo creando i seguenti file servizi.js sì valori.js all'interno della directory js
angular.module ('routeapp.values', []) .value ('Users', []); Codice Values.js
angular.module ('routeapp.services', ['routeapp.values']) .factory ('Databases', ['Users', function (Users) {return {DataUser: {add: function (user) {Users.push (utente);}, list: function () {return Users;}, update: function (index, user) {return Users [indice] = utente;}, get: function (index) {return Users [indice];} , destroy: function (index) {return Users.splice (index, 1);}}};}]) .factory ('Util', [function () {return {clone: function (obj) {if ( null = = obj || "oggetto"! = typeof obj) return obj; var copy = obj.constructor (); for (var attr in obj) {if (obj.hasOwnProperty (attr)) copy [attr] = obj [ attr];} restituisce copia;}}}]); Codice Services.js
In services js creiamo due fabbriche chiamate Banche dati sì Utile.
- Banche dati: Si occuperà della persistenza dei dati registrati dall'utente (usando le funzioni aggiungi, aggiorna, elenca, ottieni, distruggi).
- Utile: Servirà come cloner dei dati di cui avremo bisogno quando registriamo un utente.
Iniettiamo il modulo servizi alla nostra app.js
routeapp.serviziIl codice per la prima riga di app.js sarebbe simile a questo:
angular.module ('routeapp', ['ngRoute', 'routeapp.controller', 'routeapp.services'])Ora non ci resta che salvare gli script services.js e values.js in index.html, posizionarli prima dello script app.js per evitare qualsiasi tipo di inconveniente nell'esecuzione dell'applicazione.
Prima di continuare, verifichiamo che la nostra applicazione non presenti errori nella console di sviluppo. Questo è il modo in cui i file sono stati creati finora.
Continuiamo a creare i modelli per la registrazione e l'elenco degli utenti. Creiamo all'interno di tpl in user.html e user-list.html
Nome utente Nome Email SalvaCodice utente.html
| Utente | Nome | posta |
|---|---|---|
| {{item.username}} | {{nome dell'oggetto}} | {{item.email}} |
Entro controller.js aggiungiamo il controller per user.html e user-list.html
.controller ('UserController', function ($ scope, Databases, Util) {$ scope.user = {}; $ scope.save = function () {var user = Util.clone ($ scope.user); Databases.DataUser .add (utente); $ scope.user = {};};}) .controller ('UserListController', funzione ($ scope, Database) {$ scope.dataUser = Databases.DataUser.list ();})Codice controller.js
Aggiungi in index.html i link per accedere ai due template:
- Registra utente
- Consulta l'utente
Abbiamo solo bisogno di aggiungere i nuovi percorsi che abbiamo creato alla configurazione di app.js, posizionarli prima del altrimenti funzione:
.quando ('/ user', {templateUrl: 'tpl / user.html', controller: 'UserController'}) .quando ('/ user/list', {templateUrl: 'tpl / user-list.html', controller : 'UserListController'}) Vediamo come tutto sta andando finora.
INGRANDIRE
Prova registrando più utenti e verificando che si stiano registrando correttamente da Consulta gli utenti.
Pronti, ora proseguiamo con l'aggiornamento e l'eliminazione degli utenti. Per aggiornare un utente, basta aggiungere nuove funzionalità a UserController, cambiamo il codice precedente per questo nuovo:
.controller ('UserController', function ($ 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 = {};};}) Spiegazione del nuovo codice:- $ routeParams: Questo servizio restituirà i parametri GET della nostra applicazione, in questo caso lo utilizzeremo per restituire l'ID dell'utente che andremo ad aggiornare. $ routeParams.userID. Maggiori informazioni su $ routerParams https: //docs.angular … ce / $ routeParams
Dobbiamo anche aggiungere un nuovo percorso nella configurazione di app.js:
.quando ('/ user /: userID', {templateUrl: 'tpl / user.html', controller: 'UserController'})È importante posizionare questo nuovo percorso sotto il percorso '/ utente / elenco', in modo che ci presenti un conflitto con quest'ultimo menzionato.
- '/ utente /: ID utente': Come possiamo vedere, questo URL ha qualcosa di speciale chiamato: userID, questo è il parametro che useremo in UserController.
Resta solo da aggiungere una nuova colonna in user-list.html dove aggiungeremo un link per modificare l'utente registrato.
Codice in user-list.htmlModificare
Ora non ci resta che testare questa nuova operazione, aggiornare l'applicazione, registrarci e poi modificare l'utente.
Abbiamo solo bisogno di aggiungere la funzionalità per eliminare gli utenti. Creiamo un nuovo template in tpl chiamato user-delete.html
Vuoi rimuovere {{nome utente}}?Rimuovere Codice utente-delete.html
Aggiungiamo un nuovo collegamento nella tabella user-list.html per accedere al modello user-delete.html
Aggiungiamo in controller.js il controller per user-delete.html chiamato UserDeleteControllerRimuovere
.controller ('UserDeleteController', function ($ scope, Databases, $ routeParams, $ location) {var userID = $ routeParams.userID; $ scope.user = Databases.DataUser.get (userID); $ scope.destroy = funzione ( ) {Databases.DataUser.destroy (userID); $ location.path ('/ user/list');}}) E aggiungiamo il percorso in config di app.js
.quando ('/ user / delete /: userID', {templateUrl: 'tpl / user-delete.html', controller: 'UserDeleteController'})Aggiorniamo l'applicazione, registriamo e poi testiamo l'operazione di rimozione dell'utente.
Abbiamo terminato la nostra applicazione di base! Abbiamo già imparato la creazione di percorsi manuali nella nostra applicazione, ma se osserviamo da vicino e vediamo cosa sono costruiti i percorsi:
- /casa
- / utente
- / lista degli utenti
- / utente /: ID utente
- / utente / cancella /: userID
Come creare percorsi dinamici
Diamo un'occhiata da vicino ai nostri percorsi attuali, per creare un nuovo utente usiamo il percorso / utente.
- Per interrogare gli utenti/utente/lista
- Per modificarlo / utente /: userID
- Per cancellare/utente/cancellare/: userID.
Possiamo creare dei percorsi in cui vengono utilizzati solo uno, due o tre parametri e questi li catturano, li usano a nostro piacimento. Sembrerebbe questo:
Dobbiamo chiarire una cosa, affinché i percorsi dinamici funzionino correttamente dobbiamo seguire le seguenti regole, per spiegarle utilizzeremo lo stesso esempio di utente:
1. Il nome utente deve essere utilizzato sia come modello che come prefisso del controller.
2. Per le query come secondo prefisso nel tutorial usiamo la lista di parole, allo stesso modo puoi cambiarla in quello che vuoi, ma la parola che usi deve averla sia nel nome del modello che nel nome del controllore. Es: user-list.html e UserListController; per l'eliminazione: user-delete.html e UserDeleteController
3. Per identificare i prefissi nei controllori, utilizzare le lettere maiuscole.
4. I nomi dei controller devono sempre terminare con la parola Controller.
var route = {controller: 'RouteController', templateUrl: function (uri) {var pattern = new RegExp ("[0-9] +"); var part_uri = (! pattern.test (uri.param2) && typeof uri.param2! == 'non definito')? '-' + uri.param2: ''; return 'tpl /' + uri.param1 + part_uri + '.html'; }}; $ routeProvider .quando ('/: param1', percorso) .quando ('/: param1 /: param2', percorso) .quando ('/: param1 /: param2 /: param3', percorso) .otherwise ({redirectTo: '/casa'}); Codice in app.js
Creiamo tre modelli di percorso, quindi quando hai un solo parametro funzionerebbe per / utente e / casa. Per due parametri/utente/: userID e/utente/lista. Per tre parametri / utente / elimina /: userID
Dobbiamo anche creare un nuovo controller che avrà il compito di guidare i diversi controller a seconda dell'URI.
.controller ('RouteController', function ($ scope, $ routeParams, $ controller, $ filter) {var prefix = $ filter ('prefixController') ($ routeParams.param1) + '' + $ filter ('prefixController') ( $ routeParams.param2); $ controller (prefisso + 'Controller', {$ scope: $ scope});}) Codice RouteController
Questo controller a sua volta dipende da un filtro, creiamo un nuovo file nella directory js chiamato 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 (testo)) {return '';} else if (p_string.test (text)) {return text.charAt (0) .toUpperCase () + ((text.length> 1)? text.slice (1): '');} else {return '';}};}); Codice Filters.js
Iniettiamo il filtro in app.js
routeapp.filtersImportiamo lo script filter.js in index.html posto prima di app.js
Dobbiamo cambiare un ultimo dettaglio in UserController sì UserDeleteController. Come ora stiamo usando i parametri: param1,: param2,: param3; il parametro: userID non sarà più disponibile. Che dobbiamo cambiare nei controller. Per UserController usa param2 e per UserDeleteController param3
Codice UserController:
var ID utente = $ routeParams.param2;Codice UserDeleteController:
var ID utente = $ routeParams.param3;Abbiamo finalizzato il nostro router dinamico. Ora non dobbiamo più preoccuparci di creare nuovi percorsi verso il nostro sito poiché tutto è controllato dal nostro RouterController e la nuova configurazione del $ routerProvider, puoi testarlo creando nuovi modelli e assegnandogli route e controller. Infine, possiamo creare un nuovo modello che può aiutarci a rilevare quando si tenta di accedere a un URL che non si trova sul nostro sito. Possiamo usare un template 404. Lo creeremo in tpl con il nome 404.html
Codice per 404.html
404Controller controller
.controller ('404Controller', funzione () {})In modo che possiamo rilevare quando si tenta di accedere a un percorso non disponibile, possiamo usare a ascoltatore angularjs chi se ne prende cura. Sostituiamo il codice di Controller principale da quanto segue:
.controller ('MainController', function ($ scope, $ location) {console.log ('AngularJS'); $ scope. $ on ('$ routeChangeError', function (next, current) {$ location.path ('/ 404 ');});}) Basta eseguire l'applicazione e inserire un URL non disponibile sul nostro sito, ad esempio http: // localhost: 300… unknown-url. L'applicazione reindirizzerà immediatamente a /404
Puoi scarica questa demo del tutorial qui:
routeapp.zip 344.9K 259 download
