Меню

Директива AngularJS с нашия първи пример AngularJS

angularjs directive with our first angularjs example

Опитайте Нашия Инструмент За Премахване На Проблемите

Директива AngularJS с първи AngularJS Пример:

Имахме кратко въведение в AngularJS в предишния ни урок. Този урок ще ви обясни важните факти, които трябва да знаете за AngularJS.

Ъглов JS е рамка за уеб приложения с отворен код, базирана на JavaScript.

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

Прочетете нашите Цяла серия AngularJS за задълбочени познания по концепцията AngularJS.

кой е най-добрият изтеглящ музика за компютър

Директива и пример за AngularJS

Приложната рамка на AngularJS действа като шаблон и може да намали предизвикателствата, пред които е изправено по време на разработването на уеб приложения.

Какво ще научите:

Преглед на AngularJS

AngularJS беше пуснат от Google на 20тиОктомври 2010 г. и днес той се превърна в значителна рамка за различни интерфейсни приложения на една страница.

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

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

Защо да използвам AngularJS?

По-долу са изброени различните функции и причини, поради които AngularJS трябва да се използва при разработването на уеб приложения.

  1. Обвързване на данни: Платформата осигурява автоматично синхронизиране на данни между модела и съдържанието на изгледа и в резултат спестява както вашето време, така и усилията.
  2. Контролер: Това са JavaScript, който е обвързан с определен обхват.
  3. Услуги: AngularJS има много вградени услуги. E.g $ https
  4. Филтри: Това помага при избора на подмножество елементи от масив и го връща в нов масив.
  5. Директиви: Те са маркери на DOM елементи като атрибути, CSS елементи и др. Те могат да се използват като персонализирани тагове на HTML.
  6. Маршрут: Помага при създаването на приложения на една страница. Той е посочен в URL след знака # и ви позволява да създавате различни URL адреси за различно съдържание във вашето приложение.
  7. MVC: Стойки за модел, изглед и контролер. Това е модел на дизайн и се използва за разделяне на приложението на различни части, т.е.модел, изглед и контролер.
  8. Дълбоко свързване: Тази функция на рамката на приложението ви помага да кодирате състоянието на приложението в URL за маркиране. По-късно приложението също може да бъде възстановено от URL адреса в същото състояние.
  9. Инжектиране на зависимост: AngularJS също има вградена подсистема за инжектиране на зависимости, която може да бъде полезна за разработчика да направи процеса на разработване и тестване по-лесен, сплотен и ясен.
  10. Обхват: Това са обектите, които действат като лепило между контролера и изгледа.

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

Лично аз вярвам, че едва ли има по-добра фреймворк среда за разработване на уеб приложения, която да се предлага днес на пазара от AngularJS.

Уроците за това как да използвате AngularJS не са разочароващо сложни и аз наистина ги намерих доста лесни за следване. Можете да се възползвате от двупосочна система за свързване, възможности за шаблониране, модуларизация, система за инжектиране на зависимости, функция AJAX Handling и други функции на тази рамка.

Преди започване на кодирането, трябва да знаете за концепцията MVC (Model, View и Controller), скрипта „Hello World” и различните функции на AngularJS.

Директиви AngularJS

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

Най-важната директива, която трябва да включите на която и да е страница, докато използвате AngularJS, е дадена по-долу.

ng-app -

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

Директивите на AngularJS включват:

# 1) ng-app :Това се използва за стартиране на приложението AngularJS. Когато се зареди уеб страницата, съдържаща приложението AngularJS, тя автоматично зарежда приложението, като дефинира основния елемент. Във вашия HTML код трябва да се използва само една директива ng-app.

Ако обаче в HTML кода бъдат открити повече от една директива на ng-app, тогава ще се използва първото появяване.

Синтаксис:

{body of the HTML code}

# 2) на топлина :Това се използва за инициализиране на приложението.

Той предоставя набор от стойности, които трябва да бъдат свързани с променливи за инициализиране на целите. Тази директива не се използва често, тъй като инициализацията на променливи обикновено се случва чрез специфични функции в рамките на проекта.

Синтаксис:

# 3) ng-контролер: Използва се, когато трябва да се извърши инициализация на променливи въз основа на функция; т.е. всяка от променливите трябва да бъде инициализирана въз основа на функционалната логика. AngularJS извиква функцията, посочена в директивата ng-controller, с обект.

Синтаксис:

app.controller(‘name of your function’,function($object){ Body of the controller/function});

# 4) ng-модел :Това се използва за свързване на стойностите на AngularJS с контролите, предоставени от приложението. За да бъдем конкретни, данните, извлечени от входа чрез контролера и модела, ще бъдат обвързани с изгледа (w.r.t. MVC модел), който ще бъде представен на потребителя.

Синтаксис:

Your Variable to be binded : var app = angular.module('myApp', ('ngAnimate'));

ng-show и ng-hide: Тези команди скриват и показват елементите, което се постига чрез задаване на CSS стил на показване.

AngularJS също ви позволява да дефинирате потребителски директиви. Те се използват за разширяване на функционалността на HTML и се дефинират с помощта на функцията “директива”. Те просто заместват елемента, за който са активирани.

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

Пример за AngularJS

Един прост пример AngularJS може да бъде написан по следния начин:

Трябва да създадете HTML файл, Например , angularjsexample.html както е показано по-долу.

Welcome {{helloTo.title}} to the world of Tutorialspoint!

angular.module('myapp', ()) .controller('HelloController', function($scope) { $scope.helloTo = {}; $scope.helloTo.title = 'AngularJS'; });

В горния пример скриптът представлява AngularJS JavaScript.

Ще се изненадате да знаете колко приложения, които използвате ежедневно, са разработени в платформата AngularJS.

Ето няколко имена:

  • Пазителят
  • PayPal
  • jetBlue
  • Лего
  • Upwork
  • Нетфликс
  • На свободна практика
  • iStock

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

Заключение

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

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

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

Внимавайте за нашия предстоящ урок, за да научите повече за разработването на уеб страници с една страница с помощта на AngularJS

PREV Урок | СЛЕДВАЩ Урок

Препоръчително четене

^