Руководство по Angular

Чтобы начать работу с AngularJS, нам нужна HTML страница с тремя вещами:

1) Загрузить angular.js

Нам нужно загрузить файл angular.js с одного из CDN или с локального диска.

Если вы хотите загрузить его с Google CDN, тогда добавьте в HTML такой код:

<script src=»https://rpilot62.ru/wp-content/uploads/2018/06/68865.jpg»></script>

Если хотите использовать Cloudflare CDNjs, тогда такой:

<script src=»https://rpilot62.ru/wp-content/uploads/2018/06/62995.jpg»></script>

Также вы можете скачать файл angular.min.js, загрузить его на ваш сервер и подключить вот так:

<script src=»https://rpilot62.ru/wp-content/uploads/2018/06/95381.jpg»></script>

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

2) Добавить ng-app

Добавьте ng-app к одному из элементов на вашей странице.

С чего начать изучать AngularJS

Все, имеющее этот элемент, будет рассматриваться как часть AngularJS кода. Мы можем добавить это к элементу html, body, или даже div, как это сделано в нашем первом примере.

3) Добавить выражение AngularJS.

AngularJS имеет различные элементы. Выражение (expression) это фрагмент кода, помещенный в {{ }}. Он может содержать ограниченный набор выражений JavaScript.

Теперь мы подошли к нашему первому примеру. Еще даже до написания Hello

Hello World с AngularJS

examples/angular/hello_world.html

<script src=»https://rpilot62.ru/wp-content/uploads/2018/06/95381.jpg»></script> <div ng-app> Hello {{ «World» }} </div> Try!

В нашем самом первом примере выражение это просто фиксированная строка. Ничего особенного. Даже немного оскорбительно.

И результат — Hello World.

Простое выражение AngularJS

В нашем следующем примере выражение это вычисление.

examples/angular/first_expression.html

<script src=»https://rpilot62.ru/wp-content/uploads/2018/06/95381.jpg»></script> <div ng-app> Hello Angular {{ 19 + 23 }} </div> Try!

Результат — Hello Angular 42.

Angular выполнил выражение и показал результат.

Запомните, это работает в браузере, так что если вы нажмете «view source», то увидите этот код как и обычный html файл.

Переменные в выражениях AngularJS

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

Замечание: здесь мы не используем var для присвоения значений переменным, потому что это на самом деле атрибуты внутреннего объекта AngularJS.

examples/angular/variables_in_expressions.html

<script src=»https://rpilot62.ru/wp-content/uploads/2018/06/95381.jpg»></script> <div ng-app> {{ x = 23; y= 19; x + y }} </div> Try!

Разделим установку переменной и ее использование на два выражения.

Мы можем даже присвоить значение переменной в одном выражении, а использовать ее в другом. И не только. Даже расположение этих выражений в HTML не имеет значения. Как мы можем выдеть в следующем примере, мы можем использовать переменную даже до ее установки:

examples/angular/assignment_and_expression.html

<script src=»https://rpilot62.ru/wp-content/uploads/2018/06/95381.jpg»></script> <div ng-app> <div> Result {{ x + y }} </div> <div> Assignment: {{ x = 23; y= 19 }} </div> <div> Result {{ x + y }} </div> </div> Try!

Результатом будет:

Result 42 Assignment: 19 Result 42

Здесь есть некоторая проблема: последний результат выражения, в котором мы присваиваем значение, тоже отображается. Вот поэтому мы видим 19 на странице.

Для решения проблемы можно добавить другой оператор к выражению присваивания, который не будет возвращать видимого значения. Это может быть null или » (пустая строка).

examples/angular/assignment_and_expression_fixed.html

<script src=»https://rpilot62.ru/wp-content/uploads/2018/06/95381.jpg»></script> <div ng-app> <div> Result {{ x + y }} </div> <div> Assignment: {{ x = 23; y= 19; null}} </div> <div> Result {{ x + y }} </div> </div> Try!

Результатом будет:

Result 42 Assignment: Result 42

AngularJS это JavaScript фреймворк, который расширяет HTML.

Здесь мы рассмотрим несколько простых примеров использования AngularJS. Для лучшего понимания, возможно, вы заходите взглянуть на AngularJS Book от Chris Smith или ng-book от Ari Lerner.

Comments

AngularJS (часто ещё называют Angular) — это фреймворк для веб-приложений с открытым исходным кодом. Поддерживается Google и сообществом отдельных разработчиков и корпораций для решения множества проблем, возникающих при разработке одностраничных приложений. Он нацелен на упрощение разработки и тестирования подобных приложений, предлагая фреймворк для клиентской стороны архитектуры model-view-controller (MVC, модель-представление-контроллер) и model-view-view-model (MVVM, модель-представление-представление-модель) вместе с компонентами, обычно применяемых в насыщенных интернет-приложениях.

Библиотека AngularJS начинает работу с чтения HTML-страницы, в которую внедрены дополнительные атрибуты пользовательских тегов.

Введение в Angular

Angular интерпретирует эти атрибуты в виде директив для связывания входных и выходных областей страницы с моделью, которая представлена стандартными переменными JavaScript. Значения этих переменных JavaScript можно установить вручную в коде или извлечь из статических или динамических ресурсов JSON. (Источник: https://en.wikipedia.org/wiki/AngularJS)

В этой книге мы представляем подборку основных примеров на AngularJS, которые помогут вам сделать толчок для собственных веб-проектов. Мы охватили широкий спектр тем, от одностраничного приложения и маршрутизации, до связывание данных и применения JSON для выборки. С этим простым руководством вы сможете запустить собственные проекты за короткое время.

Тодорис Баис

Сертифицированный программист на Java, работает в компании Intrasoft. Является поклонником программного обеспечения с открытым кодом. Живёт в Греции.

Автор и редакторы

Автор: Тодорис Баис

Последнее изменение: 17.04.2016

Редакторы: Влад Мержевич

Одностраничные приложения
+

В какой-то момент вы решаете написать веб-приложение, в котором абсолютно все работает на AJAX запросах, страница никогда не перезагружается, а интерфейс напоминает полноценное настольное приложение, а не традиционный сайт. Вы попытаетесь сделать все при помощи простого JavaScript и пары десятков jQuery плагинов, и очень быстро написанный код станет невозможно поддерживать, невозможно читать и невозможно править.

Чтобы избежать такой катастрофической ситуации, вам понадобится инструмент, предоставляющий жесткую структуру кода и соглашения о написании приложений, а также готовые решения для известных проблем (например, для двусторонней связи переменной в коде и текста на странице, выводящего значение этой переменной). Этот инструмент – JavaScript MVC (или аналоги MVC) фреймворки.

Есть большая вероятность, что вам не придётся использовать JS фреймворки ближайшие месяцы и\или годы. Область их применения довольно специфична: так называемые одностраничные приложения (Single Page Applications, SPA). Типичные примеры: Google Drive, Gmail, Evernote. Но даже в тех случаях, когда стоит задача написать одностраничное приложение, не всегда имеет смысл использовать полноценный JavaScript фреймворк: всё зависит от того, насколько динамичный и сложный UI вы пытаетесь построить.

Веб-версия Evernote – типичное SPA приложение

Тем не менее популярность подобных инструментов как никогда высока, и, как минимум, знать об их существовании стоит. Рассказать обо всех доступных варинтах за раз невозможно, поэтому в этой серии статей мы рассмотрим фреймворк Angular.js. Если вас интересуют альтернативные решения, то вы можете посмотреть на них на сайте http://todomvc.com/ – авторы этого проекта реализуют одно и тоже приложение на разных фреймворках, чтобы разработчикам было легче выбрать наиболее подходящий для них.

Почему Angular.js?

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

Angular.js на данный момент является самым популярным фреймворком, разработка которого поддерживается парнями из Google. Помимо богатой стандартной библиотеки, для "ангуляра" написано много пользовательских расширений, с частью которых мы познакомимся в пределах этой серии статей. Есть даже специальный фреймворк поверх Angular.js, который значительно облегчает написание кроссплатформенных мобильных приложений: http://ionicframework.com.

Что насчёт Angular.js 2.0?

Текущая версия Angular.js, на которой будет основан этот цикл статей – 1.3.

Разработчики заявили, что версия 2.0, которая выйдет неизвестно когда (но не раньше чем через год-полтора), будет несовместимой с текущей версией фреймворка, но при этом сохранит большинство концепций, заложенных в него. Так же разработчики обещают поддерживать версии 1.x на протяжении нескольких лет после релиза 2.0.

Это означает, что ещё как минимум 2 года Angular.js 1.x будет по-прежнему доминировать, на нём по-прежнему написаны тысячи приложений и множество вакансий (особенно в Европе) указывают именно этот фреймворках в требованиях. Конечно, в какой-то момент вам придётся потратить пару часов на то, чтобы разобраться с новой версией 2.0 и, скорее всего, пару дней на переход с 1.x на 2.0. Тем не менее, знания Angular.js не будут выброшены на помойку, ведь, как вы уже знаете, это вопрос не конкретной технологии, а умения разобраться в любой из них и применять для своей задачи 😉

Анонс версии 2.0 можно почитать вот здесь: http://angularjs.blogspot.se/2014/10/ng-europe-angular-13-and-beyond.html. Ещё хорошая статья с более техническими деталями: http://ng-learn.org/2014/03/AngularJS-2-Status-Preview/

Так что же мы будем делать?

В этой серии статей мы будем писать небольшой менеджер финансов: начнём с настройки рабочего окружения и структуры проекта и закончим работой с API. По пути познакомимся с основными концепциями Angular.js, роутингом, некоторыми сторонними библиотеками и несколькими важными инструментами современной фронтенд-разработки. Под конец серии вы должны уметь писать простые приложения на Angular.js и знать куда смотреть, чтобы научиться разрабатывать более сложные вещи.

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

Angular.JS. Быстрое знакомство с популярным фреймворком от Google

Информация о вакансиях и акциях эксклюзивно для более чем 8000 подписчиков. Присоединяйся!

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

Закрыть меню