Ръководство за начинаещи за създаване на уеб приложения с AngularJS

начална страница на angularjs

Качете се на борда с рамката за уеб приложения на Google

Ако сте професионален разработчик на JavaScript, вероятно сте чували за Ember.js (рамка на JavaScript с отворен код) и Backbone.js (библиотека на JavaScript с RESTful JSON интерфейс). Но ако не сте запознати AngularJS все пак ще пропуснете някои от много завладяващите му функции, които наистина могат да подобрят вашия HTML за уеб приложения.

Тук ще ви дадем вкус на AngularJS, супер героична JavaScript MVW рамка, включително нейните открояващи се функции и процеса на започване с нея.



Надяваме се, че това не само ще ви помогне да разработите добре проектирани и поддържани богати уеб приложения, но и ще ви даде солидни причини да изберете AngularJS за предстоящите си проекти. Нека да започнем!

01. Какво е AngularJS?

AngularJS, създадена от Google, е рамка за уеб приложения с отворен код, която е създадена, за да улесни както разработката отпред, така и тестването на уеб разработчиците. Основната цел на AngularJS е да удължи уеб приложенията с възможност за MVC (Model-view-controller). Това е клиентска JavaScript MVC / MVVM рамка, която е напълно разширяема, работи без библиотечни зависимости и работи чудесно и с други библиотеки. Можете дори да промените или замените всяка негова функция, за да отговаря на вашите специфични нужди.

AngularJS е разработен през 2009 г. от Адам Абронс и Мироко Хеверим, които по това време са били инженери на Google. Както бе споменато на официалния уебсайт, това е „структурна рамка за динамични уеб приложения“, която е най-подходяща за създаване на уеб страници с една страница, които изискват само JavaScript, CSS и HTML от страна на клиента.

Той ви позволява да използвате HTML като език на вашия шаблон и ви позволява да разширите синтаксиса на HTML, за да изразите компонентите на вашето уеб приложение чисто и кратко. AngularJS ви помага да структурирате по-добре вашия JavaScript код и улеснява тестването, обучавайки браузъра как да използва инжектирането на зависимости за всяка сървърна технология.

Как да използваме AngularJS

Първите стъпки с AngularJS са доста лесни. Можете да имате просто приложение Angular само за пет минути, като добавите няколко атрибута към вашите HTML скриптове. Това са:

1. Включете директивата 'ng-app' в маркера. Това ще накара AngularJS да се изпълнява на страницата, определяйки страницата като приложение на Angular.

2. Поставете ъгловия маркер в долната част на страницата си, където той завършва.

3. Добавете обикновен HTML. HTML атрибутите се използват за достъп до директивите AngularJS, докато оценката на изразите се извършва с двойна скоба нотация.

Today's tasks

  • {{task.name}}

Тук директивата ng-controller дефинира пространство от имена, където можете да поставите вашия Angular JS за контрол на данните и оценка на изразите във вашия HTML. Докато директивата ng-repeat е обект на Angular repeater, който изисква от Angular да създаде елементи от списъка, стига да имате задачи за показване.

Докато повечето рамки днес са само пакет от съществуващи инструменти, AngularJS е рамка от следващо поколение, имаща някои много завладяващи функции, които са полезни не само за разработчиците, но също толкова полезни за дизайнерите. Следват някои невероятни функции на AngularJS, които ще помогнат на разработчиците да направят своите бъдещи уеб приложения страхотни ...

Директиви

Директивите са една от най-мощните и завладяващи характеристики на AngularJS. Те ви позволяват да разширите своя HTML и се използват от AngularJS, за да включите действието му в страницата. Те ви позволяват да посочите персонализирани и многократно използвани HTML тагове, които могат да се използват за манипулиране на DOM атрибути и модериране на поведението на конкретни елементи. Всички директиви са предшествани от ng-, проектирани да бъдат самостоятелни елементи, отделни от вашето MVC приложение, и поставени в HTML атрибути.



Някои от забележителните директиви на AngularJS са:

  • ng-app: Тази директива казва на Angular къде да се активира. За да дефинирате страница като Angular приложение, трябва да използвате прост код:.
  • ng-bind: Тази директива казва на Angular да променя текстовото съдържание на HTML елемент със стойността на дадения израз и да актуализира текста, тъй като стойността на този израз се променя.
  • ng-model: Той е много подобен на ng-bind, но обвързва изгледа с модела, който други директиви като select, textarea или input изискват.
  • ng-class: Позволява динамично зареждане на атрибутите на класа.
  • ng-controller: Тази директива ви позволява да зададете клас на JavaScript контролер за оценка на HTML изрази.
  • ng-repeat: Той безпроблемно преглежда елемент, към който е зададена дадената променлива на цикъл, в колекция.
  • ng-hide и ng-show: Използвайки стойността на булев израз, тази директива решава дали елементът ще се показва или не.
  • ngIf: Това е основна директива if, която позволява повторно вмъкване на клонинг на компилирания елемент в DOM, ако условията са верни. Ако условието е невярно, то премахва елемента от DOM.

Следва пример за директива, която слуша събитие и последователно актуализира неговия обхват $.

myModule.directive('myComponent', function(mySharedService) { return { restrict: 'E', controller: function($scope, $attrs, mySharedService) { $scope.$on('handleBroadcast', function() { $scope.message = 'Directive: ' + mySharedService.message; }); }, replace: true, template: '' }; });

Тази персонализирана директива може да се използва, както следва:

Двупосочно свързване на данни

Обвързването на данни е може би най-доминиращата и забележителна характеристика на AngularJS. Той спестява на разработчиците да пишат значително количество код, като намалява голяма част от тежестта върху сървъра. В типично уеб приложение 80% от кодовата база е посветено на манипулиране, обхождане и слушане на DOM. Обвързването на данни прави този код невидим, така че можете да се съсредоточите върху други важни неща от вашето приложение.

Традиционно повечето системи за шаблони имат еднопосочно свързване на данни: те обединяват компонентите на модел и шаблон в изглед. След обединяването промените в модела не се отразяват автоматично в изгледа. За да отрази тези промени, разработчикът трябва ръчно да манипулира DOM елементите и атрибутите. Този процес става по-сложен и тромав, когато потребителят прави промени в изгледа. Тъй като тогава разработчикът трябва да интерпретира взаимодействията, да ги обедини в модела и да актуализира изгледа.

Диаграма за еднопосочно свързване на данни

Снимката е предоставена от http://docs.angularjs.org

За разлика от това, AngularJS извършва свързването на данни по по-добър и различен начин, като обработва синхронизирането на данни между модела и DOM и обратно.

Диаграма за двупосочно свързване на данни

Снимката е предоставена от http://docs.angularjs.org

Следва прост пример, обясняващ обвързването на входна стойност с

етикет.

Name:

Hello, {{yourName}}!

Инжектиране на зависимост

AngularJS има вградена инжекторна подсистема, която улеснява разработчиците да разработват, разбират и тестват приложения. Инжектирането на зависимости в AngularJS е отговорно за създаването на компоненти, справяне с начина, по който те се докопат до техните зависимости, и предоставянето им на разположение на други компоненти при поискване.

Използвайки инжектиране на зависимост, AngularJS предоставя традиционни услуги от страна на сървъра към уеб приложенията от страна на клиента, което води до намалена тежест върху бекенда и улеснява уеб приложението.

Ако искате да получите достъп до основните услуги на AngularJS, тогава трябва да добавите определена услуга като параметър. AngularJS автоматично ще забележи, че искате да използвате тази услуга, и ще направи екземпляр достъпен за вас.



function EditCtrl($scope, $location, $routeParams) { // Write something here... }

В допълнение към това можете да дефинирате свои собствени услуги и да ги направите достъпни за инжектиране.

angular. module('MyServiceModule', []). factory('notify', ['$window', function (win) { return function (msg) { win.alert(msg); }; }]); function myController(scope, notifyService) { scope.callNotify = function (msg) { notifyService(msg); }; } myController.$inject = ['$scope', 'notify'];

Шаблони

В AngularJS се пише шаблон с HTML, който съдържа специфични за Angular атрибути и елементи. Чрез комбиниране на шаблона с информация от контролера и модела, AngularJS визуализира динамичния изглед в браузърите.

По-долу са ъглови елементи и атрибути, които могат да се използват:

  • Филтър: Форматирането на данни за показване се извършва от този елемент.
  • Контроли на формуляра: Използва се за проверка на въведеното от потребителя.
  • Маркировка: За обвързване на изрази с елементи, като се използва двойната фигурна скоба {{}}.
  • Директива: Елемент или атрибут, който прави повторно използваем DOM компонент или удължава съществуващ DOM елемент.

Даденият по-долу код показва шаблон с директиви и маркиране:

{{buttonText}}

В типично приложение шаблонът има CSS, HTML и Angular директиви в един HTML файл (обикновено index.html).

Тестване

Тъй като JavaScript е динамичен и се интерпретира с голяма сила на изразяване, но не отнема почти никаква помощ от компилатора. Следователно екипът на AngularJS добре разбира, че всеки код на JavaScript трябва да премине с набор от тежки тестове. Така че те са проектирали AngularJS от самото начало, за да бъдат тествани, правейки тестването на вашите уеб приложения възможно най-лесно.

AngularJS се възползва в пълна степен от инжектирането на зависимости, идва в комплект с макети и насърчава разделянето на поведението и изгледа. За тестване от край до край, AngularJS има пълен тестов бегач, наречен Protractor, който разбира вътрешната работа на AngularJS за премахване на нестабилността на теста и симулира взаимодействието на потребителите с вашето приложение.

Друг вид тест в AngularJS е Unit test, чрез който можете да тествате отделни единици код. Освен това екипът на Angular създаде и разширение за Chrome, наречено AngularJS Batarang , което позволява на разработчиците лесно да откриват тесни места в производителността и им позволява да отстраняват грешки в приложенията си в браузъра.

Ajeet Yadav е професионален уеб разработчик, свързан с wordpressintegration.com , известна компания за уеб разработка, която предоставя висококачествена услуга за преобразуване на теми / шаблони на Photoshop в WordPress. последвам @Wordpress_INT в Twitter.