NoteraFör att genomföra denna handledning är det lämpligt att ha en tydlig grund på AngularJS, eftersom vi inte kommer att gå in på detaljer om några tekniska aspekter av denna teknik.
Medan vi vet, AngularJS Det ger oss ett stort antal moduler, tjänster och filter som är praktiska när vi skapar en webb- eller mobilapplikation för idag. Det finns andra moduler som vi inte kan hitta i kärnan i detta ramverk, en av dessa är ngRoute. Denna modul har funktionen att använda vänliga URL: er genom att tilldela den en kontroller och en mall som automatiskt anropas via Ajax.
Mer information om ngRoute:
Använda ngRoute
Först skapar vi vår projektkatalog, vi kommer att kalla den routeapp, i den här katalogen skapar vi en annan kallad public, offentligt skapar vi en index.html -fil. Nu, inom det offentliga skapar vi en katalog som heter js där vi ska placera våra kantiga filer. Inne i js börjar vi placera två första filer som heter app.js och controller.js
Vi kan få alla nuvarande versioner av angularjs på den här länken: https://code.angularjs.org/. För att använda självstudien använder vi version 1.5.5 https://code.angularjs.org/1.5.5/
Index.html -kod
Dynamisk Ng -ruttApp.js -kod
angular.module ('routeapp', ['ngRoute', 'routeapp.controller']);Controller.js -kod
angular.module ('routeapp.controller', []) .controller ('MainController', function () {console.log ('AngularJS');});Nu kör vi detta på en webbserver. Du kan använda vad du vill, vare sig det är Apache, nginx, Tomcat, etc. I mitt fall kommer jag att använda express från nodejs. Om du också vill göra det med nodejs kan du följa följande steg. Om du aldrig har använt nodejs kan du följa följande handledning där det förklaras:
- Skapa frontend -arkitektur med npm, bower och grunt.
Vi använder följande kommando i roten till projektet från kommandoraden.
npm ini
npm installera-save-dev expressEfter expressinstallation vi skapar en fil i roten till projektet som heter server.js och vi lägger till följande kod:
var express = require ('express'); var app = express (); var port = Number (process.env.PORT || 3000); app.use (express.static (__ dirname + '/ public')); app.listen (port, function () {console.log ('App startade på http: // localhost:' + port);});Nu kör vi kommandot:
nod server.jsför att starta webbservern.
När du startar webbservern kontrollerar du att webbläsarens elementkontrollkonsol har skrivit ordet AngularJS.
Nu ska vi göra användning av ngRoute.
Använda rutter
Vi kommer att använda vinkelkonfigurationsfunktion för att skapa rutter för vår webapp.
.config (funktion ($ routeProvider) {$ routeProvider .when ('/ home', {templateUrl: 'tpl/ home.html', controller: 'HomeController'}). annars ({redirectTo: '/ home'}); }) App.js -kod- /Hem: URI för vår hemsida.
- templateURL: vägen till vår mall för hemmet.
- kontroller: Kontrollenheten som tilldelats hemmallen.
- Annat: Placera vår webbplats i / home som standard
Inuti index.html -kroppen lägger vi till en div -tagg med attributet ng-view som kommer att ansvara för återgivningen av home.html -mallen och de framtida mallarna som vi ska skapa i självstudien.
Information om ngView:
Kod i index.html:
Vi lägger till hemkontrollen i controller.js .controller ('HomeController', function () {console.log ('HomeController');})Om allt gick rätt borde du få något liknande följande bild:
Data ihållande
Vi har redan testat att vår ruttjänst fungerar korrekt, vi fortsätter med att skapa en modul för att hantera användare, i den här modulen kan vi skapa, lista, redigera och ta bort användare. För handledningen behöver vi inte kommunicera med en backend, vilket vi kommer att göra data persistens med en array, vilket innebär att dessa data är tillfälliga och att varje gång vi uppdaterar programmet kommer dessa data att gå förlorade.
Vi börjar med att skapa följande filer services.js Y värden.js inuti js -katalogen
angular.module ('routeapp.values', []) .value ('Användare', []); Values.js -kod
angular.module ('routeapp.services', ['routeapp.values']) .factory ('Databases', ['Users', function (Users) {return {DataUser: {add: function (user) {Users.push (användare);}, list: 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"! = typ av obj) returobj; var copy = obj.constructor (); för (var attr i obj) {if (obj.hasOwnProperty (attr)) kopiera [attr] = obj [ attr];} returnera kopia;}}}]); Services.js -kod
I services js skapar vi två fabriker som kallas Databaser Y Användbar.
- Databaser: Det kommer att ta hand om beständigheten av användarregistreringsdata (med funktioner för att lägga till, uppdatera, lista, hämta, förstöra).
- Användbar: Det kommer att fungera som en klonare av de data som vi kommer att behöva när vi registrerar en användare.
Vi injicerar servicemodulen till vår app.js
ruteapp.tjänsterKoden för den första raden med app.js skulle se ut så här:
angular.module ('routeapp', ['ngRoute', 'routeapp.controller', 'routeapp.services'])Nu behöver vi bara spara services.js och values.js -skripten i index.html, placera dem före app.js -skriptet för att undvika eventuella besvär vid genomförandet av programmet.
Innan vi fortsätter, låt oss testa att vår applikation inte presenterar fel i utvecklingskonsolen. Så här har filerna skapats hittills.
Vi fortsätter att skapa mallarna för registrering och användarlista. Vi skapar inom tpl till user.html och user-list.html
Användarnamn Namn E -post SparaUser.html -kod
| Användare | namn | Post |
|---|---|---|
| {{item.username}} | {{föremålsnamn}} | {{item.email}} |
Inom controller.js vi lägger till kontrollen för user.html och user-list.html
.controller ('UserController', function ($ scope, Databases, Util) {$ scope.user = {}; $ scope.save = function () {var user = Util.clone ($ scope.user); Databases.DataUser .add (användare); $ scope.user = {};};}) .controller ('UserListController', function ($ scope, Databases) {$ scope.dataUser = Databases.DataUser.list ();})Controller.js -kod
Lägg till index.html länkar för att komma åt de två mallarna:
- Registrera användare
- Rådfråga användaren
Vi behöver bara lägga till de nya rutter som vi har skapat till app.js -konfigurationen, placera dem före annars fungerar:
.when (' / user', {templateUrl: 'tpl / user.html', controller: 'UserController'}) .when (' / user / list', {templateUrl: 'tpl / user-list.html', controller : 'UserListController'}) Låt oss se hur allt går så långt.
FÖRSTORA
Testa genom att registrera flera användare och verifiera att de registrerar sig korrekt från Konsultera användare.
Redo, nu fortsätter vi med uppdateringen och eliminering av användare. För att uppdatera en användare, lägg bara till ny funktionalitet i UserController, vi ändrar den tidigare koden för den här nya:
.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 = {};};}) Förklaring av den nya koden:- $ routeParams: Denna tjänst kommer att returnera GET -parametrarna för vår applikation, i det här fallet kommer vi att använda den för att returnera ID för användaren som vi ska uppdatera. $ routeParams.userID. Mer information om $ routerParams https: //docs.angular … ce /$ routeParams
Vi måste också lägga till en ny sökväg i konfigurationen av app.js:
.when (' / user /: userID', {templateUrl: 'tpl / user.html', controller: 'UserController'})Det är viktigt att placera denna nya sökväg under sökvägen ' / användare / lista', så att den kommer att presentera en konflikt med de sistnämnda.
- ' / user /: userID': Som vi kan se har denna URL något speciellt som heter: userID, det här är parametern som vi kommer att använda i UserController.
Det återstår bara att lägga till en ny kolumn i user-list.html där vi lägger till en länk för att redigera den registrerade användaren.
Kod i user-list.htmlRedigera
Nu behöver vi bara testa den här nya operationen, uppdatera programmet, registrera och sedan redigera användaren.
Vi behöver bara lägga till funktionaliteten för att ta bort användare. Vi skapar en ny mall i tpl som heter user-delete.html
Du vill ta bort {{Användarnamn}}?Avlägsna User-delete.html-kod
Vi lägger till en ny länk i tabellen user-list.html för att komma åt mallen user-delete.html
Vi lägger till controller.js handkontrollen för user-delete.html som heter UserDeleteControllerAvlägsna
.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');}}) Och vi lägger till sökvägen i config av app.js
.when (' / user / delete /: userID', {templateUrl: 'tpl / user-delete.html', controller: 'UserDeleteController'})Vi uppdaterar programmet, registrerar och testar sedan hur användaren tas bort.
Vi har slutfört vår basapplikation! Vi har redan behärskat skapandet av manuella rutter i vår applikation, men om vi tittar noga och ser vad rutterna är byggda:
- /Hem
- / användare
- / användare / lista
- / user /: userID
- / user / delete /: userID
Hur man skapar dynamiska rutter
Låt oss titta närmare på våra nuvarande rutter, för att skapa en ny användare använder vi rutten / användaren.
- För att fråga användare / användare / listan
- För att redigera det / user /: userID
- För att radera / user / delete /: userID.
Vi kan skapa några rutter där endast en, två eller tre parametrar används och dessa fångar dem, använder dem till vår smak. Det skulle se ut så här:
Vi måste göra något klart, för att dynamiska rutter ska fungera korrekt måste vi följa följande regler, för att förklara dem kommer vi att använda samma exempel på användare:
1. Namnanvändaren ska användas som både mall och kontrollprefix.
2. För frågorna som det andra prefixet i självstudien använder vi ordlistan, på samma sätt kan du ändra det till vad du vill, men ordet du använder måste ha det både i namnet på mallen och i namnet av kontrollern. Ex: user-list.html och UserListController; för delete: user-delete.html och UserDeleteController
3. För att identifiera prefixen i kontrollerna, använd versaler.
4. Controller namn måste alltid sluta 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: ''; returnera 'tpl /' + uri.param1 + part_uri + '.html'; }}; $ routeProvider .when (' /: param1', rutt) .when (' /: param1 /: param2', rutt) .when (' /: param1 /: param2 /: param3', rutt). annars ({redirectTo: '/Hem'}); Kod i app.js
Vi skapar tre banmönster, så när du bara har en enda parameter fungerar det för / användare och / hem. För två parametrar / user /: userID och / user / list. För tre parametrar / user / delete /: userID
Vi måste också skapa en ny controller som kommer att ansvara för att styra de olika kontrollerna beroende på URI.
.controller ('RouteController', funktion ($ scope, $ routeParams, $ controller, $ filter) {var prefix = $ filter ('prefixController') ($ routeParams.param1) + '' + $ filter ('prefixController') ( $ routeParams.param2); $ controller (prefix + 'Controller', {$ scope: $ scope});}) RouteController -kod
Denna handkontroll beror i sin tur på ett filter, vi skapar en ny fil i js -katalogen som heter filters.js
angular.module ('routeapp.filters', []) .filter ('prefixController', function () {return function (text) {if (typeof text === 'undefined') {return '';} var p_string = nytt RegExp ('[az] + [0-9] *'); var p_int = nytt RegExp ("[0-9] +"); if (p_int.test (text)) {return '';} annars om (p_string.test (text)) {return text.charAt (0) .toUpperCase () + ((text.length> 1)? text.slice (1): '');} else {return '';}};}); Filters.js -kod
Vi injicerar filtret i app.js
routeapp.filterVi importerar filter.js -skriptet till index.html som placerats före app.js
Vi måste ändra en sista detalj i UserController Y UserDeleteController. Som nu använder vi parametrar: param1 ,: param2 ,: param3; parametern: userID är inte längre tillgänglig. Som vi måste ändra i kontrollerna. För UserController använder param2 och för UserDeleteController param3
Koda UserController:
var userID = $ routeParams.param2;Koda UserDeleteController:
var userID = $ routeParams.param3;Vi har slutfört vår dynamiska router. Nu behöver vi inte längre oroa oss för att skapa nya rutter till vår webbplats eftersom allt styrs av vår RouterController och den nya konfigurationen av $ routerProvider kan du testa den genom att skapa nya mallar och tilldela dess rutter och kontroller. Slutligen kan vi skapa en ny mall som kan hjälpa oss att upptäcka när vi försöker komma åt en webbadress som inte finns på vår webbplats. Vi kan använda en mall 404. Vi ska skapa den i tpl med namnet 404.html
Kod för 404.html
404Controller controller
.controller ('404Controller', function () {})Så att vi kan upptäcka när vi försöker komma åt en otillgänglig rutt kan vi använda en angularjs lyssnare som tar hand om det. Vi byter ut koden för MainController av följande:
.controller ('MainController', function ($ scope, $ location) {console.log ('AngularJS'); $ scope. $ on ('$ routeChangeError', function (next, current) {$ location.path ('/ 404 ');});}) Kör bara programmet och lägg en URL som inte är tillgänglig på vår webbplats, till exempel http: // localhost: 300 … unknown-url. Programmet omdirigeras omedelbart till / 404
Du kan ladda ner denna självstudiedemo här:
routeapp.zip 344,9K 259 Nedladdningar
