build single page application using angularjs
Изградете SPA за приложения на една страница, използвайки AngularJS:
Всичко, което трябва да знаем за AngularJS беше обяснено в предишния ни урок. В този урок ще научим повече за разработването на приложение на една страница с помощта на AngularJS.
Знаете ли за Netflix? Посещавали ли сте някога уебсайта му?
Ако отговорът ви е „Да“, тогава знаете как изглежда приложението на една страница! Разгледайте нашите Пълно ръководство за AngularJS за да получите ясни познания за AngularJS.
Позволете ми да уточня!
Netflix използва AngularJS в своята клиентска рамка, за да обогати потребителските функционалности в техните уеб приложения.
Те са направили своя потребителски интерфейс много прост, като са го направили СПА (Приложение на една страница). Това означава, че навигацията в Netflix се извършва без опресняване на цялата страница.
Какво ще научите:
- Предимства на приложенията с една страница
- Защо да разработим SPA с помощта на AngularJS?
- Как да разработите приложение за една страница с помощта на AngularJS?
- Заключение
- Препоръчително четене
Предимства на приложенията с една страница
По-долу са дадени няколко предимства на приложенията с една страница.
- Подобрено потребителско изживяване.
- Уеб страниците се опресняват по-бързо, тъй като се използва по-малка честотна лента.
- Внедряването на приложението - index.html, CSS пакет и javascript пакет - в производството става по-лесно.
- Разделянето на кода може да се направи, за да се разделят сноповете на множество части.
Защо да разработим SPA с помощта на AngularJS?
В днешно време има много приложения на javascript, които се предлагат на пазара като ember.js, backbone.js и др. Но все пак много уеб приложения включват AngularJS в своята разработка за създаване на SPA.
По-долу са дадени няколко причини защо AngularJS е явен победител:
# 1) Не зависи
За разлика от AngularJS, backbone.js има зависимости от underscore.js и jQuery. Докато ember JS има зависимости от кормилото и jQuery.
безплатен редактор на скриптове за Windows
# 2) Маршрутизиране
Навигацията между уеб страници, изградени с помощта на AngularJS, е много проста в сравнение с тези, които са изградени с помощта на други рамки на javascript. Директивите, използвани в AngularJS, са леки, поради което показателите за производителност на AngularJS са забележими.
# 3) Тестване
След като приложението бъде изградено с помощта на AngularJS, може да се извърши автоматизирано тестване за осигуряване на качеството с помощта на селен. Това е една от страхотните характеристики на приложенията, създадени с помощта на разработката на AngularJS.
(източник на изображение edureka.co)
# 4) Обвързване на данни
AngularJS поддържа двупосочно свързване на данни, т.е., когато моделът се актуализира, изгледът също се актуализира, тъй като AngularJS следва MVC архитектура.
Следователно данните могат да бъдат преглеждани от потребителя въз основа на неговите предпочитания.
# 5) Поддръжка за браузъра
AngularJS се поддържа в повечето браузъри, включително IE версия 9 и по-нова. Той може да се адаптира и за работа на мобилни телефони, таблети и лаптопи.
# 6) ловкост
AngularJS поддържа гъвкавост, което означава, че може да отговори на нови заявки от бизнеса, когато и когато те излязат в конкурентна работна среда. Контролерите могат да бъдат внедрени в MVC архитектурата, за да обслужват тези заявки.
В AngularJS има около 30000 модула, които са лесно достъпни за бързо разработване на приложения. Когато разработчик иска да персонализира съществуващо приложение, той може да използва вече наличните модули и да ощипва кода, вместо да изгражда цялото приложение от нулата.
Освен това сътрудниците и експертите в AngularJS са много на брой, поради което ще получите бързи отговори на всички запитвания, които публикувате на дискусионни форуми
Как да разработите приложение за една страница с помощта на AngularJS?
По-долу са изброени различните стъпки, свързани с разработването на SPA с помощта на AngularJS.
Етап 1: Създайте модул
Всички знаем, че AngularJS следва архитектурата на MVC. Следователно всяко приложение на AngularJS съдържа модул, състоящ се от контролери, услуги и др.
var app = angular.module('myApp', ());
Стъпка 2: Определете обикновен контролер
app.controller('FirstController', function($scope) { $scope.message = 'Hello from FirstController'; });
Стъпка 3: Включете AngularJS скрипт в HTML код
Посочете модула (създаден в стъпка 1) в ng-app атрибут и контролера (дефиниран в стъпка 2) в ng-контролера атрибут.
{{message}}
First Second Third
(Когато Angular открие шаблоните, дефинирани от директивите ng-template, той ще зареди съдържанието си в кеша на шаблона и няма да изпълни заявката на Ajax, за да получи тяхното съдържание.)
След като HTML се изпълни на localhost, се показва следната страница.
Забележете, че хипервръзките Първо, второ, трето на страницата има рутери и когато щракнете върху тях, се осъществява навигация до съответните уеб страници, без да се опреснява.
Това е! Надявам се, че можете да създадете прост SPA, както е показано в този блог. След като получите резултата успешно, можете да изпробвате сложни SPA на същите линии.
Заключение
Приложенията с една страница са много популярни в наши дни, като марки като Netflix избират тях.
Ако разработвате SPA, тогава AngularJS е очевидният избор. Новата версия на AngularJS, т.е. Angular предлага повече функционалности. Освен това има различни технологии като разработка на приложения Node JS и т.н.
Следете нашия предстоящ урок, за да разгледате надстройването на ъгловата версия!
Препоръчително четене
- Разлика между ъгловите версии: Angular Vs AngularJS
- Директива AngularJS с нашия първи пример AngularJS
- Уроци за задълбочено затъмнение за начинаещи
- Урок за AWS CodeBuild: Извличане на код от Maven Build
- Урок за AngularJS за абсолютно начинаещи (с Ръководство за инсталиране)
- AWS Elastic Beanstalk Урок за внедряване на .NET уеб приложение
- Как да тествате опашката за съобщения на приложения: Урок за IBM WebSphere MQ Intro
- Използване на инструмента за автоматизация на изграждането на Maven и настройката на проекта на Maven за селен - селен урок # 24