Введение в AngularJS. Примеры

Введение в Angular JS. Примеры

Первое приложение на AngularJS

Последнее обновление: 26.04.2017

В предыдущей теме мы вкратце познакомились с AngularJS, теперь создадим первое приложение, которое позволит глубже ощутить фреймворк.

Для написания приложений нам потребуется обычный текстовый редактор, хотя можно использовать специальные среды программирования, как Visual Studio, Netbeans, PhpStorm и другие.

Кроме того, ряд задач AngularJS может включать работу с веб-сервером (ajax-запросы и т.д.), поэтому рекомендую настроить веб-сервер и помещать все файлы приложения на AngularJS на веб-сервере. Хотя в большинстве задач можно обойтись и без веб-сервера, просто открыв нужный html-файл в браузере. В качестве сервера опять же можно использовать множество различных серверов — Apache, IIS, NodeJS и т.д.

Ключевой особенностью AngularJS является использование паттерна MVC, предполагающее разделение приложения на три функциональные части: контроллер, представление и модель. В процессе содания первого приложения мы рассмотрим их взаимодействие.

Итак, создадим простую html-страницу со следующим кодом:

<!doctype html> <html ng-app=»purchaseApp»> <head> <meta charset=»utf-8″> <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css»> </head> <body ng-controller=»purchaseController»> <div class=»page-header»> <h1> Список покупок </h1> </div> <div class=»panel»> <div class=»form-inline»> <div class=»form-group»> <div class=»col-md-8″> <input class=»form-control» ng-model=»text» placeholder = «Название» /> </div> </div> <div class=»form-group»> <div class=»col-md-6″> <input type=»number» class=»form-control» ng-model=»price» placeholder=»Цена» /> </div> </div> <div class=»form-group»> <div class=»col-md-offset-2 col-md-8″> <button class=»btn btn-default» ng-click=»addItem(text, price)»>Добавить</button> </div> </div> </div> <table class=»table table-striped»> <thead> <tr> <th>Предмет</th> <th>Цена</th> <th>Куплено</th> </tr> </thead> <tbody> <tr ng-repeat=»item in list.items»> <td>{{item.purchase}}</td> <td>{{item.price}}</td> <td><input type=»checkbox» ng-model=»item.done» /></td> </tr> </tbody> </table> </div> <script src=»https://rpilot62.ru/wp-content/uploads/2018/06/74358.jpg»></script> <script> var model = { items: [ { purchase: «Хлеб», done: false, price: 15.9 }, { purchase: «Масло», done: false, price: 60 }, { purchase: «Картофель», done: true, price: 22.6 }, { purchase: «Сыр», done: false, price:310 } ] }; var purchaseApp = angular.module(«purchaseApp», []); purchaseApp.controller(«purchaseController», function ($scope) { $scope.list = model; $scope.addItem = function (text, price) { price = parseFloat(price); // преобразуем введенное значение к числу if(text != «» && !isNaN(price)) // если текст установлен и введено число, то добавляем { $scope.list.items.push({ purchase: text, price: price, done: false }); } } }); </script> </body> </html>

В итоге у нас получится следующее приложение:

Это небольшое приложение, представляющее список покупок. Сам список покупок представляет собой модель, которая определена в javascript:

var model = { items: [ { purchase: «Хлеб», done: false, price: 15.9 }, { purchase: «Масло», done: false, price: 60 }, { purchase: «Картофель», done: true, price: 22.6 }, { purchase: «Сыр», done: false, price:310 } ] }

Модель представляет обычный javascript-объект, хранящий определенные данные.

Приложение состоит из одного или несколько модулей, поэтому вначале объявляется модуль :

var purchaseApp = angular.module(«purchaseApp», []);

Ключевым звеном приложения является контроллер, который управляет бизнес-логикой:

purchaseApp.controller(«purchaseController», function ($scope) { $scope.list = model; $scope.addItem = function (text, price) { price = parseFloat(price); // преобразуем введенное значение к числу if(text != «» && !isNaN(price)) // если текст установлен и введено число, то добавляем { $scope.list.items.push({ purchase: text, price: price, done: false }); } } })

С помощью специальной функции у ранее определенного модуля создается контроллер .

Вторым параметром в эту функцию передается функция, которая устанавливает объект $scope. $scope — это специальный объект, через который контроллер передает данные в представление.

В данном случае в объекте $scope устанавливается объект , хранящий все элементы модели, и метод , который будет использоваться для добавления новых элементов в модель.

И третья часть — создание представление, которое является кодом html, содержащий различные элементы. Для стилизации представления в данном случае использует css-фреймворк bootstrap.

В представлении устанавливается связь с контроллером с помощью директивы :

<body ng-controller=»purchaseController»>

Вначале представления идет форма из двух элементов ввода и кнопки. Каждый элемент ввода имеет привязку к определенному объекту с помощью директивы ng-model:

<input class=»form-control» ng-model=»text» placeholder = «Название» />

Для обработки нажатия кнопки определена директива . В качестве обработчика здесь используется та функция, которая определена в . А благодаря привязке элементов управления к моделям (ng-model=»text») AngularJS будет знать, что в качестве параметров text и price надо подставлять в функцию значения соответствующих элементов управления.

При создании таблицы происходит перебор всех элементов в списке с помощью директивы ng-repeat=»item in list.items», которая во многом аналогична действию циклов в стиле «foreach».

НазадСодержаниеВперед

Где найти примеры хорошо реализованных веб-проектов на Angular.js?

❮ w3ii ГлавнаяСледующая глава ❯

 


Это руководство

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

Во-первых, вы узнаете основы AngularJS такие как: директивы, выражения, фильтры, модули и контроллеры.

Затем вы узнаете все, что должны знать об AngularJS:

События, DOM, формы, ввод данных, валидация, HTTP, и многое другое.


Попробуйте сами примеры в каждой главе

В каждой главе, вы можете редактировать примеры online. Нажмите на кнопку, чтобы увидеть результат.

AngularJS Пример

<!DOCTYPE html>
<html lang=»en-US»>
<script src=»https://rpilot62.ru/wp-content/uploads/2018/06/68480.jpg»></script>
<body>

<div ng-app=»»>
  <p>Name : <input type=»text» ng-model=»name»></p>
  <h1>Hello {{name}}</h1>
</div>

</body>
</html>

Попробуйте сами


То, что вы уже должны знать

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


История AngularJS

AngularJS версии 1.0 был выпущен в 2012 году.

Miško Hevery, сотрудник Google, начал работать над AngularJS в 2009 году.

Идея оказалась весьма хорошей, и проект теперь официально поддерживается Google.


AngularJS Примеры

Этот учебник содержит множество примеров на AngularJS!

AngularJS Примеры


AngularJS Справочник

Справочник AngularJS содержит все директивы и фильтры, используемые в данном руководстве.

AngularJS Ссылка

 

❮ w3ii ГлавнаяСледующая глава ❯

AngularJS Примеры

.

Введение в AngularJS и простейший пример приложения

| Среда, 5 июня, 2013

Метки AngularJS, Javascript


AngularJS является структурированной средой для разработки динамических веб-приложений. C данным фреймворком HTML можно использовать как собственный шаблонный язык и расширять его синтаксис так, чтобы написание приложений становилось как можно проще и лаконичнее. Стандарный набор инструментов среды, позволяет избежать написания в приложении большого объема кода, используя связывание данных и внедрение зависимости. И это все происходит на стороне браузера в Javascript, что делает AngularJS идеальным партнером для любой серверной технологии.

Angular – это то, чем мог бы быть HTML, если бы на HTML разрабатывали приложения. HTML – замечательный декларативный язык для статических документов. Но, он не содержит ничего для создания приложений, и как результат разработка веб-приложения сводится к упражнению «что я должен сделать, чтобы обмануть браузер и сделать то, что я хочу».

В основном, статические документы становятся динамическими, используя два подхода:

  • Использование библиотеки: Набор функций облегчает написание приложений. Код приложения при необходимости вызывает функции библиотеки. (Пример: jQuery.)
  • Использование фреймворка: Это применение конкретной реализации веб-приложения, когда ваш код отвечает за детали. Здесь наоборот фреймворк это основа и он вызывает код приложения, который выполняет специфичную работу. (Пример: knockout, ember.)

Полноценное решение на стороне клиента

Angular не является каким-то одним элементом мозаики в построении клиентского веб-приложения. Он управляет всем кодом, который написан для DOM-элементов и AJAX-вызовов, и содержит этот код в хорошо организованной структуре. Это делает Angular чрезвычайно уверенным в том, как должны быть построены приложениия, выполняющие такие операции, как создание, чтение, обновление и удаление данных (CRUD). Но не смотря на эту уверенность, он настолько гибок, что шаблон постороения приложений может быть изменен по желанию разработчика. Вот стартовый набор инструментов, который предоставляет Angular:

  • Инструменты и техники для построения CRUD-приложений: связывание данных, базовые директивы, валидация форм, маршрутизация, глубокие ссылки, повторно используемые компоненты, внедрение зависимости.
  • Тестируемость: модульное тестирование (unit testing), тестирование end-to-end, фиктивные объекты (mocks), вспомогательные средства тестирования.
  • Базовое приложение с примером организации директорий и сценариями тестирования, в качестве стартовой точки разработки приложения.

Где Angular не рекомендуется использовать

Angular упрощает разработку приложения, предоставляя разработчику более высокий уровень абстракции. А любая абстракция жертвует гибкостью. Проще говоря, не любое приложение подходит Angular.

Большие сайты на AngularJS

Angular был создан в основном для CRUD-приложений. К счастью CRUD-приложения составляют 90% от всех веб-приложений. Чтобы понять подходит ли Angular для конкретного приложения, лучше объясним, когда приложению не нужен Angular.

Игры или редакторы с богатым пользовательским интерфейсом — это примеры, где идет очень интенсивная работа с DOM-элементами. Этот вид приложений сильно отличается от CRUD-приложений, и соответственно, не очень подходит для Angular. В таких случаях нужно что-то близкое к голому металлу, наверно jQuery окажется более удачным выбором.

Простейший пример приложения с Angular

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

  • Связывание модели данных с пользовательским интерфейсом.
  • Чтение и проверка данных введенных пользователем.
  • Вычисление новых значений на основе данных модели.
  • Форматирование вывода в нужном формате.

index.html

<!doctype html> <html ng-app> <head> <script src=»https://rpilot62.ru/wp-content/uploads/2018/06/78103.jpg»> </script> <script src=»https://rpilot62.ru/wp-content/uploads/2018/06/46136.jpg»></script> </head> <body> <div ng-controller=»InvoiceCntl»> <b>Invoice:</b> <br> <br> <table> <tr><td>Quantity</td><td>Cost</td></tr> <tr> <td> <input type=»number» ng-pattern=»/\d+/» step=»1″ min=»0″ ng-model=»qty» required > </td> <td><input type=»number» ng-model=»cost» required></td> </tr> </table> <hr> <b>Total:</b> {{qty * cost | currency}} </div> </body> </html>

script.js

function InvoiceCntl($scope) { $scope.qty = 1; $scope.cost = 19.95; }

End-to-end тест

it(‘should show of angular binding’, function() { expect(binding(‘qty * cost’)).toEqual(‘$19.95’); input(‘qty’).enter(‘2’); input(‘cost’).enter(‘5.00’); expect(binding(‘qty * cost’)).toEqual(‘$10.00’); });

Разберемся с тем, что происходит в примере выше. В теге <Html> с помощью директивы ng-app мы указали, что документ является приложением Angular. Также директива ng-app заставляет среду Angular автоматически выполнить инициализацию приложения.

<html ng-app>

Загружаем Angular с помощью тега <script>:

Через атрибуты ng-model в тегах <input> Angular автоматически устанавливает двухстороннее связывание данных c элементами интерфейса. Там же демонстрируется простая проверка вводимых значений.

Quantity: <input type=»number» ng-pattern=»/\d+/» step=»1″ min=»0″ ng-model=»qty» required > Cost: <input type=»number» ng-model=»cost» required >

Элементы ввода выглядят хорошо, но рассмотрим следующие нюансы:

  • Когда страница загружается, Angular связывает имена элементов input (qty и cost) с переменными с аналогичными именами. Можно представлять эти переменные, как «модель» в патерне MVC (Model-View-Controller).
  • Элементы <input> обладают особой возможностью. Когда пользователь вводит недопустимое значение, они окрашиваются в красный цвет. Это поведение упрощает реализацию проверки полей ввода форм в большинстве CRUD-приложений.

И наконец, мистические {{ двойные фигурные скобки }}:

Total: {{qty * cost | currency}}

Это разметка Angular для связывания данных. Она сосотоит из комбинации выражения и фильтра: {{ expression | filter }}. В Angular фильтры используются для форматирования выводимых данных.

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

Заметим, что мы добились нужного поведения приложения без вызовов методов из Angular и без специфичной реализации поведения как для фреймворка. Браузер «понял» из разметки, что нужно сделать. Angular избавил от необходимости написания вызовов библиотеки/фреймворка.

Добавить комментарий

Закрыть меню