MerkFor å gjennomføre denne opplæringen er det tilrådelig å ha et klart grunnlag for AngularJS, siden vi ikke vil gå i detalj om noen tekniske aspekter ved denne teknologien.
Mens vi vet, AngularJS Det gir oss et stort antall moduler, tjenester og filtre som er nyttige når vi lager en web- eller mobilapplikasjon for i dag. Det er andre moduler som vi ikke finner i kjernen i dette rammeverket, en av disse er ngRoute. Denne modulen har funksjonen til å bruke vennlige URL -er ved å tildele den en kontroller og en mal som kalles automatisk via Ajax.
Mer informasjon om ngRoute:
Bruker ngRoute
Først oppretter vi prosjektkatalogen vår, vi vil kalle den ruteapp, i denne katalogen lager vi en annen som kalles offentlig, offentlig lager vi en index.html -fil. Nå, i det offentlige, lager vi en katalog kalt js der vi skal plassere våre kantede filer. Inne i js begynner vi å plassere to første filer kalt app.js og controller.js
Vi kan få alle nåværende versjoner av angularjs på denne lenken: https://code.angularjs.org/. For å bruke opplæringen bruker vi versjon 1.5.5 https://code.angularjs.org/1.5.5/
Index.html -kode
Dynamisk Ng -ruteApp.js -kode
angular.module ('routeapp', ['ngRoute', 'routeapp.controller']);Controller.js -kode
angular.module ('routeapp.controller', []) .controller ('MainController', funksjon () {console.log ('AngularJS');});Nå kjører vi dette på en webserver. Du kan bruke hva du vil, det være seg Apache, nginx, Tomcat, etc. I mitt tilfelle vil jeg bruke express fra nodejs. Hvis du også vil gjøre det med nodejs, kan du følge trinnene nedenfor. Hvis du aldri har brukt nodejs, kan du følge følgende opplæring der det forklares:
- Lag frontend -arkitektur med npm, bower og grunt.
Vi bruker følgende kommando i roten til prosjektet fra kommandolinjen.
npm ini
npm install --save-dev expressEtter ekspressinstallasjon vi lager en fil i roten til prosjektet som heter server.js og vi legger til følgende kode:
var express = require ('express'); var app = express (); var port = Number (prosess.env.PORT || 3000); app.use (express.static (__ dirname + '/ public')); app.listen (port, function () {console.log ('App startet på http: // localhost:' + port);});Nå utfører vi kommandoen:
node server.jsfor å starte webserveren.
Når du starter webserveren, må du kontrollere at elementets inspektørkonsoll i nettleseren din har skrevet ordet AngularJS.
La oss gjøre det nå bruk av ngRoute.
Bruke ruter
Vi vil bruke vinkelkonfigurasjonsfunksjon for å lage rutene for vår webapp.
.config (funksjon ($ routeProvider) {$ routeProvider .when ('/ home', {templateUrl: 'tpl/ home.html', kontroller: 'HomeController'}). ellers ({redirectTo: '/ home'}); }) App.js -kode- /hjem: URI for hjemmesiden vår.
- templateURL: banen til malen vår for hjemmet.
- kontroller: Kontrolleren tilordnet hjemmemalen.
- Ellers: Plasser nettstedet vårt i / home som standard
Inne i kroppen av index.html legger vi til en div -tag med attributtet ng-visning hvem som skal stå for gjengivelsen av home.html -malen og fremtidige maler som vi skal lage i opplæringen.
Informasjon om ngView:
Kode i index.html:
Vi legger til hjemmekontrolleren controller.js .controller ('HomeController', function () {console.log ('HomeController');})Hvis alt gikk riktig, bør du få noe som følgende bilde:
Dataens utholdenhet
Vi har allerede testet at rutetjenesten vår fungerer som den skal. Vi fortsetter med å lage en modul for å administrere brukere, i denne modulen kan vi opprette, liste, redigere og slette brukere. For opplæringen trenger vi ikke å kommunisere med en backend, som vi vil gjøre data -utholdenhet med en matrise, noe som betyr at disse dataene er midlertidige, og at hver gang vi oppdaterer programmet, vil dataene gå tapt.
Vi starter med å lage følgende filer services.js Y verdier.js inne i js -katalogen
angular.module ('routeapp.values', []) .value ('Users', []); Values.js -kode
angular.module ('routeapp.services', ['routeapp.values']) .factory ('Databases', ['Users', function (Users) {return {DataUser: {add: function (user) {Users.push (bruker);}, liste: 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 || "objekt"! = typeof obj) returner obj; var kopi = obj.constructor (); for (var attr i obj) {if (obj.hasOwnProperty (attr)) kopier [attr] = obj [ attr];} returnere kopi;}}}]); Services.js -kode
I services js lager vi to fabrikker kalt Databaser Y Nyttig.
- Databaser: Det vil ta vare på utholdenheten til brukerregistreringsdataene (ved å legge til, oppdatere, liste, få, ødelegge funksjoner).
- Nyttig: Det vil fungere som en kloner av dataene vi trenger når vi registrerer en bruker.
Vi injiserer servicemodulen til app.js
ruteapp. tjenesterKoden for den første linjen med app.js vil se slik ut:
angular.module ('routeapp', ['ngRoute', 'routeapp.controller', 'routeapp.services'])Nå trenger vi bare å lagre services.js og values.js -skriptene i index.html, plassere dem foran app.js -skriptet for å unngå ulemper ved utførelsen av programmet.
Før vi fortsetter, la oss teste at applikasjonen vår ikke presenterer feil i utviklingskonsollen. Slik har filene blitt opprettet så langt.
Vi fortsetter å lage malene for registrering og brukerliste. Vi lager innen tpl til user.html og user-list.html
Brukernavn Navn E -post LagreUser.html -kode
| Bruker | Navn | Post |
|---|---|---|
| {{item.username}} | {{gjenstandsnavn}} | {{item.email}} |
Innenfor controller.js vi legger til kontrolleren for user.html og user-list.html
.controller ('UserController', function ($ scope, Databases, Util) {$ scope.user = {}; $ scope.save = function () {var user = Util.clone ($ scope.user); Databases.DataUser .add (bruker); $ scope.user = {};};}) .controller ('UserListController', function ($ scope, Databases) {$ scope.dataUser = Databases.DataUser.list ();})Controller.js -kode
Legg til i index.html koblingene for å få tilgang til de to malene:
- Registrer bruker
- Rådfør deg med bruker
Vi trenger bare å legge til de nye rutene vi har opprettet i app.js -konfigurasjonen, plassere dem før ellers fungere:
.when (' / user', {templateUrl: 'tpl / user.html', controller: 'UserController'}) .when (' / user / list', {templateUrl: 'tpl / user-list.html', controller : 'UserListController'}) La oss se hvordan alt går så langt.
FORSTØRRE
Test ved å registrere flere brukere og bekreft at de registrerer seg riktig fra Rådfør deg med brukere.
Klar, nå fortsetter vi med oppdateringen og eliminering av brukere. For å oppdatere en bruker, legg bare til ny funksjonalitet i UserController, endrer vi den forrige koden for denne nye:
.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 = {};};}) Forklaring av den nye koden:- $ ruteParams: Denne tjenesten vil returnere GET -parametrene til applikasjonen vår, i dette tilfellet vil vi bruke den til å returnere ID -en til brukeren som vi skal oppdatere. $ routeParams.userID. Mer informasjon om $ routerParams https: //docs.angular … ce /$ routeParams
Vi må også legge til en ny bane i konfigurasjonen av app.js:
.when (' / user /: userID', {templateUrl: 'tpl / user.html', controller: 'UserController'})Det er viktig å plassere denne nye banen under banen ' / bruker / liste', slik at den vil presentere en konflikt med sistnevnte.
- ' / user /: userID': Som vi kan se, har denne URL -adressen noe spesielt som heter: userID, dette er parameteren som vi vil bruke i UserController.
Det gjenstår bare å legge til en ny kolonne i user-list.html hvor vi vil legge til en lenke for å redigere den registrerte brukeren.
Kode i user-list.htmlRedigere
Nå trenger vi bare å teste denne nye operasjonen, oppdatere programmet, registrere og deretter redigere brukeren.
Vi trenger bare å legge til funksjonaliteten for å slette brukere. Vi lager en ny mal i tpl som heter user-delete.html
Du vil fjerne {{user.name}}?Ta vekk User-delete.html-kode
Vi legger til en ny lenke i tabellen user-list.html for å få tilgang til malen user-delete.html
Vi legger til controller.js kontrolleren for user-delete.html kalt UserDeleteControllerTa vekk
.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');}}) Og vi legger til banen i konfigurasjonen av app.js
.when (' / user / delete /: userID', {templateUrl: 'tpl / user-delete.html', controller: 'UserDeleteController'})Vi oppdaterer programmet, registrerer og tester deretter operasjonen for å fjerne brukeren.
Vi har fullført vår basesøknad! Vi har allerede mestret opprettelsen av manuelle ruter i applikasjonen vår, men hvis vi ser nøye ut og ser hva rutene er bygget:
- /hjem
- / bruker
- / bruker / liste
- / user /: userID
- / user / delete /: userID
Hvordan lage dynamiske ruter
La oss se nærmere på våre nåværende ruter, for å lage en ny bruker bruker vi ruten / brukeren.
- For å spørre brukerne / brukeren / listen
- For å redigere det / user /: userID
- For å slette / bruker / slette /: userID.
Vi kan lage noen ruter der bare en, to eller tre parametere brukes, og disse fanger dem, bruker dem etter vår smak. Det ville se slik ut:
Vi må gjøre noe klart, for at dynamiske ruter skal fungere riktig, må vi følge følgende regler, for å forklare dem vil vi bruke det samme eksempelet på bruker:
1. Navnebrukeren skal brukes som både en mal og et kontroller -prefiks.
2. For spørringene som det andre prefikset i opplæringen bruker vi ordlisten, på samme måte kan du endre den til hva du vil, men ordet du bruker må ha det både i navnet på malen og i navnet av kontrolleren. Eks: user-list.html og UserListController; for delete: user-delete.html og UserDeleteController
3. For å identifisere prefikser i kontrollerne, bruker du store bokstaver.
4. Navn på kontrolleren må alltid ende med ordet Kontroller.
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: ''; returner 'tpl /' + uri.param1 + part_uri + '.html'; }}; $ routeProvider .when (' /: param1', rute) .when (' /: param1 /: param2', rute) .when (' /: param1 /: param2 /: param3', rute). ellers ({redirectTo: '/hjem'}); Kode i app.js
Vi lager tre banemønstre, så når du bare har en enkelt parameter vil det fungere for / bruker og / hjem. For to parametere / user /: userID og / user / list. For tre parametere / user / delete /: userID
Vi må også lage en ny kontroller som vil ha ansvaret for å veilede de forskjellige kontrollerne avhengig av URI.
.controller ('RouteController', funksjon ($ scope, $ routeParams, $ controller, $ filter) {var prefix = $ filter ('prefixController') ($ routeParams.param1) + '' + $ filter ('prefixController') ( $ routeParams.param2); $ controller (prefiks + 'Controller', {$ scope: $ scope});}) RouteController -kode
Denne kontrolleren er i sin tur avhengig av et filter, vi lager en ny fil i js -katalogen kalt filters.js
angular.module ('routeapp.filters', []) .filter ('prefixController', function () {return function (text) {if (typeof text === 'undefined') {return '';} var p_string = ny RegExp ('[az] + [0-9] *'); var p_int = ny RegExp ("[0-9] +"); if (p_int.test (tekst)) {return '';} annet hvis (p_string.test (tekst)) {return text.charAt (0) .toUpperCase () + ((text.length> 1)? text.slice (1): '');} else {return '';}};}); Filters.js -kode
Vi injiserer filteret i app.js
ruteapp.filtreVi importerer filters.js -skriptet til index.html plassert før app.js
Vi må endre en siste detalj i UserController Y UserDeleteController. Som nå bruker vi parametere: param1 ,: param2 ,: param3; parameteren: userID vil ikke lenger være tilgjengelig. Som vi må endre i kontrollerne. Bruk User2 for UserController, og for UserDeleteController param3
Kode UserController:
var userID = $ routeParams.param2;Kode UserDeleteController:
var userID = $ routeParams.param3;Vi har fullført vår dynamiske ruter. Nå trenger vi ikke lenger å bekymre oss for å lage nye ruter til siden vår siden alt er kontrollert av vår RouterController og den nye konfigurasjonen av $ routerProvider, kan du teste den ved å lage nye maler og tilordne ruter og kontrollere. Til slutt kan vi lage en ny mal som kan hjelpe oss å oppdage når vi prøver å få tilgang til en nettadresse som ikke finnes på nettstedet vårt. Vi kan bruke en 404 -mal. Vi skal lage den i tpl med navnet 404.html
Kode for 404.html
404Controller -kontroller
.controller ('404Controller', funksjon () {})Slik at vi kan oppdage når vi prøver å få tilgang til en utilgjengelig rute, kan vi bruke en angularjs lytter som tar seg av det. Vi erstatter koden til MainController av følgende:
.controller ('MainController', function ($ scope, $ location) {console.log ('AngularJS'); $ scope. $ on ('$ routeChangeError', function (next, current) {$ location.path ('/ 404 ');});}) Bare kjør programmet og legg inn en URL som ikke er tilgjengelig på nettstedet vårt, for eksempel http: // localhost: 300 … unknown-url. Søknaden omdirigeres umiddelbart til / 404
Du kan last ned denne opplæringsdemoen her:
ruteapp.zip 344,9K 259 Nedlastinger
