Что такое AngularJS? - Изучите версии AngularJS с директивами

• Обзор AngularJS

Обзор AngularJS

В 2009 году в Brat Tech LLC разработчики Миско Хевери и Адам Абронс разработали фреймворк AngularJS, после чего произошла революция в разработке внешнего интерфейса и создании одностраничных приложений. AngularJS - это фреймворк javascript, который связывает элементы Html с объектами javascript. Привязка данных и внедрение зависимостей являются одними из ведущих функций AngularJ, которые экономят время при написании длинных кодов, облегчая работу разработчиков и браузеров. Как это будет достигнуто, будет подробно объяснено далее, но сейчас вы просто помните эти термины. В этой теме мы узнаем о версии AngularJS.

Версии AngularJS

AngularJS - это версия Angular 1.x, после чего разрабатывается Angular 2, который отличается от Angular 1.x. работает.

Почему версия AngularJS и как она работает?

AngularJS помогает нам разрабатывать интерактивные одностраничные приложения. Под одностраничными приложениями я имею в виду, что одна страница, которую вы посетили, будет загружать все остальное содержимое, используя JavaScript Эта функция помогает приложению быть быстрым и эффективным.

Когда мы используем javascript и html для создания приложений, вам придется привязать представление к модели, используя функции и объекты JS. Но если вы думаете, что это двустороннее связывание данных в практическом промышленном приложении, такой же подход становится утомительным с длинными кодами. Это одна из основных причин, по которой возникла необходимость в изучении и разработке AngularJS.

Пришло время изучить некоторые базовые концепции, прежде чем приступить к разработке приложений, на которых построен AngularJS:

• Модель: модель содержит данные, объекты и логику.
• Вид: Это визуальное представление приложения, которое также называется пользовательским интерфейсом.
• Двухстороннее связывание с моделью: объект javascript, т. Е. Объект, который вы хотите связать с HTML-DOM, например, для текстового поля, ввода или любых HTML-тегов, и наоборот, можно легко сделать с помощью некоторых предопределенных библиотек AngularJS.
• Контроллеры. Контроллеры - это функции JavaScript, которые связывают модель и представление.
• Сервисы: Сервисы AngularJS - это функции javascript, которые выполняют конкретные задачи или функции, которые поддерживаются и тестируются javascript. Некоторыми примерами сервисов являются $ scope, $ http, $ rootScope.
• Выражения: выражения используются для привязки данных с помощью HTML. Эта функция также известна как интерполяция. Выражения пишутся с помощью ((expression)) фигурных скобок. Выражения оцениваются и могут быть написаны без HTML-тегов.
• Модули: Модули работают как контейнер, содержащий различные части углового приложения, такие как контроллер, службы, директивы и т. Д.

Директивы и сфера применения

Давайте сосредоточимся на некоторых заранее определенных директивах и на том, как они на самом деле работают. Большая часть этой директивы начинается с ng, взятого из Angular

1 Область применения

• Область действия определяет объект javascript, с помощью которого данные могут быть доступны из модели в HTML. Сфера работает как соединитель между ними.
• Некоторые сервисы охвата: $ scope, $ rootScope. «$» определяет, что эти сервисы предопределены и не могут быть изменены. Помните, что HTML не чувствителен к регистру, но AngularJS чувствителен к регистру, поэтому $ Scope выдаст ошибку как неопределенную.
• Это необходимо объявить в нашей функции контроллера, и angular введет его автоматически.

2. нг-контроллер

• Эта директива используется для создания экземпляра / объекта контроллера, через который HTML DOM будет взаимодействовать с реальной логикой.
• HTML говорит, что любой тег с «-» будет игнорироваться при создании HTML DOM.
• После создания DOM интерпретатор Angular находит директиву ng-controller и создает экземпляр конкретного контроллера, также предоставляющего сервис $ scope.
• На одной HTML-странице может быть много ng-контроллеров.

3. нг-приложение

• Эта директива действует как контейнер, содержащий контроллеры, директивы, фильтры, выражения и т. Д. Она регистрирует или запускает приложение или модуль.
• В вашем Html существует только одно ng-приложение. Под одним приложением ng может быть много контроллеров ng.

Это создает экземпляр объекта приложения с помощью службы $ rootScope.

• Таким образом, переменные / функции $ rootScope доступны в полном приложении.

4. нг-модель

• ng-модель используется для привязки данных из html к объекту модели. Это обеспечивает двустороннюю привязку.

5. нг-если

• Для выполнения условных операторов по тегам Html используется ng-if. Если условие становится ложным, то DOM не включает этот div в DOM.

6. нг-бинд

• Вместо использования (()) для интерполяции можно также использовать ng-bind.

7. нг-отключен

• В зависимости от условия, элемент в представлении может быть отключен.

8. нг-шоу

• Если заданное условие для ng-show является истинным, то конкретный элемент отображается в DOM.

9. нг-скрыть

• Если заданное условие для ng-hide истинно, то конкретный элемент останется скрытым в DOM.

10. нг-повтор

• Он будет повторять определенный div или span в Html с длиной предоставленного массива или списка.

11. нг-клик

• При нажатии на элемент html он выполнит предоставленную функциональность или задачу.

Совет: лучший способ выучить любой язык - это написать его. Итак, давайте посмотрим наш первый код.

Примеры версии AngularJS

Вот некоторые из примеров, приведенных ниже




First Name:
Last Name:
Your name is: (( fname +" "+ lname))






First Name:
Last Name:
Your name is: (( fname +" "+ lname))






First Name:
Last Name:
Your name is: (( fname +" "+ lname))






First Name:
Last Name:
Your name is: (( fname +" "+ lname))






First Name:
Last Name:
Your name is: (( fname +" "+ lname))






First Name:
Last Name:
Your name is: (( fname +" "+ lname))






First Name:
Last Name:
Your name is: (( fname +" "+ lname))



Выход:

Имя: Иосиф
Фамилия: Алекс
Ваше имя: Джозеф Алекс

Есть несколько моментов, на которые нужно обратить внимание сверху на фрагмент кода:

• В строке 3 на страницу добавляется файл angular.min.js, который загружает все необходимые библиотеки для запуска приложения AngularJS.
• AngularJS в основном имеет 2 библиотеки angular.js и сжатую версию этого файла как angular.min.js.
• В строке 5 вы можете видеть директиву как ng-app, которая игнорируется Html при создании Html DOM и воспринимается AngularJS как одна из ее директив для запуска приложения.
• В строке 6, 7 используется ng-модель, которая свяжет текст, который вы введете в текстовое поле, с переменными fname и lname. Помните, что эти переменные чувствительны к регистру.
• В строке 8 вы видите выражение ((fname + ”“ + lname)), которое angular будет оценивать и отображать данные, которые вы вводите в текстовых полях. Это известно как интерполяция.

Давайте рассмотрим еще один пример:



var app = angular.module('CustomerApp', ());
controller('firstController', function($scope)(
$scope.customerName = 'Joe';
$scope.customerAge = '26';
));



Имя:

Фамилия:

Имя клиента - ((customerName)), а возраст - ((customerAge))

В этом примере в строке 5 создается приложение с именем CustomerApp, которое будет включать все части приложения. На самой следующей строке создается контроллер с именем firstController. $ scope объявляется как параметр функции. AngularJS автоматически внедрит его в приложение для непосредственного использования, разработчик не обязан создавать его явно.

Эта функция известна как внедрение зависимостей. Аналогичным образом контроллер ng используется для того же контроллера под тегом ng-app. Помните, что область действия приложения или контроллера будет находиться там, где заканчивается разделение или все, что вы определяете, приложение или контроллер. В этом случае вы не можете получить доступ к контроллеру или приложению после строки 16.

Рекомендуемые статьи

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

1. AngularJS Архитектура
2. Угловое приложение JS
3. Модульное тестирование AngularJS
4. Карьера в AngularJS
5. Что такое Angular 2?