build single page application using angularjs
Zbuduj jednostronicowe SPA aplikacji za pomocą AngularJS:
Wszystko, co musimy wiedzieć o AngularJS zostało wyjaśnione w naszym poprzednim samouczku. W tym samouczku dowiemy się więcej o tworzeniu aplikacji jednostronicowej przy użyciu AngularJS.
Czy znasz Netflix? Czy kiedykolwiek odwiedziłeś jego stronę internetową?
Jeśli Twoja odpowiedź brzmi „Tak”, to wiesz, jak wygląda aplikacja jednostronicowa! Poznaj nasze Kompletny przewodnik po AngularJS aby uzyskać jasną wiedzę o AngularJS.
Pozwól mi rozwinąć!
Netflix wykorzystuje AngularJS w swojej strukturze po stronie klienta, aby wzbogacić funkcje użytkownika w swoich aplikacjach internetowych.
Uczynili swój interfejs użytkownika bardzo prostym, tworząc plik SPA (Aplikacja jednostronicowa). Oznacza to, że nawigacja w serwisie Netflix odbywa się bez odświeżania całej strony.
Czego się nauczysz:
- Zalety aplikacji jednostronicowych
- Po co tworzyć SPA za pomocą AngularJS?
- Jak opracować aplikację jednostronicową za pomocą AngularJS?
- Wniosek
- rekomendowane lektury
Zalety aplikacji jednostronicowych
Poniżej podano kilka zalet aplikacji jednostronicowych.
- Lepsze wrażenia użytkownika.
- Strony internetowe odświeżają się szybciej, ponieważ używana jest mniejsza przepustowość.
- Wdrożenie aplikacji - index.html, pakiet CSS i pakiet javascript - do produkcji staje się łatwiejsze.
- Dzielenie kodu można przeprowadzić w celu podzielenia pakietów na wiele części.
Po co tworzyć SPA za pomocą AngularJS?
Obecnie na rynku dostępnych jest wiele aplikacji javascript, takich jak ember.js, backbone.js itp. Jednak nadal wiele aplikacji internetowych wykorzystuje AngularJS do swojego rozwoju, aby tworzyć SPA.
Poniżej podano kilka powodów, dla których AngularJS jest wyraźnym zwycięzcą:
1) Nie uzależniaj
char na string c ++
W przeciwieństwie do AngularJS, backbone.js ma zależności od underscore.js i jQuery. Natomiast ember JS ma zależności od kierownicy i jQuery.
# 2) Routing
Nawigacja między stronami internetowymi zbudowanymi przy użyciu AngularJS jest bardzo prosta w porównaniu do stron zbudowanych przy użyciu innych frameworków javascript. Dyrektywy używane w AngularJS są lekkie, stąd wskaźniki wydajności AngularJS są znaczące.
# 3) Testowanie
Gdy aplikacja zostanie zbudowana przy użyciu AngularJS, można przeprowadzić automatyczne testy w celu zapewnienia jakości przy użyciu selenu. Jest to jedna z niesamowitych funkcji aplikacji zbudowanych przy użyciu programowania AngularJS.
jak pisać przypadki testowe w qa
[źródło obrazu edureka.co]
# 4) Wiązanie danych
AngularJS obsługuje dwukierunkowe wiązanie danych, tj. Za każdym razem, gdy model jest aktualizowany, widok jest również aktualizowany, ponieważ AngularJS jest zgodny z architekturą MVC.
W związku z tym dane mogą być przeglądane przez użytkownika na podstawie jego preferencji.
# 5) Wsparcie dla przeglądarki
AngularJS jest obsługiwany przez większość przeglądarek, w tym IE w wersji 9 i nowszych. Może również przystosować się do pracy na telefonach komórkowych, tabletach i laptopach.
# 6) Zwinność
AngularJS obsługuje elastyczność, co oznacza, że może zaspokajać nowe żądania ze strony firm, gdy pojawiają się one w konkurencyjnym środowisku pracy. Kontrolery można zaimplementować w architekturze MVC do obsługi tych żądań.
AngularJS zawiera około 30000 modułów, które są łatwo dostępne do szybkiego tworzenia aplikacji. Gdy programista chce dostosować istniejącą aplikację, może skorzystać z modułów, które są już dostępne i ulepszyć kod, zamiast budować całą aplikację od podstaw.
Co więcej, współautorów i ekspertów w AngularJS jest wielu, dzięki czemu otrzymasz szybkie odpowiedzi na wszelkie pytania, które publikujesz na forach dyskusyjnych
Jak opracować aplikację jednostronicową za pomocą AngularJS?
Poniżej wymieniono różne etapy tworzenia SPA przy użyciu AngularJS.
Krok 1: Utwórz moduł
czym jest testowanie funkcjonalne na przykładzie
Wszyscy wiemy, że AngularJS jest zgodny z architekturą MVC. Dlatego każda aplikacja AngularJS zawiera moduł składający się z kontrolerów, usług itp.
var app = angular.module('myApp', []);
Krok 2: Zdefiniuj prosty kontroler
app.controller('FirstController', function($scope) { $scope.message = 'Hello from FirstController'; });
Krok 3: Dołącz skrypt AngularJS do kodu HTML
Określ moduł (utworzony w kroku 1) w ng-app atrybut i kontroler (zdefiniowany w kroku 2) w kontroler ng atrybut.
{{message}}
First Second Third
(Gdy Angular wykryje szablony zdefiniowane przez dyrektywy ng-template, załaduje swoją zawartość do pamięci podręcznej szablonów i nie wykona żądania Ajax w celu pobrania ich zawartości).
Po uruchomieniu kodu HTML na hoście lokalnym wyświetlana jest następująca strona.
Zwróć uwagę, że hiperłącza Pierwszy drugi trzeci na stronie znajdują się routery i po ich kliknięciu następuje nawigacja do odpowiednich stron internetowych bez odświeżania.
Otóż to! Mam nadzieję, że możesz stworzyć proste SPA, jak pokazano na tym blogu. Po pomyślnym uzyskaniu wyników możesz wypróbować złożone SPA w tych samych wierszach.
Wniosek
Aplikacje jednostronicowe są obecnie bardzo popularne, a marki takie jak Netflix decydują się na nie.
Jeśli tworzysz SPA, to AngularJS jest oczywistym wyborem. Jednak nowa wersja AngularJS, czyli Angular oferuje więcej funkcjonalności. W przeciwnym razie istnieją różne technologie, takie jak tworzenie aplikacji Node JS itp.
Zaglądajcie do naszego nadchodzącego samouczka, aby dowiedzieć się więcej o aktualizacji wersji Angular!
POPRZEDNIA samouczek | NEXT Tutorial
rekomendowane lektury
- Różnica między wersjami kątowymi: Angular kontra AngularJS
- Dyrektywa AngularJS z naszym pierwszym przykładem AngularJS
- Dogłębne samouczki dotyczące Eclipse dla początkujących
- Samouczek AWS CodeBuild: wyodrębnianie kodu z kompilacji Maven
- Samouczek AngularJS dla początkujących (z instrukcją instalacji)
- AWS Elastic Beanstalk Tutorial do wdrażania aplikacji sieci Web .NET
- Jak testować kolejkę przesyłania komunikatów aplikacji: samouczek dotyczący produktu IBM WebSphere MQ Intro
- Korzystanie z narzędzia Maven Build Automation Tool i Maven Project Setup dla Selenium - samouczek Selenium # 24