PoznámkaK provedení tohoto kurzu je vhodné mít jasný základ AngularJS, protože se nebudeme podrobně zabývat některými technickými aspekty této technologie.
I když víme, AngularJS Poskytuje nám velké množství modulů, služeb a filtrů, které se dnes hodí při vytváření webové nebo mobilní aplikace. Existují další moduly, které v jádru tohoto rámce nemůžeme najít, jedním z nich je ngRoute. Tento modul má funkci použití přátelských adres URL přiřazením ovladače a šablony, která se automaticky volá pomocí Ajaxu.
Více informací o ngRoute:
Použití ngRoute
Nejprve vytvoříme náš adresář projektu, budeme jej nazývat routeapp, v rámci tohoto adresáře vytvoříme další s názvem public, na veřejnosti vytvoříme soubor index.html. Nyní uvnitř public vytvoříme adresář s názvem js, kam budeme umísťovat naše úhlové soubory. Uvnitř js začneme umisťovat dva první soubory s názvem app.js a controller.js
Všechny aktuální verze angularjs můžeme získat na tomto odkazu: https://code.angularjs.org/. K použití tutoriálu použijeme verzi 1.5.5 https://code.angularjs.org/1.5.5/
Index.html kód
Dynamická trasa NgKód App.js
angular.module ('routeapp', ['ngRoute', 'routeapp.controller']);Kód Controller.js
angular.module ('routeapp.controller', []) .controller ('MainController', function () {console.log ('AngularJS');});Nyní to spustíme na webovém serveru. Můžete použít, co chcete, ať už je to Apache, nginx, Tomcat atd. Pro můj případ použiji expres od nodejs. Pokud to chcete také provést pomocí nodejs, můžete postupovat podle následujících kroků. Pokud jste nodejs nikdy nepoužili, můžete postupovat podle následujícího tutoriálu, kde je vysvětleno:
- Vytvořte architekturu frontendu pomocí npm, bower a grunt.
Následující příkaz používáme v kořenovém adresáři projektu z příkazového řádku.
npm ini
npm install --save-dev expressPo expresní instalace vytvoříme soubor v kořenovém adresáři projektu s názvem server.js a přidáme následující kód:
var express = require ('expres'); var aplikace = express (); var port = Číslo (process.env.PORT || 3000); app.use (express.static (__ dirname + '/ public')); app.listen (port, function () {console.log ('Aplikace spuštěna na http: // localhost:' + port);});Nyní spustíme příkaz:
uzel server.jske spuštění webového serveru.
Při spuštění webového serveru ověřte, že konzola inspektora prvků vašeho prohlížeče zadala slovo AngularJS.
Nyní to uděláme použití ngRoute.
Pomocí tras
Použijeme funkce úhlové konfigurace k vytvoření tras naší webové aplikace.
.config (funkce ($ routeProvider) {$ routeProvider .when ('/ home', {templateUrl: 'tpl/ home.html', controller: 'HomeController'}) .otherwise ({redirectTo: '/ home'}); })) Kód App.js- /Domov: URI naší domovské stránky.
- templateURL: cesta naší šablony domů.
- ovladač: Řadič přiřazený pro domovskou šablonu.
- V opačném případě: Umístěte náš web ve výchozím nastavení do / home
Do těla index.html přidáme značku div s atributem ng-view kdo bude mít na starosti vykreslování šablony home.html a budoucích šablon, které se chystáme v tutoriálu vytvořit.
Informace o ngView:
Kód v index.html:
Přidáme domácí ovladač controller.js .controller ('HomeController', function () {console.log ('HomeController');})Pokud vše proběhlo správně, měli byste získat něco jako následující obrázek:
Stálost dat
Již jsme vyzkoušeli, že naše služba směrování funguje správně, pokračujeme vytvářením modulu pro správu uživatelů, v tomto modulu můžeme vytvářet, vypisovat, upravovat a mazat uživatele. Pro tutoriál nepotřebujeme komunikovat s backendem, což provedeme perzistenci dat pomocí pole, což znamená, že tato data jsou dočasná a že při každé aktualizaci aplikace dojde ke ztrátě uvedených dat.
Začneme vytvořením následujících souborů services.js Y values.js uvnitř adresáře js
angular.module ('routeapp.values', []) .value ('Users', []); Kód Values.js
angular.module ('routeapp.services', ['routeapp.values']) .factory ('Databases', ['Users', function (Users) {return {DataUser: {add: function (user) {Users.push (uživatel);}, seznam: funkce () {vrátit uživatele;}, aktualizovat: funkce (index, uživatel) {vrátit uživatele [index] = uživatel;}, získat: funkce (index) {vrátit uživatele [index];} , destru: function (index) {return Users.splice (index, 1);}}};}])) .factory ('Util', [function () {return {clone: function (obj) {if ( null = = obj || "object"! = typeof obj) return obj; var copy = obj.constructor (); for (var attr in obj) {if (obj.hasOwnProperty (attr)) copy [attr] = obj [ attr];} vrátit kopii;}}}]); Kód Services.js
Ve službách js vytváříme dvě továrny s názvem Databáze Y Užitečný.
- Databáze: Postará se o stálost údajů o uživatelských záznamech (pomocí funkcí přidání, aktualizace, seznamu, získání, zničení).
- Užitečný: Slouží jako klon dat, která budeme potřebovat při registraci uživatele.
Vložíme modul služeb do našeho souboru app.js
služby routeapp.Kód pro první řádek app.js by vypadal takto:
angular.module ('routeapp', ['ngRoute', 'routeapp.controller', 'routeapp.services'])Nyní musíme pouze uložit skripty services.js a values.js do index.html, umístit je před skript app.js, abychom se vyhnuli jakýmkoli nepříjemnostem při provádění aplikace.
Než budeme pokračovat, vyzkoušejte, zda naše aplikace ve vývojové konzole nepředstavuje chyby. Takto byly soubory dosud vytvářeny.
Pokračujeme ve vytváření šablon pro registraci a seznam uživatelů. Vytváříme v rámci tpl na user.html a user-list.html
Uživatelské jméno Jméno E -mail UložitUser.html kód
| Uživatel | název | Pošta |
|---|---|---|
| {{item.username}} | {{název položky}} | {{item.email}} |
V rámci controller.js přidáme ovladač pro user.html a user-list.html
.controller ('UserController', funkce ($ scope, Databases, Util) {$ scope.user = {}; $ scope.save = function () {var user = Util.clone ($ scope.user); Databases.DataUser .add (uživatel); $ scope.user = {};};}) .controller ('UserListController', funkce ($ rozsah, databáze) {$ scope.dataUser = Databases.DataUser.list ();})Kód Controller.js
Přidejte do index.html odkazy pro přístup ke dvěma šablonám:
- Registrace uživatele
- Poraďte se s uživatelem
Potřebujeme pouze přidat nové trasy, které jsme vytvořili, do konfigurace app.js, umístit je před jinak fungovat:
.when (' / user', {templateUrl: 'tpl / user.html', controller: 'UserController'}) .when (' / user / list', {templateUrl: 'tpl / user-list.html', controller : 'UserListController'}) Pojďme se podívat, jak se zatím vše vyvíjí.
ZVĚTŠIT
Testujte tak, že zaregistrujete více uživatelů a ověříte, že se správně registrují od Poraďte se s uživateli.
Připraveni, nyní pokračujeme v aktualizaci a odstraňování uživatelů. Chcete -li aktualizovat uživatele, stačí přidat nové funkce do UserController, změníme předchozí kód pro tento nový:
.controller ('UserController', funkce ($ 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 = {};};}) Vysvětlení nového kódu:- $ routeParams: Tato služba vrátí GET parametry naší aplikace, v tomto případě ji použijeme k vrácení ID uživatele, kterého se chystáme aktualizovat. $ routeParams.userID. Více informací o $ routerParams https: //docs.angular … ce /$ routeParams
Také musíme přidat novou cestu do konfigurace app.js:
.when (' / user /: userID', {templateUrl: 'tpl / user.html', controller: 'UserController'})Je důležité umístit tuto novou cestu pod cestu ' / user / list', aby nám představovala konflikt s posledně zmíněným.
- ' / user /: userID': Jak vidíme, tato adresa URL má něco zvláštního nazvaného: userID, to je parametr, který použijeme v UserController.
Zbývá pouze přidat nový sloupec do user-list.html, kam přidáme odkaz na úpravu registrovaného uživatele.
Kód v user-list.htmlUpravit
Nyní musíme pouze otestovat tuto novou operaci, aktualizovat aplikaci, zaregistrovat a poté upravit uživatele.
K odstranění uživatelů potřebujeme pouze přidat funkce. Vytvoříme novou šablonu v tpl s názvem user-delete.html
Chcete odebrat {{user.name}}?Odstranit Kód user-delete.html
Do tabulky user-list.html přidáme nový odkaz pro přístup k šabloně user-delete.html
Přidáme do controller.js ovladač pro user-delete.html s názvem UserDeleteControllerOdstranit
.controller ('UserDeleteController', funkce ($ rozsah, databáze, $ routeParams, $ umístění) {var userID = $ routeParams.userID; $ scope.user = Databases.DataUser.get (userID); $ scope.destroy = funkce ( ) {Databases.DataUser.destroy (userID); $ location.path (' / user / list');}}) A přidáme cestu do konfigurace app.js
.when (' / user / delete /: userID', {templateUrl: 'tpl / user-delete.html', controller: 'UserDeleteController'})Obnovíme aplikaci, zaregistrujeme a poté otestujeme operaci odebrání uživatele.
Dokončili jsme naši základní aplikaci! Vytváření manuálních tras v naší aplikaci jsme již zvládli, ale pokud se podíváme pozorně a uvidíme, jaké jsou trasy vytvořeny:
- /Domov
- / uživatel
- / uživatel / seznam
- / user /: userID
- / user / delete /: ID uživatele
Jak vytvářet dynamické trasy
Podívejme se pozorně na naše aktuální trasy, k vytvoření nového uživatele použijeme trasu / uživatele.
- Dotaz na uživatele / uživatele / seznam
- Chcete -li jej upravit / user /: userID
- Odstranit / user / delete /: userID.
Můžeme vytvořit některé trasy, kde se používá pouze jeden, dva nebo tři parametry, a ty je zachycují, používají je podle našeho vkusu. Vypadalo by to takto:
Musíme něco ujasnit, aby dynamické trasy fungovaly správně, musíme dodržovat následující pravidla, k jejich vysvětlení použijeme stejný příklad uživatele:
1. Jméno uživatele by mělo být použito jako předpona šablony i řadiče.
2. Pro dotazy jako druhou předponu v tutoriálu používáme seznam slov, stejným způsobem jej můžete změnit na cokoli chcete, ale použité slovo to musí mít jak v názvu šablony, tak v názvu ovladače. Příklad: user-list.html a UserListController; pro odstranění: user-delete.html a UserDeleteController
3. K identifikaci předpon v řadičích použijte velká písmena.
4. Jména ovladačů musí vždy končit slovem 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: ''; vrátit 'tpl /' + uri.param1 + part_uri + '.html'; }}; $ routeProvider .when (' /: param1', route) .when (' /: param1 /: param2', route) .when (' /: param1 /: param2 /: param3', route) .jinak ({redirectTo: '/Domov'}); Kód v souboru app.js
Vytváříme tři vzory cest, takže když máte pouze jeden parametr, bude to fungovat pro / user a / home. Pro dva parametry / user /: userID a / user / list. Pro tři parametry / user / delete /: userID
Musíme také vytvořit nový řadič, který bude mít na starosti vedení různých ovladačů v závislosti na URI.
.controller ('RouteController', funkce ($ scope, $ routeParams, $ controller, $ filter) {var prefix = $ filter ('prefixController') ($ routeParams.param1) + '' + $ filter ('prefixController') ( $ routeParams.param2); $ controller (prefix + 'Controller', {$ scope: $ scope});}) Kód RouteController
Tento řadič zase závisí na filtru, vytvoříme nový soubor v adresáři js s názvem filtry.js
angular.module ('routeapp.filters', []) .filter ('prefixController', function () {return function (text) {if (typeof text === 'undefined') {return '';} var p_string = new RegExp ('[az] + [0-9] *'); var p_int = new 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 '';}};}); Kód Filters.js
Vložíme filtr do souboru app.js
routeapp. filtryImportujeme skript filter.js do index.html umístěného před app.js
Musíme změnit poslední detail v UserController Y UserDeleteController. Jako nyní používáme parametry: param1 ,: param2 ,: param3; parametr: ID uživatele již nebude k dispozici. Což musíme změnit v ovladačích. Pro UserController použijte param2 a pro UserDeleteController param3
Kód UserController:
var userID = $ routeParams.param2;Kód UserDeleteController:
var userID = $ routeParams.param3;Dokončili jsme náš dynamický router. Nyní si již nemusíme dělat starosti s vytvářením nových tras na naše stránky, protože vše je řízeno našimi RouterController a novou konfiguraci $ routerProvider, můžete ji otestovat vytvořením nových šablon a přiřazením jejích tras a ovladačů. Nakonec můžeme vytvořit novou šablonu, která nám může pomoci detekovat při pokusu o přístup k adrese URL, která se na našem webu nenachází. Můžeme použít šablonu 404. Vytvoříme ji v tpl s názvem 404.html
Kód pro 404.html
404 Ovladač ovladače
.controller ('404Controller', funkce () {})Abychom při pokusu o přístup k nedostupné trase mohli zjistit, můžeme použít a angularjs posluchač kdo se o to stará. Nahrazujeme kód MainController následujícím:
.controller ('MainController', function ($ scope, $ location) {console.log ('AngularJS'); $ scope. $ on ('$ routeChangeError', function (next, current) {$ location.path ('/ 404 ');});}) Jednoduše spusťte aplikaci a vložte adresu URL, která na našem webu není k dispozici, například http: // localhost: 300 … neznámá adresa URL. Aplikace okamžitě přesměruje na / 404
Můžeš stáhněte si tuto ukázkovou ukázku tady:
routeapp.zip 344,9 kB 259 stažení
