BemærkFor at udføre denne vejledning er det tilrådeligt at have et klart grundlag på VinkelJS, da vi ikke vil gå i detaljer om nogle tekniske aspekter af denne teknologi.
Mens vi ved, VinkelJS Det giver os et stort antal moduler, tjenester og filtre, der er nyttige, når vi opretter en web- eller mobilapplikation for i dag. Der er andre moduler, som vi ikke kan finde i kernen i denne ramme, et af disse er ngRoute. Dette modul har funktionen til at bruge venlige URL'er ved at tildele det en controller og en skabelon, der automatisk kaldes via Ajax.
Flere oplysninger om ngRoute:
Brug af ngRoute
Først opretter vi vores projektmappe, vi vil kalde det routeapp, inden for dette bibliotek opretter vi et andet kaldet offentligt, offentligt opretter vi en index.html -fil. Nu inde i offentligheden opretter vi et bibliotek kaldet js, hvor vi skal placere vores kantede filer. Inde i js begynder vi at placere to første filer kaldet app.js og controller.js
Vi kan få alle aktuelle versioner af angularjs på dette link: https://code.angularjs.org/. For at bruge selvstudiet vil vi bruge version 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', funktion () {console.log ('AngularJS');});Nu kører vi dette på en webserver. Du kan bruge hvad du vil, det være sig Apache, nginx, Tomcat osv. I mit tilfælde vil jeg bruge express fra nodejs. Hvis du også vil gøre det med nodejs, kan du følge følgende trin. Hvis du aldrig har brugt nodejs, kan du følge følgende tutorial, hvor det forklares:
- Opret frontend -arkitektur med npm, bower og grynt.
Vi bruger følgende kommando i roden af projektet fra kommandolinjen.
npm ini
npm install --save-dev expressEfter hurtig installation vi opretter en fil i roden af projektet kaldet server.js og vi tilføjer følgende kode:
var express = require ('express'); var app = express (); var port = Antal (proces.env.PORT || 3000); app.use (express.static (__ dirname + '/ public')); app.listen (port, funktion () {console.log ('App startede på http: // localhost:' + port);});Nu udfører vi kommandoen:
node server.jsfor at starte webserveren.
Når du starter webserveren, skal du kontrollere, at din browsers elementinspektørkonsol har indtastet ordet VinkelJS.
Lad os nu gøre det brug af ngRoute.
Brug af ruter
Vi vil bruge kantet konfigurationsfunktion at oprette ruterne for vores webapp.
.config (funktion ($ routeProvider) {$ routeProvider .when ('/ home', {templateUrl: 'tpl/ home.html', controller: 'HomeController'}). ellers ({redirectTo: '/ home'}); }) App.js -kode- /hjem: URI til vores hjemmeside.
- templateURL: stien til vores skabelon til hjemmet.
- controller: Den controller, der er tildelt hjemmeskabelonen.
- Ellers: Placer vores websted som standard i / home
Inde i indeksteksten.html tilføjer vi et div -tag med attributten ng-visning hvem skal stå for gengivelsen af home.html -skabelonen og de fremtidige skabeloner, som vi skal oprette i selvstudiet.
Information om ngView:
Kode i index.html:
Vi tilføjer hjemmecontrolleren ind controller.js .controller ('HomeController', funktion () {console.log ('HomeController');})Hvis alt gik korrekt, skulle du få noget som følgende billede:
Dataens vedholdenhed
Vi har allerede testet, at vores rutetjeneste fungerer korrekt, vi fortsætter med at oprette et modul til at styre brugere, i dette modul kan vi oprette, liste, redigere og slette brugere. Til selvstudiet behøver vi ikke kommunikere med en backend, som vi vil gøre data persistens med en matrix, hvilket betyder, at disse data er midlertidige, og at hver gang vi opdaterer applikationen, vil disse data gå tabt.
Vi starter med at oprette følgende filer services.js Y værdier.js inde i js bibliotek
angular.module ('routeapp.values', []) .value ('Brugere', []); Values.js -kode
angular.module ('routeapp.services', ['routeapp.values']) .factory ('Databases', ['Users', function (Users) {return {DataUser: {add: function (user) {Users.push (bruger);}, liste: funktion () {return brugere;}, opdatering: funktion (indeks, bruger) {return brugere [indeks] = bruger;}, get: funktion (indeks) {return brugere [indeks];} , destroy: function (index) {return Users.splice (index, 1);}}};}]) .factory ('Util', [function () {return {clone: function (obj) {if ( null = = obj || "objekt"! = typeof obj) return obj; var copy = obj.constructor (); for (var attr in obj) {if (obj.hasOwnProperty (attr)) copy [attr] = obj [ attr];} returnere kopi;}}}]); Services.js -kode
I services js opretter vi to fabrikker kaldet Databaser Y Nyttig.
- Databaser: Det vil tage sig af vedholdenheden af brugerregistreringsdataene (ved hjælp af tilføj, opdater, liste, hent, ødelæg funktioner).
- Nyttig: Det vil tjene som en kloner af de data, vi har brug for, når vi registrerer en bruger.
Vi injicerer servicemodulet til vores app.js
ruteapp.tjenesterKoden for den første linje af app.js ville se sådan ud:
angular.module ('routeapp', ['ngRoute', 'routeapp.controller', 'routeapp.services'])Nu skal vi kun gemme services.js og values.js scripts i index.html, placere dem før app.js scriptet for at undgå enhver form for ulempe ved udførelsen af applikationen.
Inden vi fortsætter, lad os teste, at vores applikation ikke præsenterer fejl i udviklingskonsollen. Sådan er filerne blevet oprettet indtil nu.
Vi fortsætter med at oprette skabeloner til registrering og brugerliste. Vi opretter inden for tpl til user.html og user-list.html
Brugernavn Navn E -mail GemUser.html -kode
| Bruger | Navn | Post |
|---|---|---|
| {{item.username}} | {{tingens navn}} | {{item.email}} |
Inden for controller.js vi tilføjer controlleren til user.html og user-list.html
.controller ('UserController', funktion ($ scope, Databases, Util) {$ scope.user = {}; $ scope.save = function () {var user = Util.clone ($ scope.user); Databases.DataUser .add (bruger); $ scope.user = {};};}) .controller ('UserListController', function ($ scope, Databases) {$ scope.dataUser = Databases.DataUser.list ();})Controller.js -kode
Tilføj i index.html linkene for at få adgang til de to skabeloner:
- Registrer bruger
- Kontakt bruger
Vi behøver kun at tilføje de nye ruter, vi har oprettet til app.js -konfigurationen, placere dem før ellers fungere:
.when (' / user', {templateUrl: 'tpl / user.html', controller: 'UserController'}) .when (' / user / list', {templateUrl: 'tpl / user-list.html', controller : 'UserListController'}) Lad os se, hvordan alt går så langt.
FORSTØRRE
Test ved at registrere flere brugere og kontrollere, at de registrerer korrekt fra Kontakt brugere.
Klar, nu fortsætter vi med opdateringen og fjernelsen af brugere. For at opdatere en bruger skal du bare tilføje ny funktionalitet til UserController, ændrer vi den tidligere kode for denne nye:
.controller ('UserController', funktion ($ scope, Databaser, Util, $ routeParams, $ location) {var userID = $ routeParams.userID; var isEdit = (userID! = undefined); $ scope.user = {}; hvis (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 af den nye kode:- $ ruteParams: Denne service returnerer GET -parametrene for vores applikation, i dette tilfælde vil vi bruge den til at returnere ID'et for den bruger, som vi vil opdatere. $ routeParams.userID. Flere oplysninger om $ routerParams https: //docs.angular … ce /$ routeParams
Vi skal også tilføje en ny sti i konfigurationen af app.js:
.when (' / user /: userID', {templateUrl: 'tpl / user.html', controller: 'UserController'})Det er vigtigt at placere denne nye sti under stien ' / bruger / liste', så den vil præsentere os for en konflikt med sidstnævnte.
- ' / user /: userID': Som vi kan se, har denne URL noget særligt kaldet: userID, dette er den parameter, som vi vil bruge i UserController.
Det er kun tilbage at tilføje en ny kolonne i user-list.html, hvor vi tilføjer et link til redigering af den registrerede bruger.
Kode i user-list.htmlRedigere
Nu mangler vi kun at teste denne nye operation, opdatere applikationen, registrere og derefter redigere brugeren.
Vi behøver kun at tilføje funktionaliteten for at slette brugere. Vi opretter en ny skabelon i tpl kaldet user-delete.html
Du vil fjerne {{user.name}}?Fjerne Bruger-delete.html-kode
Vi tilføjer et nyt link i tabellen user-list.html for at få adgang til bruger-delete.html-skabelonen
Vi tilføjer controller.js controlleren til user-delete.html kaldet UserDeleteControllerFjerne
.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 tilføjer stien i konfigurationen af app.js
.when (' / user / delete /: userID', {templateUrl: 'tpl / user-delete.html', controller: 'UserDeleteController'})Vi opdaterer applikationen, registrerer og tester derefter fjernelsen af brugeren.
Vi er færdige med vores grundansøgning! Vi har allerede mestret oprettelsen af manuelle ruter i vores applikation, men hvis vi ser nøje og ser, hvad ruterne er bygget:
- /hjem
- / bruger
- / bruger / liste
- / user /: userID
- / user / delete /: userID
Sådan oprettes dynamiske ruter
Lad os se nærmere på vores nuværende ruter, for at oprette en ny bruger bruger vi ruten / brugeren.
- Forespørgsel på brugerne / brugeren / listen
- For at redigere det / user /: userID
- For at slette / user / delete /: userID.
Vi kan oprette nogle ruter, hvor der kun bruges en, to eller tre parametre, og disse fanger dem, bruger dem til vores smag. Det ville se sådan ud:
Vi skal gøre noget klart, for at dynamiske ruter fungerer korrekt, skal vi følge følgende regler, for at forklare dem vil vi bruge det samme eksempel på bruger:
1. Navnebrugeren skal bruges som både en skabelon og controller -præfiks.
2. Til forespørgslerne som det andet præfiks i selvstudiet bruger vi ordlisten, på samme måde kan du ændre det til hvad du vil, men det ord du bruger skal have det både i skabelonens navn og i navnet af controlleren. Eks: user-list.html og UserListController; til sletning: user-delete.html og UserDeleteController
3. For at identificere præfikserne i controllerne skal du bruge store bogstaver.
4. Controller navne skal altid slutte med ordet Controller.
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 opretter tre sti -mønstre, så når du kun har en enkelt parameter, fungerer det for / bruger og / hjem. For to parametre / user /: userID og / user / list. For tre parametre / user / delete /: userID
Vi er også nødt til at oprette en ny controller, der har ansvaret for at guide de forskellige controllere afhængigt af URI.
.controller ('RouteController', funktion ($ scope, $ routeParams, $ controller, $ filter) {var prefix = $ filter ('prefixController') ($ routeParams.param1) + '' + $ filter ('prefixController') ( $ routeParams.param2); $ controller (præfiks + 'Controller', {$ scope: $ scope});}) RouteController -kode
Denne controller afhænger igen af et filter, vi opretter en ny fil i js -biblioteket kaldet 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 '';} ellers hvis (p_string.test (tekst)) {return text.charAt (0) .toUpperCase () + ((text.length> 1)? text.slice (1): '');} else {return '';}};}); Filters.js -kode
Vi injicerer filteret i app.js
ruteapp.filtreVi importerer filters.js -scriptet til index.html placeret før app.js
Vi skal ændre en sidste detalje i UserController Y UserDeleteController. Som nu bruger vi parametre: param1 ,: param2 ,: param3; parameteren: userID vil ikke længere være tilgængelig. Som vi skal ændre i controllerne. Til UserController skal du bruge param2 og til UserDeleteController param3
Kode UserController:
var userID = $ routeParams.param2;Kode UserDeleteController:
var userID = $ routeParams.param3;Vi har afsluttet vores dynamiske router. Nu skal vi ikke længere bekymre os om at oprette nye ruter til vores websted, da alt styres af vores RouterController og den nye konfiguration af $ routerProvider, kan du teste det ved at oprette nye skabeloner og tildele dets ruter og controllere. Endelig kan vi oprette en ny skabelon, der kan hjælpe os med at opdage, når vi prøver at få adgang til en url, der ikke findes på vores websted. Vi kan bruge en skabelon 404. Vi skal oprette den i tpl med navnet 404.html
Kode til 404.html
404Controller controller
.controller ('404Controller', funktion () {})Så vi kan opdage, når vi prøver at få adgang til en utilgængelig rute, vi kan bruge en angularjs lytter hvem tager sig af det. Vi erstatter koden til MainController af følgende:
.controller ('MainController', funktion ($ scope, $ location) {console.log ('AngularJS'); $ scope. $ on ('$ routeChangeError', function (next, current) {$ location.path ('/ 404 ');});}) Bare kør applikationen, og angiv en URL, der ikke er tilgængelig på vores websted, f.eks. Http: // localhost: 300… unknown-url. Ansøgningen omdirigerer straks til / 404
Du kan download denne tutorial demo her:
ruteapp.zip 344,9K 259 Downloads
