Меню

Директива AngularJS з нашим першим прикладом AngularJS

angularjs directive with our first angularjs example

Спробуйте Наш Інструмент Для Усунення Проблем

Директива AngularJS з першим прикладом AngularJS:

У нас був короткий вступ до AngularJS у нашому попередньому уроці. Цей підручник пояснить вам важливі факти, які ви повинні знати про AngularJS.

AngularJS - це фреймворк веб-додатків з відкритим кодом, заснований на JavaScript.

Він підтримується корпорацією Google та великим співтовариством. AngularJS - це відповідь на різні недоліки, що виникають при формулюванні односторінкових додатків.

c ++ невизначене посилання на функцію

Прочитайте наш Вся серія AngularJS для поглиблених знань щодо концепції AngularJS.

Директива та приклад AngularJS

Структура програми AngularJS виступає в якості шаблону і може зменшити проблеми, з якими стикаються під час розробки веб-програм.

Що ви дізнаєтесь:

Огляд AngularJS

AngularJS був випущений Google 20-гогоЖовтень 2010 р., І сьогодні він став значущим фреймворком для різних односторінкових інтерфейсних програм.

Ось чому AngularJS тримається на своїх позиціях, незважаючи на розвиток технологій шаленими темпами. Міжплатформна інтерфейсна система робить її також більш ефективною.

AngularJS доповнює та виграє Apache Cordova, яка є фреймворком, який використовується для міжплатформенних мобільних додатків. Він має бачення покращення досвіду та спрощення тестування та розробки веб-програм та забезпечує надійну структуру для їх розробки додатків AngularJS.

Навіщо використовувати AngularJS?

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

  1. Прив'язка даних: Платформа забезпечує автоматичну синхронізацію даних між моделлю та вмістом перегляду, і в результаті це значно економить ваш час та зусилля.
  2. Контролер: Це JavaScript, який прив’язаний до певної сфери.
  3. Послуги: AngularJS має безліч вбудованих сервісів. Наприклад, $ https
  4. Фільтри: Це допомагає вибрати підмножину елементів з масиву та повернути його до нового масиву.
  5. Директиви: Вони є маркерами на елементах DOM, таких як атрибути, елементи CSS тощо. Вони можуть використовуватися як власні теги HTML.
  6. Маршрут: Допомагає у створенні односторінкових додатків. Це вказано в URL-адресі після знака # і дозволяє створювати різні URL-адреси для різного вмісту у вашій програмі.
  7. MVC: Підставки для моделі, вигляду та контролера. Це шаблон дизайну і використовується для розподілу програми на різні частини, тобто Model, View та Controller.
  8. Глибоке зв’язування: Ця функція фреймворку додатків допомагає кодувати стан програми в URL-адресі для закладок. Пізніше додаток також можна відновити за URL-адресою в тому ж стані.
  9. Ін'єкція залежності: AngularJS також має вбудовану підсистему введення залежностей, яка може бути корисною для розробника, щоб зробити процес розробки та тестування простішим, згуртованішим та зрозумілішим.
  10. Сфера застосування: Це об’єкти, які виконують роль клею між контролером та видом.

Як користуватися AngularJS?

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

Підручники про те, як користуватися AngularJS, не є неприємно складними, і я справді також знайшов їх досить простими. Ви можете скористатися двосторонньою системою прив'язки, можливостями шаблонування, модулярізацією, системою введення залежностей, функцією обробки AJAX та іншими функціями цього фреймворку.

Перед початком кодування ви повинні знати про концепцію MVC (Model, View та Controller), сценарій 'Hello World' та різні особливості AngularJS.

Директиви AngularJS

AngularJS надає вам велику кількість директиви які дозволяють асоціювати різні елементи HTML з даними додатків. Вони є основними атрибутами, які починаються з ключового слова нг- .

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

ng-app -

Він є початковою точкою програми AngularJS і повинен бути доданий до будь-якого елемента, що огортає іншу частину сторінки, як елемент частини тіла. AngularJS шукає цей аспект щоразу, коли сторінка завантажується і прагне автоматично оцінювати всі різні директиви в коді.

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

# 1) ng-app :Це використовується для запуску програми AngularJS. Коли веб-сторінка, що містить програму AngularJS, завантажується, вона автоматично завантажує програму, визначаючи кореневий елемент. У вашому HTML-коді повинна використовуватися лише одна директива ng-app.

Однак якщо в HTML-коді знайдено кілька директив ng-app, буде використано перший вигляд.

Синтаксис:

рекурсивне злиття сортування c ++
{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.

окуляри для віртуальної реальності для xbox one

AngularJS також дозволяє визначати власні директиви. Вони використовуються для розширення функціональних можливостей HTML і визначаються за допомогою функції “директива”. Вони просто замінюють елемент, для якого вони активовані.

Шпаргалка AngularJS для мене врятувала життя. Існує ряд інших рекомендацій, які ви можете перевірити на шпаргалці. Ви навіть можете навчитися будувати власні директиви за допомогою AngularJS. Я знайшов усі інструкції та вказівки платформи AngularJS на шпаргалці для спрощення багатьох питань.

Приклад 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'; });

У наведеному вище прикладі скрипт представляє JavaScript AngularJS.

Ви були б здивовані, дізнавшись, скільки додатків, якими ви користуєтеся щодня, було розроблено на платформі AngularJS.

Ось кілька імен:

  • Опікун
  • PayPal
  • jetBlue
  • Лего
  • Upwork
  • Netflix
  • Фрілансер
  • iStock

З наведених вище назв видно, якої висоти ви можете досягти, навчившись використовувати цей фреймворк. Ці веб-сайти знаходяться на вершині своєї гри, і величезна частина їхнього успіху, безумовно, спрямовується на ефективність сайтів лише тому, що вони були розроблені на AngularJS.

Висновок

Якщо ви хочете створювати та розробляти односторінкові програми для мобільних або навіть веб-сайтів, наприклад, як я був колись, - тоді не дивіться далі.

AngularJS - це універсальний магазин для вас, оскільки цей сайт допомагає та робить розробку додатків набагато зручнішою та згуртованішою. Це не просто чудово для початківців, але, глибше заглибившись у нього, ви схильні вчитися з досвідом та розробляти чудові програми.

Тим часом, у разі оновлення до новіших версій, вам не потрібно докладати багато зусиль. Просто вивчивши кілька нових команд і зрозумівши нові налаштування, ви також можете розпочати розробку додатків у нових версіях.

Ознайомтеся з нашим майбутнім посібником, щоб дізнатися більше про розробку веб-додатків на одній сторінці за допомогою AngularJS.

НАЗАД Підручник | НАСТУПНИЙ підручник

Рекомендована література

^