Здесь мы познакомимся с еще одним JavaScript-фреймворком! Angular стремится расширить возможности приложений на основе браузера с помощью функции Model – View – Controller (MVC). Это достигается за счет уменьшения количества JavaScript, необходимого для обеспечения функциональности веб-приложений. Эти типы приложений также известны как одностраничные приложения.
Посмотрите наше интервью с Гленом ниже, чтобы лучше понять, как работает Angular.
Начните с Angular.JS
Чтобы узнать больше о подобных JumpCasts, посетите Learnable
Джесс: Я здесь с Гленом Маддерном, который является соучредителем GoodFil.ms. Он собирается рассказать нам все об Angular JS сегодня. Это довольно новое. Что вы можете сказать нам об этом?
Глен: Angular JS — это фреймворк для создания веб-приложений. В отличие от веб-сайта, который является традиционным методом Интернета, где сервер отправляет фрагмент HTML, а затем вы взаимодействуете с ним. Веб-приложение — гораздо более интерактивный элемент. Это требует немного нового мышления. Есть много разных способов их построения. Я полагаю, что Angular JS является первым, кто предложил действительно новый подход к этому.
Джесс: Какие полезные ресурсы там? Где я могу начать с чего-то вроде Angular?
Глен: собственный сайт Angular JS невероятно информативен. Команда приложила немало усилий, чтобы сделать его действительно хорошим местом для начала. Существует целая последовательность вводных видео на YouTube, рассказывающая о каждом кусочке головоломки Angular JS, примерно за десять минут. Это действительно хороший способ начать.
Джесс: Какие базовые навыки тебе нужны, чтобы использовать Angular? А какова кривая обучения?
Глен: Я признаю, что если у вас есть какой-либо опыт создания веб-приложений с использованием другой инфраструктуры, например, Backbone или Ember, это будет немного сложнее, потому что Angular придает им совершенно иной акцент. Angular — это расширение HTML, чтобы сделать его более полезным для создания приложений. Эти другие проекты направлены на абстрагирование HTML и на самом деле гораздо больший акцент на JavaScript. Разница в том, что Angular означает, что вы пишете намного меньше кода. Это гораздо более декларативно, но для этого нужно немного привыкнуть.
Что касается знания JavaScript действительно хорошо, я считаю, что это похоже на Ruby on Rails. Когда это впервые появилось на сцене, многие люди создавали действительно классные вещи, но они не знали Руби. Я думаю, что вы можете сделать то же самое с Angular, но в конечном итоге, если вы собираетесь создавать гораздо более сложные вещи, вам нужно будет знать JavaScript и, очевидно, HTML, потому что на этом есть такой акцент. Вы должны будете знать это довольно хорошо.
Джесс: Какие приложения вы можете создавать с помощью Angular?
Глен: Действительно, все виды. Я сам создал мобильный сайт для Good Films, у которого много интерактивности, и он должен хорошо работать на мобильных устройствах. Мне действительно нужно что-то с гораздо большей структурой, чем то, что я использовал раньше в JavaScript, который я писал. Angular также начинается с очень низкого уровня и не требует много кода для начала работы. Действительно, в более продвинутых функциях есть некоторые вещи, такие как директивы и способ, которым он использует внедрение зависимостей, которые помогают вам, когда ваше приложение переходит от простого к сложному. Вот почему я думаю, что это действительно хороший способ начать, а затем в качестве структуры для вашего основного приложения.
Джесс: Для чего же Angular особенно полезен?
Глен: Действительно для написания сложных веб-приложений. Я думаю, что это действительно помогает заставить вас отделить логику от вашего приложения от того, что фактически обновляет веб-сайт, что манипулирует домом. Если вы пришли из опыта использования большого количества jQuery, эти вещи полностью связаны между собой. По мере усложнения вашего приложения вы начинаете бороться с этим. Angular действительно хорош для того, чтобы направить вас по пути, где вы получите приложение, которое хорошо структурировано, даже не осознавая, что вы все время делали правильные вещи.
Джесс: Чем Angular менее полезен?
Глен: Если вы только что получили довольно статичную страницу с несколькими элементами интерактивности, вы можете использовать Angular там. Это очень легкий, но преимущества, вероятно, не стоят дополнительной работы. В частности, самая большая сложность сводится к поисковым системам и способам получения отправляемого вами HTML-сервера. Определенно можно взять веб-приложение и сделать его видимым так, как этого ожидает поисковая система, но это дополнительная работа. Использование чего-то вроде jQuery в этом случае определенно будет проще.
Джесс: Каковы хорошие примеры Angular в дикой природе?
Глен: Очевидно, мобильный сайт для Good Films, который я создал. На сайте Angular JS есть галерея, в которой есть много замечательных примеров. Приложение YouTube для Playstation 3 было переписано на Angular, и там есть фотографии. Действительно, начните там и кликните вокруг. Там много всего. Сайт Angular JS сам по себе является угловым приложением. Сайт документации является угловым приложением. Если вы действительно можете, вы можете копаться в том, как они были построены.
Джесс: Как именно тогда выглядит приложение Angular JS?
Глен: Это выглядит немного иначе, чем фреймворк JavaScript. Я думаю, что лучшим способом было бы просто посмотреть на пример.
Джесс: Давайте посмотрим.
Глен: Здесь у нас есть крошечное приложение Angular JS. Это выполняется в онлайн-редакторе кода под названием Code Pen, который действительно хорош для обмена подобными фрагментами. Единственное, что мне нужно было сделать, это добавить исходный код Angular JS в заголовок документа. Это единственное, что вам нужно сделать, чтобы Code Pen работал с Angular JS. Верьте или нет, это небольшое приложение Angular JS. Я могу показать, что, набрав в этих рулях HTML-код, они называются. Angular поднимает его и оценивает один плюс два и отображает три. Это происходит потому, что он видит приложение атрибута NG.
Это говорит о том, что все, что находится под ним, является документом Angular, а не просто чистым HTML. Если я удаляю это, вы видите, очевидно, сырой HTML отображается.
Что вы можете сделать с этим? Я покажу вам маленький пример. Если бы я изменил это на вход и сказал Angular, что все, что я вставил сюда, я хочу, чтобы оно было сохранено в названии модели. Я могу использовать директиву другого руля под ним. Все, что я печатаю в этом вводе, сохраняется в имени переменной. Все, что находится в имени переменной, записывается. Вы можете видеть, что это происходит, когда я печатаю. Я не написал ни одной строки JavaScript, чтобы иметь это. Все, что я сделал, — объявил, что есть модель и выход. Это действительно, где Angular начинает дифференцироваться,
где это позволяет вам помещать больше информации в HTML, не вводя логику в HTML. Это просто заявление о том, что есть места, где вы хотите ввести данные и места, которые вы хотите вывести. Если бы я сделал это немного сложнее, я мог бы сделать что-то подобное. Очевидно, я не хочу, чтобы это было, если имя пусто. Я могу сделать это довольно просто, обернув это в другой тег и используя другую директиву Angular JS, которая говорит NG show name. Это просто означает, только показать это, если имя присутствует. Как видите, когда я его удаляю, он исчезает.
Надеюсь, это дало вам достаточную мотивацию для изучения остальной части Angular JS. Это невероятно мощный фреймворк. Это требует очень мало кода. В этом примере я вообще не написал JavaScript и получил интерактивную форму. Это все на данный момент. Это был Глен Мэдден из GoodFil.ms. Спасибо за настройку этого JumpCast на Angular JS.