Преглед на AngularJS Architecture
AngularJS е рамка, предназначена да разшири възможностите на HTML от простия статичен език до по-динамичен клиентски интуитивен език. AngularJS е 100% JavaScript. Помага да напишете по-управляван клиентски код. Тя дава на разработчика повече права за контрол на кода и манипулации на данни от самата страна на клиента. За да постигне това, AngularJS има подходящ дизайн-модел. Това се нарича MVC модел. Нека разберем повече за това в следващия раздел. В тази тема ще научим за AngularJS Architecture .
Архитектурата
AngularJS е изграден по модела на MVC дизайн. Принципите, стоящи зад MVC архитектурата, са много добре включени в AngularJS. Човек може да е познал MVC като стабилна архитектура за много езици от страна на сървъра. AngularJS обединява MVC модела и от страна на клиента.
MVC - модел, изглед, контролер
MVC моделът означава модел на контролера View View Model.
-
Модел
Това е най-ниското ниво на архитектурата. Той е отговорен за съхраняване и поддържане на данните за приложението. Данните се поддържат през целия жизнен цикъл на страницата, а понякога дори и между страниците. Моделът се актуализира въз основа на инструкциите, получени от контролера.
-
изглед
Изглед е лицевата страна на приложението. Това е презентационният слой на архитектурата, отговорен за показването на данните на потребителя. Той съдържа пълния код за UI страниците на всеки съвместим с браузъра език, обикновено HTML. Изгледът се задейства от съответния контролер. Изглед изпраща заявки до неговия контролер въз основа на взаимодействието на потребителя с приложението. След това контролерът възстановява изгледа въз основа на отговора, получен от сървъра.
-
контрольор
Контролер е мозъкът за обработка зад изгледа и модела. Той взема решенията за генериране, регенериране или унищожаване на изгледа и модела. Всички бизнес операции и логика на кода се записват вътре в контролера. (Някои разработчици предпочитат да пишат бизнес логиката в самия Модел). Контролерът е отговорен и за изпращане на заявки до сървъра и получаване на отговор. След това актуализира изгледа и модела въз основа на отговора. Накратко, контролерът контролира всичко.
MVC архитектурата може да бъде представена графично чрез изображението по-долу.
MVC е здрав, тъй като се основава на принципа за разработка на софтуер на Separation of Concerns. Има няколко контролера, които работят с конкретни набори от данни и управляват съответните изгледи и модели. Логиката на приложението се отделя от слоя на потребителския интерфейс.
MVC в AngularJS
Това беше всичко за MVC и неговите принципи. Как се прилагат тези принципи в AngularJS? Нека разберем.
- Обхват - Обхватът е моделът, който съхранява данните от приложението. Променливите на обхвата са прикрепени към DOM и до свойствата на променливите се осъществява достъп чрез свързване.
- HTML с обвързване на данни - изгледът в AngularJS не е обикновен HTML. Това е свързан с данни HTML. Обвързването на данни помага за изобразяването на динамични данни в HTML тагове. По този начин моделът редовно актуализира DOM.
- ngController - Директивата ngController е отговорна за сътрудничеството между модела, изгледа и бизнес логиката. Класът на контролера, определен от директивата ngController, контролира обхвата и изгледа.
Концептуален преглед
Добре, така че сега разбираме, че AngularJS е изграден върху MVC архитектурата. Това ли е всичко? Няма ли нищо друго в игра? Разбира се, има.
Има няколко важни концепции, които човек трябва да разбере, за да разбере поведението на AngularJS приложенията. Нека ги разберем.
-
Templates
Шаблоните са HTML елементи, заедно със специфични за AngularJS елементи и атрибути. Динамичността в приложенията на AngularJS се постига чрез комбиниране на шаблона с данни от модела и контролера.
-
директиви
Директивите са атрибути или елементи, които представляват DOM компонент за многократна употреба. Директивите директно манипулират основния HTML DOM за визуализиране на динамичния изглед. Това освобождава програмиста да се тревожи за родните HTML елементи и атрибути.
-
Двупосочно обвързване на данни
AngularJS автоматично синхронизира данните между модела и изгледа чрез свързване на данни. Моделът се счита за единствен източник на истина за вашите данни за приложението. Изгледът е проекция на модела по всяко време. Веднага щом моделът се промени, изгледът се променя и обратно. Това се обозначава като двупосочно обвързване. Постига се чрез компилиране на живо на шаблона на браузъра.
-
Прекарването
AngularJS приложенията са едностранични приложения (SPA), много се фокусира върху маршрутизирането между страниците. AngularJS има здрав механизъм за маршрутизиране, който прави съвпадение на URL адреси от списъка с маршрути, посочени в рутера, свързани с компонента. Това означава, че всеки път, когато браузърът поиска URL, се приписва асоцииран компонент, а не цяла страница.
-
Услуги
Контролерът е свързан с изглед. Това означава, че е добра практика да се пише само онзи код в контролера, който е логично полезен за неговия изглед. Независимата логика на изгледа може да бъде преместена другаде, така че да може да бъде използвана и от други контролери.
Тук идват Услугите в действие. Услугите отделят бизнес използваната логика за многократна употреба от специфична логика за преглед. След това специфичната логика се намира вътре в конкретните контролери, докато общата бизнес логика се споделя от всички контролери.
Като общо правило за палеца, кодът за достъп до задните данни се записва и в услугите.
-
Инжектиране на зависимостта
След като сме преместили логиката, независима от изгледа, на споделено място, как да контролираме разрешенията за достъп до споделените услуги? Това става чрез инжектиране на зависимост (DI). Dependency Injection е модел на софтуерен дизайн, който се занимава с това как се създават обекти и как се овладяват зависимостите си. Всичко в AngularJS, от директиви до контролери до услуги и почти всичко, се свързва чрез DI.
Забавен факт на AngularJS Architecture
AngularJS беше кръстен като AngularJS заради ъгловите скоби в HTML таговете. Проектът е създаден, за да направи HTML по-динамичен и удобен за данни и затова разработчиците решиха да го кръстят след ъглови скоби в HTML.
Заключение - AngularJS Архитектура
Статията обхваща всички важни концепции на AngularJS архитектурата. Това е добро начало за разбиране на работата на различни елементи от вашето приложение AngularJS. Следващата стъпка е да се създаде напълно функционално мултиконтролер AngularJS приложение, което извлича данни и от бекенд. Това ще ви осигури добра практическа практика по концепциите на AngularJS.
Препоръчителни статии
Това е ръководство за AngularJS Architecture. Тук обсъждаме архитектурата, MVC в angularjs и концептуален преглед. Можете да разгледате и другите ни предложени статии, за да научите повече -
- Кариера в AngularJS
- AngularJS Въпроси за интервю
- Какво е Backbone.js?
- Софтуер за обработка на данни