PastabaNorint atlikti šią pamoką, patartina turėti aiškų pagrindą KampinisJS, nes mes nesigilinsime į kai kuriuos šios technologijos techninius aspektus.
Kol žinome, KampinisJS Tai suteikia mums daugybę modulių, paslaugų ir filtrų, kurie praverčia kuriant žiniatinklio ar mobiliosios programos šiandieną. Yra ir kitų modulių, kurių negalime rasti šios sistemos pagrindu, vienas iš jų yra „ngRoute“. Šio modulio funkcija yra naudoti draugiškus URL, priskiriant jam valdiklį ir šabloną, kuris automatiškai iškviečiamas per „Ajax“.
Daugiau informacijos apie „ngRoute“:
Naudojant „ngRoute“
Pirmiausia sukuriame savo projektų katalogą, pavadinsime jį „routeapp“, šiame kataloge sukuriame kitą pavadinimą „public“, viešai sukuriame failą index.html. Dabar viešumoje sukuriame katalogą, vadinamą js, kur ketiname patalpinti kampinius failus. Js viduje pradedame dėti du pirmuosius failus, vadinamus app.js ir controller.js
Visas dabartines angularjs versijas galime rasti šioje nuorodoje: https://code.angularjs.org/. Norėdami naudotis pamoka, naudosime 1.5.5 versiją https://code.angularjs.org/1.5.5/
Index.html kodas
Dinaminis Ng maršrutas„App.js“ kodas
angular.module ('routeapp', ['ngRoute', 'routeapp.controller']);„Controller.js“ kodas
angular.module ('routeapp.controller', []) .controller ('MainController', function () {console.log ('AngularJS';});Dabar tai vykdome žiniatinklio serveryje. Galite naudoti viską, kas jums patinka, ar tai būtų „Apache“, „nginx“, „Tomcat“ ir kt. Mano atveju naudosiu „express“ iš „nodejs“. Jei taip pat norite tai padaryti naudodami „nodejs“, galite atlikti šiuos veiksmus. Jei niekada nenaudojote „nodejs“, galite sekti šią pamoką, kurioje paaiškinta:
- Sukurkite „frontend“ architektūrą naudodami „npm“, „bower“ ir „grunt“.
Mes naudojame šią komandą projekto šaknyje iš komandinės eilutės.
npm ini
npm įdiegti --save-dev expressPo to, kai greitas diegimas mes sukuriame failą projekto šaknyje, pavadinimu server.js ir pridedame šį kodą:
var express = reikalauti ('express'); var app = express (); var port = skaičius (process.env.PORT || 3000); app.use (express.static (__ dirname + '/ public')); app.listen (prievadas, funkcija () {console.log ('Programa paleista adresu http: // localhost:' + uostas);});Dabar vykdome komandą:
mazgas serveris.jsnorėdami paleisti žiniatinklio serverį.
Kai paleisite žiniatinklio serverį, patikrinkite, ar jūsų naršyklės elementų tikrinimo pultas įvedė žodį KampinisJS.
Dabar darykime ngRoute naudojimas.
Naudojant maršrutus
Mes naudosime kampinė konfigūracijos funkcija sukurti mūsų žiniatinklio programos maršrutus.
.config (funkcija ($ routeProvider) {$ routeProvider .when ('/ home', {templateUrl: 'tpl/ home.html', controller: 'HomeController'}). kitaip ({redirectTo: '/ home'}); }) „App.js“ kodas- /namai: mūsų pagrindinio puslapio URI.
- templateURL: mūsų namų šablono kelias.
- valdiklis: Namų šablonui priskirtas valdiklis.
- Priešingu atveju: Pagal numatytuosius nustatymus įdėkite mūsų svetainę į / namus
Index.html turinio viduje pridedame div žymą su atributu ng-vaizdas kas bus atsakingas už šablono „home.html“ ir būsimų šablonų, kuriuos ketiname sukurti mokymo programoje, pateikimą.
Informacija apie „ngView“:
Kodas index.html:
Pridedame namų valdiklį valdiklis.js .controller ('HomeController', function () {console.log ('HomeController');})Jei viskas klostėsi teisingai, turėtumėte gauti tokį vaizdą:
Duomenų patvarumas
Mes jau išbandėme, ar mūsų maršruto paslauga veikia tinkamai, ir toliau kuriame modulį vartotojams valdyti, šiame modulyje galime kurti, sąrašuoti, redaguoti ir ištrinti vartotojus. Pamokoje mums nereikia bendrauti su užpakaline dalimi atliksime duomenų atkaklumą naudodami masyvą, o tai reiškia, kad šie duomenys yra laikini ir kad kiekvieną kartą atnaujinus programą minėti duomenys bus prarasti.
Mes pradedame kurti šiuos failus services.js Y vertės.js js katalogo viduje
angular.module ('routeapp.values', []) .value ('Vartotojai', []); „Values.js“ kodas
angular.module ('routeapp.services', ['routeapp.values']) .factory ('Duomenų bazės', ['Vartotojai', funkcija (Vartotojai) {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];} , sunaikinti: funkcija (indeksas) {return Users.splice (indeksas, 1);}}};}])) .factory ('Util', [function () {return {clone: function (obj) {if ( null = = obj || "objektas"! = typeof obj) return obj; var copy = obj.constructor (); for (var attr in obj) {if (obj.hasOwnProperty (attr)) copy [attr] = obj [ attr];} grąžinti kopiją;}}}]); Services.js kodas
Paslaugose js sukuriame dvi gamyklas, vadinamas Duomenų bazės Y Naudinga.
- Duomenų bazės: Ji pasirūpins, kad vartotojas įrašytų duomenis (naudojant pridėjimo, atnaujinimo, sąrašo, gavimo, sunaikinimo funkcijas).
- Naudinga: Tai bus duomenų, kurių mums reikės registruojant vartotoją, klonuotojas.
Mes įvedame paslaugų modulį į savo app.js
routeapp.paslaugosPirmosios „app.js“ eilutės kodas atrodytų taip:
angular.module ('routeapp', ['ngRoute', 'routeapp.controller', 'routeapp.services'])Dabar mums tereikia išsaugoti scenarijus services.js ir values.js į index.html, įdėti juos prieš scenarijų app.js, kad būtų išvengta bet kokių nepatogumų vykdant programą.
Prieš tęsdami, išbandykime, ar mūsų programoje nėra klaidų kūrimo pulte. Taip failai buvo sukurti iki šiol.
Mes ir toliau kuriame registracijos šablonus ir vartotojų sąrašą. Kuriame per tpl į user.html ir user-list.html
Vartotojo vardas Vardas El. Paštas IšsaugotiUser.html kodas
| Vartotojas | vardas | Paštas |
|---|---|---|
| {{item.username}} | {{daikto pavadinimas}} | {{item.email}} |
Viduje valdiklis.js pridedame valdiklį user.html ir user-list.html
.controller ('UserController', funkcija ($ ulatis, Duomenų bazės, Util)) .add (vartotojas); $ ulatis.user = {};};}) .controller ('UserListController', funkcija ($ apimtis, duomenų bazės) {$ ulatumas.dataUser = Databases.DataUser.list ();})„Controller.js“ kodas
Pridėkite index.html nuorodas, kad galėtumėte pasiekti du šablonus:
- Registruoti vartotoją
- Pasikonsultuokite su vartotoju
Mums tereikia pridėti naujus mūsų sukurtus maršrutus prie „app.js“ konfigūracijos, įdėti juos prieš kitaip funkcija:
.when (' / user', {templateUrl: 'tpl / user.html', controller: 'UserController'}) .when (' / user / list', {templateUrl: 'tpl / user-list.html', valdiklis : 'UserListController'}) Pažiūrėkime, kaip viskas vyksta iki šiol.
DIDELIS
Patikrinkite užregistruodami kelis vartotojus ir patikrinkite, ar jie teisingai registruojasi iš Pasitarkite su vartotojais.
Pasiruošę, dabar tęsiame vartotojų atnaujinimą ir pašalinimą. Norėdami atnaujinti vartotoją, tiesiog pridėkite naujų funkcijų „UserController“, mes pakeičiame ankstesnį šio naujo kodą:
.controller ('UserController', funkcija ($ ulatis, duomenų bazės, Util, $ routeParams, $ vieta) {var userID = $ routeParams.userID; var isEdit = (vartotojo ID! = neapibrėžta); $ ulatis.user = {}; jei (isEdit) {$ scope.user = Databases.DataUser.get (userID);} $ ulatis.save = funkcija () {var vartotojas = Util.klonas ($ apimtis.user); if (isEdit) {Databases.DataUser. atnaujinimas (vartotojo ID, vartotojas); $ location.path (' / user / list');} else {Databases.DataUser.add (user);} $ ulatis.user = {};};}) Naujo kodo paaiškinimas:- $ routeParams: Ši paslauga grąžins mūsų programos GET parametrus, šiuo atveju naudosime ją norėdami atnaujinti vartotojo ID. $ routeParams.userID. Daugiau informacijos apie $ routerParams https: //docs.angular … ce /$ routeParams
Taip pat turime pridėti naują kelią į app.js konfigūraciją:
.when (' / user /: userID', {templateUrl: 'tpl / user.html', controller: 'UserController'})Svarbu šį naują kelią patalpinti po keliu „ / user / list“, kad jis mums prieštarautų minėtam.
- ' / user /: userID': Kaip matome, šis URL turi ypatingą pavadinimą: userID, tai yra parametras, kurį naudosime „UserController“.
Belieka tik pridėti naują stulpelį į user-list.html, kur pridėsime nuorodą registruotam vartotojui redaguoti.
Kodas, esantis vartotojų sąraše.htmlRedaguoti
Dabar turime tik išbandyti šią naują operaciją, atnaujinti programą, užregistruoti ir tada redaguoti vartotoją.
Mums tereikia pridėti funkcijų, kad ištrintume vartotojus. Sukuriame naują šabloną tpl pavadinimu user-delete.html
Norite pašalinti {{Vartotojo vardas}}?Pašalinti User-delete.html kodas
Lentelėje user-list.html pridedame naują saitą, kad pasiektume šabloną user-delete.html
Mes pridedame prie controller.js vartotojo-delete.html valdiklį, vadinamą UserDeleteControllerPašalinti
.controller ('UserDeleteController', funkcija ($ ulatis, Duomenų bazės, $ routeParams, $ vieta) {var userID = $ routeParams.userID; $ scope.user = Databases.DataUser.get (userID); $ ulatas.destroy = funkcija ( ) {Databases.DataUser.destroy (vartotojo ID); $ location.path (' / user / list');}}) Pridedame kelią į app.js konfigūraciją
.when (' / user / delete /: userID', {templateUrl: 'tpl / user-delete.html', valdiklis: 'UserDeleteController'})Mes atnaujiname programą, registruojame ir tikriname vartotojo pašalinimo operaciją.
Baigėme pagrindinę programą! Mes jau išmokome rankinių maršrutų kūrimo savo programoje, bet jei atidžiai pažvelgsime ir pamatysime, kokie maršrutai yra sukurti:
- /namai
- / Vartotojas
- / vartotojas / sąrašas
- / user /: vartotojo ID
- / user / delete /: vartotojo ID
Kaip sukurti dinamiškus maršrutus
Atidžiau pažvelkime į dabartinius maršrutus, norėdami sukurti naują naudotoją, naudojame maršrutą / naudotoją.
- Norėdami užklausti naudotojus / vartotoją / sąrašą
- Norėdami jį redaguoti / user /: userID
- Norėdami ištrinti / user / delete /: userID.
Mes galime sukurti tam tikrus maršrutus, kuriuose naudojamas tik vienas, du ar trys parametrai ir šie juos fiksuoja, naudoja pagal savo skonį. Tai atrodytų taip:
Turime ką nors aiškiai pasakyti, kad dinamiški maršrutai veiktų teisingai, turime laikytis šių taisyklių, jas paaiškinti naudosime tą patį vartotojo pavyzdį:
1. Vartotojo vardas turėtų būti naudojamas ir kaip šablonas, ir kaip valdiklio priešdėlis.
2. Užklausoms kaip antrąjį pamoką pamokoje naudojame žodžių sąrašą, tokiu pačiu būdu galite jį pakeisti į bet ką, bet jūsų naudojamas žodis turi būti ir šablono pavadinime, ir pavadinime valdiklio. Pvz .: user-list.html ir UserListController; ištrinti: user-delete.html ir UserDeleteController
3. Norėdami identifikuoti valdiklių priešdėlius, naudokite didžiąsias raides.
4. Valdiklių pavadinimai visada turi baigtis žodžiu Kontrolierius.
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). kitaip ({redirectTo: '/namai'}); Kodas ap.js
Mes sukuriame tris kelio modelius, taigi, kai turite tik vieną parametrą, jis veiks / user ir / home. Du parametrai / user /: userID ir / user / list. Trims parametrams / user / delete /: userID
Taip pat turime sukurti naują valdiklį, kuris bus atsakingas už skirtingų valdiklių valdymą, atsižvelgiant į URI.
.controller ('RouteController', funkcija ($ ulatis, $ routeParams, $ valdiklis, $ filtras) {var prefix = $ filter ('prefixController') ($ routeParams.param1) + '' + $ filter ('prefixController') ( $ routeParams.param2); $ valdiklis (priešdėlis + „Valdiklis“, {$ ulatis: $ taikymo sritis});}) „RouteController“ kodas
Šis valdiklis savo ruožtu priklauso nuo filtro, mes sukuriame naują failą kataloge js, pavadintą filters.js
angular.module ('routeapp.filters', []) .filter ('prefixController', function () {return function (text) {if (typeof text === 'undefined') {return '';} var p_string = naujas RegExp ('[az] + [0-9] *'); var p_int = naujas 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 '';}};}); „Filters.js“ kodas
Mes įleidžiame filtrą į app.js
routeapp.filtersMes importuojame scenarijų filters.js į index.html, esantį prieš app.js
Turime pakeisti paskutinę detalę „UserController“ Y „UserDeleteController“. Kaip ir dabar mes naudojame parametrus: param1 ,: param2 ,: param3; parametras: vartotojo ID nebebus pasiekiamas. Kurį turime pakeisti valdikliuose. „UserController“ naudokite param2, o „UserDeleteController param3“
Kodas „UserController“:
var vartotojo ID = $ routeParams.param2;Kodas „UserDeleteController“:
var vartotojo ID = $ routeParams.param3;Mes baigėme savo dinaminį maršrutizatorių. Dabar mums nebereikia sukti galvos dėl naujų maršrutų į mūsų svetainę kūrimo, nes viską kontroliuoja mūsų RouterController ir naują „$ routerProvider“ konfigūraciją, galite ją išbandyti sukurdami naujus šablonus ir priskirdami jo maršrutus bei valdiklius. Galiausiai galime sukurti naują šabloną, kuris gali padėti mums aptikti bandant pasiekti URL, kurio nėra mūsų svetainėje. Galime naudoti šabloną 404. Sukursime jį tpl pavadinimu 404.html
404.html kodas
404Kontrolieriaus valdiklis
.controller ('404Controller', function () {})Kad galėtume aptikti, kai bandome pasiekti nepasiekiamą maršrutą, galime naudoti a angularjs klausytojas kas tuo rūpinasi. Mes pakeičiame kodą Pagrindinis valdiklis taip:
, 404 ');});})Tiesiog paleiskite programą ir įdėkite URL, kurio nėra mūsų svetainėje, pavyzdžiui, http: // localhost: 300… unknown-url. Programa nedelsiant nukreips į / 404
Tu gali atsisiųskite šią mokymo programos demonstracinę versiją čia:
routeapp.zip 344.9K 259 atsisiuntimai
