NotatkaDo przeprowadzenia tego samouczka wskazane jest posiadanie jasnych podstaw AngularJS, ponieważ nie będziemy szczegółowo omawiać niektórych technicznych aspektów tej technologii.
Chociaż wiemy, AngularJS Zapewnia nam dużą liczbę modułów, usług i filtrów, które przydają się przy tworzeniu aplikacji webowej lub mobilnej na dziś. Istnieją inne moduły, których nie możemy znaleźć w rdzeniu tego frameworka, jednym z nich jest ngRoute. Ten moduł ma funkcję używania przyjaznych adresów URL poprzez przypisanie mu kontrolera i szablonu, który jest wywoływany automatycznie przez Ajax.
Więcej informacji o ngRoute:
Korzystanie z ngRoute
Najpierw tworzymy katalog naszego projektu, nazwiemy go routeapp, w tym katalogu tworzymy inny o nazwie public, publicznie tworzymy plik index.html. Teraz wewnątrz public tworzymy katalog o nazwie js, w którym zamierzamy umieścić nasze pliki kątowe. Wewnątrz js zaczynamy umieszczać dwa pierwsze pliki o nazwach app.js i controller.js
Wszystkie aktualne wersje angularjs możemy pobrać pod tym linkiem: https://code.angularjs.org/. Aby skorzystać z samouczka użyjemy wersji 1.5.5 https://code.angularjs.org/1.5.5/
Kod Index.html
Dynamiczna trasa NgKod App.js
angular.module ('routeapp', ['ngRoute', 'routeapp.controller']);Kod Controller.js
angular.module ('routeapp.controller', []) .controller ('MainController', function () {console.log ('AngularJS');});Teraz uruchamiamy to na serwerze WWW. Możesz używać wszystkiego, co chcesz, czy to Apache, nginx, Tomcat itp. W moim przypadku użyję express z nodejs. Jeśli chcesz to zrobić również z nodejs, możesz wykonać następujące kroki. Jeśli nigdy nie korzystałeś z nodejs, możesz skorzystać z poniższego samouczka, w którym jest to wyjaśnione:
- Twórz architekturę frontendową za pomocą npm, bower i grunt.
Używamy następującego polecenia w katalogu głównym projektu z wiersza poleceń.
inicja npm
npm install --save-dev expressPo ekspresowa instalacja tworzymy plik w katalogu głównym projektu o nazwie serwer.js i dodajemy następujący kod:
var express = wymagają ('ekspresowe'); var aplikacja = ekspres (); var port = liczba (process.env.PORT || 3000); app.use (express.static (__ dirname + '/ public')); app.listen (port, function () {console.log ('Aplikacja uruchomiona na http: // localhost:' + port);});Teraz wykonujemy polecenie:
node server.jsaby uruchomić serwer WWW.
Po uruchomieniu serwera WWW sprawdź, czy konsola inspektora elementów przeglądarki wpisała słowo AngularJS.
Teraz zróbmy korzystanie z ngRoute.
Korzystanie z tras
Użyjemy funkcja konfiguracji kątowej do tworzenia tras naszej aplikacji internetowej.
.config (function ($ routeProvider) {$ routeProvider .when ('/home', {templateUrl: 'tpl/home.html', controller: 'HomeController'}) .otherwise ({redirectTo: '/home'}); }) Kod App.js- /Dom: identyfikator URI naszej strony głównej.
- URL szablonu: ścieżka naszego szablonu do domu.
- kontroler: Kontroler przypisany do szablonu domu.
- W przeciwnym razie: Umieść naszą stronę domyślnie w / home
Wewnątrz treści index.html dodajemy znacznik div z atrybutem ng-widok kto będzie odpowiedzialny za renderowanie szablonu home.html i przyszłych szablonów, które stworzymy w samouczku.
Informacje o ngView:
Kod w index.html:
Dodajemy kontroler domowy w kontroler.js .controller ('HomeController', funkcja () {console.log ('HomeController');})Jeśli wszystko poszło poprawnie, powinieneś otrzymać coś takiego jak poniższy obrazek:
Trwałość danych
Sprawdziliśmy już, że nasza usługa tras działa poprawnie, kontynuujemy tworzenie modułu do zarządzania użytkownikami, w tym module możemy tworzyć, wyświetlać, edytować i usuwać użytkowników. W samouczku nie musimy komunikować się z backendem, co zrobimy utrwalanie danych za pomocą tablicy, co oznacza, że dane te są tymczasowe i za każdym razem, gdy odświeżymy aplikację, dane te zostaną utracone.
Zaczynamy od stworzenia następujących plików services.js Tak wartości.js w katalogu js
angular.module ('routeapp.values', []) .value ('Użytkownicy', []); Kod Values.js
angular.module ('routeapp.services', ['routeapp.values']) .factory ('Bazy danych', ['Użytkownicy', function (Użytkownicy) {return {DataUser: {add: function (user) {Users.push (użytkownik);}, lista: function () {zwróć Użytkownicy;}, update: function (indeks, użytkownik) {zwróć Użytkownicy [indeks] = użytkownik;}, get: function (indeks) {zwróć Użytkownicy [indeks];} , destroy: function (index) {return Users.splice (index, 1);}}};}]) .factory ('Util', [function()) {return {clone: function (obj) {if ( null = = obj || "obiekt"! = typ obiektu) return obj; var copy = obj.constructor (); for (var attr in obj) {if (obj.hasOwnProperty (attr)) copy [attr] = obj [ attr];} zwróć kopię;}}}]); Kod Services.js
W usługach js tworzymy dwie fabryki o nazwie Bazy danych Tak Użyteczne.
- Bazy danych: Dba o trwałość danych rekordów użytkownika (za pomocą funkcji dodawania, aktualizowania, listowania, pobierania, niszczenia).
- Użyteczne: Będzie służył jako klon danych, których będziemy potrzebować podczas rejestracji użytkownika.
Wstrzykujemy moduł usług do naszego app.js
routeapp.servicesKod pierwszej linii app.js wyglądałby tak:
angular.module ('routeapp', ['ngRoute', 'routeapp.controller', 'routeapp.services'])Teraz wystarczy zapisać skrypty services.js i values.js w index.html, umieścić je przed skryptem app.js, aby uniknąć jakichkolwiek niedogodności w wykonywaniu aplikacji.
Zanim przejdziemy dalej, przetestujmy, czy nasza aplikacja nie wyświetla błędów w konsoli deweloperskiej. Tak do tej pory powstawały pliki.
Kontynuujemy tworzenie szablonów do rejestracji i listy użytkowników. Tworzymy w ramach tpl do user.html i user-list.html
Nazwa użytkownika Nazwa E-mail ZapiszKod użytkownika.html
| Użytkownik | Nazwa | Poczta |
|---|---|---|
| {{pozycja.nazwa użytkownika}} | {{nazwa.elementu}} | {{pozycja.e-mail}} |
W kontroler.js dodajemy kontroler dla user.html i user-list.html
.controller ('UserController', function ($ scope, Databases, Util) {$ scope.user = {}; $ scope.save = function () {var user = Util.clone ($ scope.user); Databases.DataUser .add (user); $ scope.user = {};};}) .controller ('UserListController', function (zakres $, Bazy danych) {$ scope.dataUser = Databases.DataUser.list ();})Kod Controller.js
Dodaj w index.html linki, aby uzyskać dostęp do dwóch szablonów:
- Zarejestruj użytkownika
- Skonsultuj się z użytkownikiem
Musimy tylko dodać nowe trasy, które stworzyliśmy do konfiguracji app.js, umieścić je przed w przeciwnym razie funkcjonować:
.when ('/ user', {templateUrl: 'tpl / user.html', kontroler: 'UserController'}) .when ('/ user / list', {templateUrl: 'tpl / user-list.html', kontroler : 'KontrolerListyUżytkowników'}) Zobaczmy, jak wszystko idzie do tej pory.
POWIĘKSZAĆ
Przetestuj, rejestrując wielu użytkowników i sprawdzając, czy rejestrują się poprawnie od Skonsultuj się z użytkownikami.
Gotowe, teraz kontynuujemy aktualizację i eliminację użytkowników. Aby zaktualizować użytkownika, po prostu dodaj nową funkcjonalność do Kontroler użytkownika, zmieniamy poprzedni kod na ten nowy:
.controller ('UserController', funkcja ($ zakres, Bazy danych, Util, $ routeParams, $ lokalizacja) {var userID = $ routeParams.userID; var isEdit = (userID! = niezdefiniowany); $ scope.user = {}; jeśli (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 = {};};}) Wyjaśnienie nowego kodu:- $ routeParams: Usługa ta zwróci parametry GET naszej aplikacji, w tym przypadku wykorzystamy ją do zwrócenia ID użytkownika, którego będziemy aktualizować. $ routeParams.userID. Więcej informacji o $ routerParams https: //docs.angular … ce / $ routeParams
Musimy również dodać nową ścieżkę w konfiguracji app.js:
.when ('/ user /: userID', {templateUrl: 'tpl / user.html', controller: 'UserController'})Ważne jest, aby umieścić tę nową ścieżkę pod ścieżką '/user/list', aby przedstawiała nam konflikt z tą ostatnią.
- '/ użytkownik /: ID użytkownika': Jak widzimy, ten adres URL ma coś specjalnego, co nazywa się: userID, jest to parametr, którego użyjemy w UserController.
Pozostaje tylko dodać nową kolumnę w user-list.html gdzie dodamy link do edycji zarejestrowanego użytkownika.
Kod w user-list.htmlEdytować
Teraz pozostaje nam tylko przetestować tę nową operację, odświeżyć aplikację, zarejestrować, a następnie edytować użytkownika.
Musimy tylko dodać funkcję usuwania użytkowników. Tworzymy nowy szablon w tpl o nazwie user-delete.html
Chcesz usunąć {{Nazwa Użytkownika}}?Usunąć Kod użytkownika-delete.html
Dodajemy nowy link w tabeli user-list.html, aby uzyskać dostęp do szablonu user-delete.html
Dodajemy w controller.js kontroler dla user-delete.html o nazwie UserDeleteControllerUsunąć
.controller ('UserDeleteController', funkcja (zakres $, Bazy danych, $ routeParams, $ lokalizacja) {var userID = $ routeParams.userID; $ scope.user = Databases.DataUser.get (userID); $ scope.destroy = function ( ) {Databases.DataUser.destroy (userID); $ location.path ('/ user / list');}}) I dodajemy ścieżkę w konfiguracji app.js
.when ('/ user / delete /: userID', {templateUrl: 'tpl / user-delete.html', kontroler: 'UserDeleteController'})Odświeżamy aplikację, rejestrujemy się, a następnie testujemy działanie usunięcia użytkownika.
Zakończyliśmy naszą podstawową aplikację! Opanowaliśmy już tworzenie tras ręcznych w naszej aplikacji, ale jeśli przyjrzymy się uważnie i zobaczymy, jakie trasy są zbudowane:
- /Dom
- / użytkownik
- / Lista użytkowników
- / użytkownik /: ID użytkownika
- / użytkownik / usuń /: ID użytkownika
Jak tworzyć dynamiczne trasy
Przyjrzyjmy się bliżej naszym obecnym trasom, aby utworzyć nowego użytkownika korzystamy z trasy/użytkownika.
- Aby zapytać użytkowników / użytkownika / listę
- Aby go edytować / user /: userID
- Aby usunąć / użytkownik / usunąć /: ID użytkownika.
Możemy tworzyć trasy, w których używany jest tylko jeden, dwa lub trzy parametry, a te przechwytują je i wykorzystują je zgodnie z naszymi upodobaniami. Wyglądałoby to tak:
Musimy coś wyjaśnić, aby trasy dynamiczne działały poprawnie, musimy przestrzegać następujących zasad, do ich wyjaśnienia posłużymy się tym samym przykładem użytkownika:
1. Nazwa użytkownik powinna być używana zarówno jako szablon, jak i prefiks kontrolera.
2. Dla zapytań jako drugi prefiks w tutorialu używamy listy słów, w ten sam sposób możesz ją zmienić na jakąkolwiek chcesz, ale słowo, którego używasz musi mieć to zarówno w nazwie szablonu, jak i w nazwie kontrolera. Np.: user-list.html i UserListController; do usunięcia: user-delete.html i UserDeleteController
3. W celu identyfikacji prefiksów w kontrolerach używaj wielkich liter.
4. Nazwy kontrolerów muszą zawsze kończyć się słowem Kontroler.
var route = {kontroler: 'RouteController', templateUrl: function (uri) {var pattern = new RegExp ("[0-9] +"); var part_uri = (! pattern.test (uri.param2) && typeof uri.param2! == 'nieokreślony')? '-' + uri.param2: ''; zwróć 'tpl /' + uri.param1 + part_uri + '.html'; }}; $ routeProvider .when ('/: param1', trasa) .when ('/: param1 /: param2', trasa) .when ('/: param1 /: param2 /: param3', trasa) .otherwise ({redirectTo: '/Dom'}); Kod w app.js
Tworzymy trzy wzorce ścieżek, więc gdy masz tylko jeden parametr, będzie działał dla /user i /home. Dla dwóch parametrów /user/: userID i /user/list. Dla trzech parametrów / użytkownik / usuń /: ID użytkownika
Musimy również stworzyć nowy kontroler, który będzie odpowiedzialny za prowadzenie różnych kontrolerów w zależności od URI.
.controller ('RouteController', funkcja ($ scope, $ routeParams, $ controller, $ filter) {var prefix = $ filter ('prefixController') ($ routeParams.param1) + '' + $ filter ('prefixController') ( $ routeParams.param2); $ kontroler (przedrostek + 'Kontroler', {$zakres: $zakres});}) Kod kontrolera trasy
Ten kontroler z kolei zależy od filtra, tworzymy nowy plik w katalogu js o nazwie filters.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 (tekst)) {return '';} else if (p_string.test (text)) {return text.charAt (0) .toUpperCase () + ((text.length> 1)? text.slice (1): '');} else {return '';}};}); Kod Filters.js
Wstrzykujemy filtr w app.js
routeapp.filtryImportujemy skrypt filters.js do index.html umieszczonego przed app.js
Musimy zmienić ostatni szczegół w Kontroler użytkownika Tak UserDeleteController. Jak teraz używamy parametrów: param1,: param2,: param3; parametr: userID nie będzie już dostępny. Co musimy zmienić w kontrolerach. Dla UserController użyj param2, a dla UserDeleteController param3
Kod Kontroler użytkownika:
var identyfikator użytkownika = $ routeParams.param2;Kod UserDeleteController:
var identyfikator użytkownika = $ routeParams.param3;Sfinalizowaliśmy nasz dynamiczny router. Teraz nie musimy się już martwić o tworzenie nowych tras do naszej witryny, ponieważ wszystko jest kontrolowane przez naszą Kontroler routera a nową konfigurację $routerProvider możesz przetestować, tworząc nowe szablony i przypisując jego trasy i kontrolery. Na koniec możemy stworzyć nowy szablon, który pomoże nam wykryć, kiedy próbujemy uzyskać dostęp do adresu URL, którego nie ma w naszej witrynie. Możemy użyć szablonu 404. Stworzymy go w tpl o nazwie 404.html
Kod dla 404.html
404Kontroler kontrolera
.kontroler ('404Controller', funkcja () {})Abyśmy mogli wykryć, gdy próbujemy uzyskać dostęp do niedostępnej trasy, możemy użyć angularjs słuchacz kto się tym zajmuje. Zamieniamy kod Główny Kontroler przez:
.controller ('MainController', function (zakres $, lokalizacja $) {console.log ('AngularJS'); zakres $. $ on ('$ routeChangeError', function (next, current) {$ location.path ('/ 404 ');});}) Wystarczy uruchomić aplikację i umieścić adres URL niedostępny na naszej stronie, na przykład http://localhost:300…nieznany-url. Aplikacja natychmiast przekieruje do / 404
Możesz pobierz ten samouczek demo tutaj:
routeapp.zip 344.9K 259 pobrań
