What is AngularJS?
AngularJS є потужним і структурним рамки JavaScript який простіше реалізувати в окремих веб-додатків і дозволяє організувати великий, client heavy applications into something manageable. It is an open source web application framework, безкоштовно і використовується тисячами розробників по всьому світу.
AngularJS заснований на MVC (Модель управління Перегляд) модель, яка призначена для створення багатофункціональних інтернет-веб-додатків і спростити як розробку і тестування додатків з використанням MVC архітектури і розділяє ваші насичених інтернет-додатків в моделі, думки і контролери. AngularJS створює додатки одній сторінці, що означає, що браузер буде завантажувати одну сторінку, незалежно від розміру вашого застосування.
AngularJS був розроблений Miskohevery і Адам АБРОН,підтримується Google; використовується всередині них і MIT. Вона має ліцензію відповідно до ліцензії Apache версії 2.0. Спочатку він був випущений в 2009 і поточний стабільний реліз 1.3.5 (Decemeber 1, 2014).
AngularJS: In this section, давайте коротко основи AngularJS.
- Пишеться бібліотека в JavaScript
- Хіба це не платформа або мову
- Хіба це не плагін або розширення
- Він розширює HTML, CSS і JavaScript
- Хіба це не маніпуляція DOM бібліотеки, як JQuery
- Не вимагає JQuery або успадкування
- Не вимагає односторонню зв'язування даних і шаблонний код
чому AngularJS?
- Вона заснована на MVC шаблон дизайну, який забезпечує численні способи створення веб-додатків на стороні клієнта.
- Це допомагає будувати додатки на стороні клієнта з меншою кількістю коду і більшої гнучкості.
- Він розширює HTML за допомогою функціональних директив, атрибути, виразів і шаблонів для HTML.
- AngularJS є архітектуру MVC, яка спрощує розробку і тестування додатків легко для клієнтської стороні.
- Він відмінно підходить для розробки додатків одиночних сторінок і передні кінці для веб-додатків.
- Він має гнучку структуру і універсальні функції. Так він використовується як для великих додатків проектів і невеликих маленьких додатків.
Features:
AngularJS (на основі JavaScript рамки) створює додатки в більш швидкий спосіб з використанням декількох функцій, таких як:
- Це технологія, на стороні клієнта, який надає потужні речі для створення динамічних веб-додатків.
- Це на основі MVC Framework, дозволяє користувачам створювати правильну архітектуру і обслуговується веб-додатків.
- Це основа веб-додатків з відкритим вихідним кодом використовується тисячами розробників по всьому світу.
- Це дозволяє використовувати повторно використовуваних компонентів і повторного використання коду.
- Це робить створення призначеного для користувача інтерфейсу (UI) легко через процес зв'язування даних.
- Декларативний підхід HTML.
- Це допомагає розділити ваш додаток на більш дрібні частини.
Архітектурна схема і компоненти: Давайте подивимося на архітектуру діаграми рамках AngularJS і її компонентів.
Figure: AngularJS Архітектура
AngularJS містить модулі які діють в якості контейнера для різних типів додатків, таких як контролери, views, директиви, завод і т.д.. Модуль визначає, яким повинен бути бутстрапірованная додаток. Використання модулів, процеси буде легше зрозуміти,; ви можете використовувати код, встик тестів використовує модулі, щоб перевизначити налаштування і т.д.. Це місце для створення, реєстрації та вилучення кутових модулів.
конфиг компонент приймає тільки від постачальників модулів, означає, що кожен сервіс, завод і т.д. є екземплярами постачальника. Він надає всі ці екземпляри до маршрутів.
The Маршрути використовуються для з'єднання URL, диспетчерів і уявлень.
The думки використовуються для додавання складних обробки користувальницьких подій. він використовує нг-перегляддиректива, яка доповнює службу маршруту за шаблоном поточного маршруту до основної розкладці (index.html) файл,.
The контролер контролює дані AngularJS додатків, які є звичайними об'єктами JavaScript. AngularJS Визначає нг-контролердиректива, яка створює нові об'єкти контролера за допомогою функції контролера. І новий дитина доступний для функції контролера, як $сфераяк показано на схемі.
The views посилає елемент або атрибут в директиви який говорить HTML-компілятор AngularJS, щоб докласти певну поведінку до елементу DOM і його дітей.
The завод використовується для визначення служби AngularJS і викликається, коли служба повинна бути створений.
Початок роботи з AngularJS:
AngularJS легко почати з. Він забезпечує такі функції, як два шляхи зв'язування даних, що робить для користувача теги, атрибути, які інкапсулюють вбудовані директиви, в яких простирається функціональність HTML простіше.
- Він поширюється файл JavaScript і може бути використаний в веб-сторінку, включивши в AngularJS бібліотеку, як показано нижче:
[код]
<script src=”HTTP:// ajax.googleapis.com/ajax/libs/~~number=plural angularjs /1.2.26/ angular.min.js”>
</script>
[/код]
Ви також можете перевірити останню версію AngularJS на своєму офіційному сайті.
- Ви можете створити AngularJS додаток, як показано нижче:
[код]
<htmlng-додаток></html>
Or
<HTML-додаток нг = "MyApp"></html>
Or
<divng-додаток></div>
Or
<ДІВ нг-додаток = "MyApp"></div>
[/код]
The нг-додаток атрибут є кореневий елемент додатки AngularJS.
- Контролер може бути визначений, як показано нижче:
[код]
<ДІВ нг-додаток = "" нг-контролер = "MyController">
<тип введення = "текст" нг-модель = "повідомлення">
</div>
[/код]
The нг-контролерДиректива визначає контролер додатки. The нг-модельДиректива пов'язує значення елементів управління HTML, такі як поля введення, вибрати і т.д. для даних програми.
- Реалізація контролера за допомогою $сфера об'єкт, як написано нижче:
[код]
functionMyController($сфера){
$scope.message = "Введіть своє ім'я";
}
[/код]
The $сфера Об'єкт відноситься до моделі програми, яке викликає контролер, який створює message нерухомість в сферу.
Основні поняття:У цьому розділі ми будемо мати докладне обговорення основних компонентів і концепції, що лежать в них.
- модулі
- директиви
- сфера
- контролери
- вирази
- шаблони
- маршрутизація
- фільтри
модулі:
Модулі забезпечують відмінний механізм для поділу додатки на невеликі багаторазово використовувані компоненти і вказати, яким чином повинні бути бутстрапірованная додаток. Модулі визначають, як ви визначаєте компоненти в додатку і робить додаток більш зручним для читання. Кожен модуль ідентифікується унікальним ім'ям.
директиви:
Директиви є основними будівельними блоками AngularJS, які використовуються для створення користувацьких тегів HTML і можуть бути поміщені в іменах елементів, Атрибути і коментарі. Директиви можуть бути використані в якості HTML директив, які будують складні віджети з багаторівневою функціональністю.
сфера:
Область є об'єктом, який пов'язує з видом на контролер. У структурі MVC, це відноситься до моделі програми. Області застосування можуть спостерігати вираження і поширення подій, як вони розташовані в ієрархічній структурі.
контролери:
Контролери є об'єктами JavaScript, який визначає реальну поведінку вашого застосування. Він відповідає за встановлення властивостей і функцій моделі за допомогою $сфера object. Контролер не зберігається стан і не взаємодіє з віддаленими сервісами.
вирази:
Вирази записуються в фігурні дужки "{{ }}"Позначають кріплення, яке Реферер до нашої моделі програми. Вирази не підтримують оператори потоку управління. AngularJS буде виводити дані, де вони використовуються.
шаблони:
Шаблон просто старий-рівнинних-HTML, який не включає в себе будь-яких конкретних кутових шаблонів файлів. Він поставляється з набором живих шаблонів для створення контролерів і т.д., використовуючи механізм шаблонів. Шаблони використовуються для відображення інформації з моделі і контролера.
маршрутизація:
Він використовується для зв'язування URL, з контролером і видом. Маршрутизація подбала постачальниками послуг, які називаються $оператор маршруту для обробки маршрутизації, яка є постачальником з $маршрут обслуговування. In other words, це завантаження шаблонів підрозділами в залежності від URL сторінки.
фільтри:
Фільтри використовуються з виразами для перетворення або змінити дані з моделей. Ми можемо додати вираження або директиви, використовуючи символ труби. AngularJS має деякі з найбільш часто використовуваних фільтрів, таких як:
- валюта: перетворює число в грошовий формат.
- великі букви: перетворює рядки в верхній регістр.
- в нижньому регістрі: перетворює рядки в нижній регістр.
- filter: вибирає підмножина елементів з масиву.
- Сортувати за: Замовлення масив виразом таких, як в алфавітному порядку для рядків і чисельно для чисел.
приклад:
Давайте створимо один простий приклад використання бібліотеки AngularJS і створити HTML-файл як FirstExample.html як показано нижче:
Listing1: Застосування Прості AngularJS
[код]
<!DOCTYPE html>
<html>
<head>
<script src= “HTTP://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></script>
</head>
<body>
<ДІВ нг-додаток =”” нг-контролер =”MyController”>
Введіть ім'я: <тип входу =”text” нг-модель =”имя_пользователя”><бр>
<бр>
Повне ім'я: {{имя_пользователя}}
</div>
<script>
functionMyController($сфера) {
$scope.userName = “Девід”;
}
</script>
</body>
</html>
[/код]
Як обговорювалося, ми включили AngularJS JavaScript-файл на сторінці HTML, який визначається в <head> tag. Наступна частина містить AngularJS додаток, яке визначається за допомогою нг-додаток Атрибут працює всередині <div> tag.
The нг-контролер Директива визначає контролер додатки. У AngularJS викликатиме "MyController” з $сфера об'єкт, який створює властивість називається "ім'я користувача” в області видимості.
Визначити назву моделі, використовуючи нг-модельдирективно визначені в <вхід> tag. Він пов'язує поле введення до властивості контролера "ім'я користувача”.
відкрити FirstExample.html в браузері і побачити результат, як показано на знімку екрана нижче:
Figure: AngularJS Приклад
Висновок: Ми вже обговорили всі аспекти AnguarJS. Перед тим як ми приходимо до висновку, Підсумовуємо бали. AngularJS (також відомий як Кутове)це каркас веб-додаток з відкритим вихідним кодом. Вона забезпечує на стороні клієнта MVC архітектури поряд з найбільш часто використовуваних компонентів, необхідних для багатих інтернет-додатків. AngularJS слід декларативну модель програмування для створення користувацьких інтерфейсів. Основною метою цієї структури є, щоб зробити розробку і тестування простіше.
Сподіваюся, що у вас є чітке уявлення про рамках AngularJS. Насолоджуйтесь читанням в www.techalpine.com
