BilješkaZa izvođenje ovog vodiča poželjno je imati jasnu osnovu AngularJS, budući da nećemo ulaziti u detalje o nekim tehničkim aspektima ove tehnologije.
Dok znamo, AngularJS Omogućuje nam veliki broj modula, usluga i filtera koji su korisni pri izradi web ili mobilne aplikacije za danas. Postoje drugi moduli koje ne možemo pronaći u jezgri ovog okvira, jedan od njih je ngRoute. Ovaj modul ima funkciju korištenja prijateljskih URL -ova dodjeljujući mu kontroler i predložak koji se automatski poziva putem Ajaxa.
Više informacija o ngRoute:
Korištenje ngRoute
Prvo kreiramo naš direktorij projekta, nazvat ćemo ga routeapp, unutar ovog direktorija stvaramo drugi koji se zove javni, u javnosti stvaramo datoteku index.html. Sada unutar javnosti stvaramo direktorij zvan js u koji ćemo smjestiti naše kutne datoteke. Unutar js počinjemo postavljati dvije prve datoteke pod nazivom app.js i controller.js
Sve trenutne verzije angularjsa možemo dobiti na ovoj poveznici: https://code.angularjs.org/. Za korištenje vodiča koristit ćemo verziju 1.5.5 https://code.angularjs.org/1.5.5/
Index.html kôd
Dinamička ruta NgApp.js kôd
angular.module ('routeapp', ['ngRoute', 'routeapp.controller']);Controller.js kod
angular.module ('routeapp.controller', []) .controller ('MainController', funkcija () {console.log ('AngularJS');});Sada ovo pokrećemo na web poslužitelju. Možete koristiti što god želite, bilo da je to Apache, nginx, Tomcat itd. Za moj slučaj koristit ću express iz nodejsa. Ako to želite učiniti i s nodejsom, možete slijediti sljedeće korake. Ako nikada niste koristili nodejs, možete slijediti sljedeći vodič u kojem je objašnjeno:
- Izradite frontend arhitekturu s npm, bower i grunt.
Koristimo sljedeću naredbu u korijenu projekta iz naredbenog retka.
npm ini
npm install --save-dev expressNakon što ekspresna instalacija stvaramo datoteku u korijenu projekta pod nazivom server.js i dodajemo sljedeći kôd:
var express = require ('express'); var app = express (); var port = Broj (process.env.PORT || 3000); app.use (express.static (__ dirname + '/ javno')); app.listen (port, function () {console.log ('Aplikacija je pokrenuta na http: // localhost:' + port);});Sada izvršavamo naredbu:
čvor server.jsza pokretanje web poslužitelja.
Prilikom pokretanja web poslužitelja provjerite je li konzola za pregled elemenata preglednika upisala riječ AngularJS.
Sada učinimo to korištenje ngRoute.
Korištenje ruta
Koristit ćemo funkcija kutne konfiguracije za stvaranje ruta našeg webappa.
.config (funkcija ($ routeProvider) {$ routeProvider .when ('/ home', {templateUrl: 'tpl/ home.html', kontroler: 'HomeController'}). inače ({redirectTo: '/ home'})); }) App.js kôd- /Dom: URI za našu početnu stranicu.
- templateURL: put našeg predloška za dom.
- kontroler: Kontroler dodijeljen za kućni predložak.
- Inače: Prema zadanim postavkama postavite našu web lokaciju u / home
Unutar tijela index.html dodajemo div oznaku s atributom ng-view koji će biti zadužen za iscrtavanje predloška home.html i budućih predložaka koje ćemo stvoriti u vodiču.
Informacije o ngView:
Kôd u index.html:
Dodamo kućni kontroler u controller.js .controller ('HomeController', function () {console.log ('HomeController');})Ako je sve prošlo kako treba, trebali biste dobiti nešto poput sljedeće slike:
Postojanost podataka
Već smo testirali da naša usluga rute radi ispravno, nastavljamo sa stvaranjem modula za upravljanje korisnicima, u ovom modulu možemo stvarati, popisati, uređivati i brisati korisnike. Za vodič ne moramo komunicirati s pozadinom, koja učinit ćemo postojanost podataka s nizom, što znači da su ti podaci privremeni i da će se svaki put kad osvježimo aplikaciju navedeni podaci izgubiti.
Počinjemo stvaranjem sljedećih datoteka services.js Y vrijednosti.js unutar js direktorija
angular.module ('routeapp.values', []) .value ('Korisnici', []); Kod Values.js
angular.module ('routeapp.services', ['routeapp.values']) .factory ('Baze podataka', ['Korisnici', funkcija (Korisnici) {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];} , delete: function (index) {return Users.splice (index, 1);}}};}]) .factory ('Util', [function () {return {clone: function (obj) {if ( null = = obj || "objekt"! = typeobj) return obj; var copy = obj.constructor (); for (var attr in obj) {if (obj.hasOwnProperty (attr)) copy [attr] = obj [ attr];} vrati kopiju;}}}]); Services.js kôd
U uslugama js stvaramo dvije tvornice tzv Baze podataka Y Koristan.
- Baze podataka: Pobrinut će se za postojanost podataka zapisa korisnika (pomoću funkcija dodavanja, ažuriranja, popisa, dobivanja, uništavanja).
- Koristan: Služit će kao kloniranje podataka koji će nam biti potrebni pri registraciji korisnika.
Ubacujemo modul usluga u naš app.js
routeapp.uslugeKod za prvi redak app.js izgledao bi ovako:
angular.module ('routeapp', ['ngRoute', 'routeapp.controller', 'routeapp.services'])Sada moramo samo spremiti skripte services.js i values.js u index.html, postaviti ih ispred skripte app.js kako bismo izbjegli bilo kakve neugodnosti u izvršavanju aplikacije.
Prije nego nastavimo, provjerimo da li naša aplikacija ne prikazuje pogreške u razvojnoj konzoli. Ovako su datoteke dosad nastajale.
Nastavljamo s stvaranjem predložaka za registraciju i popis korisnika. Mi stvaramo unutar tpl-a na user.html i user-list.html
Korisničko ime Ime Email SpremiUser.html kôd
| Korisnik | Ime | Pošta |
|---|---|---|
| {{item.username}} | {{ime proizvoda}} | {{item.email}} |
Unutar controller.js dodajemo kontroler za user.html i user-list.html
.controller ('UserController', funkcija ($ scope, baze podataka, uslužni program) {$ scope.user = {}; $ scope.save = function () {var user = Util.clone ($ scope.user); Databases.DataUser .add (korisnik); $ scope.user = {};};}) .controller ('UserListController', funkcija ($ scope, baze podataka) {$ scope.dataUser = Databases.DataUser.list ();})Controller.js kod
Dodajte index.html veze za pristup dvama predlošcima:
- Registracija korisnika
- Posavjetujte se s korisnikom
Trebamo samo dodati nove rute koje smo stvorili u konfiguraciju app.js, postaviti ih ispred inače funkcioniraju:
.when (' / user', {templateUrl: 'tpl / user.html', controller: 'UserController'}) .when (' / user / list', {templateUrl: 'tpl / user-list.html', kontroler : 'UserListController'}) Da vidimo kako sve ide do sada.
POVEĆAJTE
Testirajte tako da registrirate više korisnika i provjerite da li se ispravno registriraju od Posavjetujte se s korisnicima.
Spremno, sada nastavljamo s ažuriranjem i uklanjanjem korisnika. Za ažuriranje korisnika samo dodajte novu funkciju UserController, mijenjamo prethodni kôd za ovaj novi:
.controller ('UserController', funkcija ($ 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. ažuriranje (userID, korisnik); $ location.path (' / user / list');} else {Databases.DataUser.add (user);} $ scope.user = {};};}) Objašnjenje novog koda:- $ routeParams: Ova usluga će vratiti GET parametre naše aplikacije, u ovom slučaju ćemo je koristiti za vraćanje ID -a korisnika kojeg ćemo ažurirati. $ routeParams.userID. Više informacija o $ routerParams https: //docs.angular … ce /$ routeParams
Također moramo dodati novi put u konfiguraciju app.js:
.when (' / user /: userID', {templateUrl: 'tpl / user.html', kontroler: 'UserController'})Važno je postaviti ovaj novi put pod put ' / user / list', tako da će nam predstaviti sukob s ovim spomenutim.
- ' / user /: userID': Kao što vidimo, ovaj URL ima nešto posebno što se zove: userID, ovo je parametar koji ćemo koristiti u UserController -u.
Ostaje samo dodati novi stupac u user-list.html gdje ćemo dodati vezu za uređivanje registriranog korisnika.
Kôd u user-list.htmlUredi
Sada moramo samo testirati ovu novu operaciju, osvježiti aplikaciju, registrirati se i zatim urediti korisnika.
Moramo samo dodati funkcionalnost za brisanje korisnika. Izrađujemo novi predložak u tpl-u pod nazivom user-delete.html
Želite ukloniti {{Korisničko ime}}?Ukloniti Korisnički-delete.html kôd
Dodajemo novu vezu u tablicu user-list.html za pristup predlošku user-delete.html
Dodamo u controller.js kontroler za user-delete.html pod nazivom UserDeleteControllerUkloniti
.controller ('UserDeleteController', funkcija ($ scope, baze podataka, $ routeParams, $ location) {var userID = $ routeParams.userID; $ scope.user = Databases.DataUser.get (userID); $ scope.destroy = function ( ) {Databases.DataUser.destroy (userID); $ location.path (' / user / list');}}) I dodajemo put u konfiguraciju app.js
.when (' / user / delete /: userID', {templateUrl: 'tpl / user-delete.html', kontroler: 'UserDeleteController'})Osvježavamo aplikaciju, registriramo se i zatim testiramo operaciju uklanjanja korisnika.
Završili smo našu osnovnu aplikaciju! U našoj smo aplikaciji već savladali stvaranje ručnih ruta, no ako pomno pogledamo i vidimo koje su rute izgrađene:
- /Dom
- / korisnika
- / korisnik / popis
- / user /: korisnički ID
- / user / delete /: userID
Kako stvoriti dinamičke rute
Pogledajmo izbliza naše trenutne rute, za stvaranje novog korisnika koristimo rutu / korisnika.
- Za postavljanje upita korisnicima / korisniku / popisu
- Za uređivanje / user /: userID
- Za brisanje / user / delete /: userID.
Možemo stvoriti neke rute gdje se koriste samo jedan, dva ili tri parametra i oni ih hvataju, koristimo ih po vlastitom ukusu. To bi izgledalo ovako:
Moramo nešto pojasniti, da bi dinamičke rute radile ispravno, moramo se pridržavati sljedećih pravila, da bismo ih objasnili, koristit ćemo isti primjer korisnika:
1. Ime korisnika treba koristiti i kao predložak i kao prefiks kontrolera.
2. Za upite kao drugi prefiks u vodiču koristimo popis riječi, na isti način možete ga promijeniti u što god želite, ali riječ koju koristite mora je imati i u nazivu predloška i u imenu upravljača. Primjer: user-list.html i UserListController; za brisanje: user-delete.html i UserDeleteController
3. Da biste identificirali prefikse u kontrolerima, koristite velika slova.
4. Nazivi kontrolera uvijek moraju završavati riječju Kontroler.
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: ''; return 'tpl /' + uri.param1 + part_uri + '.html'; }}; $ routeProvider .when (' /: param1', route) .when (' /: param1 /: param2', route) .when (' /: param1 /: param2 /: param3', route) .na drugi način ({redirectTo: '/Dom'}); Kôd u app.js
Mi stvaramo tri obrasca puta, pa kad imate samo jedan parametar, on bi radio za / korisnika i / dom. Za dva parametra / korisnik /: korisnički ID i / korisnik / popis. Za tri parametra / user / delete /: userID
Također moramo stvoriti novi kontroler koji će biti zadužen za vođenje različitih kontrolera ovisno o URI -u.
.controller ('RouteController', funkcija ($ scope, $ routeParams, $ controller, $ filter) {var prefix = $ filter ('prefixController') ($ routeParams.param1) + '' + $ filter ('prefixController') ( $ routeParams.param2); $ controller (prefiks + 'Controller', {$ scope: $ scope});}) Kod RouteControllera
Ovaj kontroler pak ovisi o filteru, stvaramo novu datoteku u js direktoriju pod nazivom filters.js
angular.module ('routeapp.filters', []) .filter ('prefixController', function () {return function (text) {if (typeof text === 'undefined') {return '';} var p_string = novi RegExp ('[az] + [0-9] *'); var p_int = novi 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 '';}};}); Kod Filters.js
Ubrizgavamo filtar u app.js
routeapp.filteriUvozimo skriptu filters.js u index.html postavljen prije app.js
Moramo promijeniti posljednji detalj UserController Y UserDeleteController. Kao i sada koristimo parametre: param1 ,: param2 ,: param3; parametar: userID više neće biti dostupan. Što moramo promijeniti u kontrolerima. Za UserController koristite param2, a za UserDeleteController param3
Kodirati UserController:
var userID = $ routeParams.param2;Kodirati UserDeleteController:
var userID = $ routeParams.param3;Završili smo naš dinamički usmjerivač. Sada više ne moramo brinuti o stvaranju novih ruta do naše web stranice jer sve kontroliramo mi RouterController i novu konfiguraciju $ routerProvider, možete je testirati stvaranjem novih predložaka i dodjeljivanjem njezinih ruta i kontrolera. Konačno, možemo stvoriti novi predložak koji nam može pomoći u otkrivanju pokušaja pristupa URL -u koji se ne nalazi na našoj web stranici. Možemo koristiti predložak 404. Izradit ćemo ga u tpl -u s imenom 404.html
Kôd za 404.html
404 Kontroler kontrolera
.controller ('404Controller', function () {})Da bismo mogli otkriti kada pokušavamo pristupiti nedostupnoj ruti, možemo koristiti a angularjs slušatelj tko se za to brine. Zamjenjujemo kod MainController sljedećim:
.controller ('MainController', funkcija ($ opseg, $ lokacija) {console.log ('AngularJS'); $ opseg. $ on ('$ routeChangeError', funkcija (sljedeća, trenutna) {$ location.path ('/ 404 ');});}) Samo pokrenite aplikaciju i stavite URL koji nije dostupan na našoj web stranici, na primjer http: // localhost: 300… unknown-url. Aplikacija će se odmah preusmjeriti na / 404
Možeš preuzmite ovaj demo vodič ovdje:
routeapp.zip 344.9K 259 preuzimanja
