Angularjs — AngularJS 1 или AngularJS 2


Содержание

AngularJS против Angular

Месяцы назад я решил изучить Angular. Когда я делал некоторое продвижение и создавал какое-то приложение, использующее его, я понимаю, что Angular 2 находится в предварительном просмотре Developer, поэтому это вопрос времени, прежде чем он будет выпущен. Поскольку Angular 2 не будет совместим с Angular 1, и есть много изменений, вопрос в том, лучше ли продолжить разработку с помощью Angular 1.x или начать разработку Angular 2?

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

Позвольте мне в предисловии сказать, что я предполагаю, что вы и все, кто будет читать это, уже комфортно с Angular 1 (теперь называется AngularJS, а не просто Angular для более новых версий). При этом давайте рассмотрим некоторые дополнения и ключевые отличия в Angular 2+.

  1. Они добавили angular cli .

Вы можете начать новый проект, запустив ng new [app name] . Вы можете обслуживать свой проект, запустив ng serve узнать больше здесь: https://github.com/angular/angular-cli

  1. Ваш angular код написан на ES6 Typescript и компилируется во время выполнения в Javascript в браузере.

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

  1. Структура проекта

В базовой структуре у вас будет папка app/ts , в которой вы будете выполнять большую часть своей работы, и папка app/js , которую вы найдете в папке app/js с расширением .js.map . Они «сопоставляют» ваши «.ts» файлы с вашим браузером для отладки, так как ваш браузер не может читать машинописный текст.

Обновление: это из бета-версии. Структура проекта немного изменилась, в большинстве случаев, и если вы используете угловое ограничение, вы будете работать в Папка src/app/ . В стартовом проекте у вас будет следующее.

app.component.css: файл CSS, который вы должны использовать специально для component.html

app.component.html: представление (переменная, объявленная в app.component.js)

app.component.spec.ts: используется для тестирования app.component.ts

app.component.ts: ваш код, который связывается с app.component.html

app.module.ts: это то, что запускает ваше приложение и где вы определяете все плагины, компоненты, сервисы и т.д. Это эквивалент app.js в Angular 1

index.ts используется для определения или экспорта файлов проекта

Дополнительная информация:
Совет для профессионалов: вы можете запустить ng generate [option] [name] для создания новых сервисов, компонентов, каналов и т.д.

Также важен файл tsconfig.json , так как он определяет правила компиляции TS для вашего проекта.

Если вы думаете, что мне нужно выучить совершенно новый язык. Э-э. вроде, TypeScript — это расширенный набор JavaScript. Не пугайтесь; это там, чтобы сделать ваше развитие проще. Я почувствовал, что уже через несколько часов поиграл с этим, и через 3 дня все закончилось.

  1. Вы привязываете к своему HTML так же, как если бы это было в директиве Angular 1. Такие переменные, как $scope и $rootScope устарели.

Это тот, который вы могли подразумевать. Angular 2 по-прежнему является MV *, но вы будете использовать компоненты как способ привязки кода к вашим шаблонам, например, возьмите следующий

Здесь воспринимайте оператор import как внедрение зависимости в контроллере v1. Вы используете import для импорта ваших пакетов, где import говорит, что вы создадите component , который вы хотите привязать к вашему HTML .

Обратите внимание на декоратор @Component , у вас есть selector и template . Здесь представьте себе selector как свой $scope , который вы используете, как вы используете v1 directives , где имя selector — это то, что вы используете для привязки к вашему HTML, например, так

Где — это имя вашего пользовательского тега, который вы будете использовать в качестве заполнителя для того, что объявлено в вашем шаблоне. т.е.)

Hello World!

HTML

JS

Также вы можете добавить что-то между этими тегами для создания сообщения о загрузке, например:

Затем в качестве сообщения о загрузке будет отображаться «Идет загрузка. «.

Обратите внимание, что в template объявлен путь или необработанный HTML-код, который вы будете использовать в своем HTML в теге selector .

Более полная реализация Angular 1 будет выглядеть примерно так:

HTML

В версии 1 это будет выглядеть примерно так:

JS

Это то, что мне действительно нравится в v2. Я обнаружил, что директива была крутой кривой обучения для меня в v1, и даже когда я их выяснил, у меня часто был рендеринг CSS не так, как я планировал. Я считаю, что это намного проще.


V2 обеспечивает более легкую масштабируемость вашего приложения, так как вы можете разбить свое приложение проще, чем в v1. Мне нравится такой подход, так как все ваши рабочие части могут быть в одном файле, а не в angular v1.

Как насчет преобразования вашего проекта из v1 в v2?

Из того, что я слышал от команды разработчиков, если вы хотите обновить проект v1 до v2, вы просто удалите устаревшие большие двоичные объекты и замените $scope на selector . Я нашел это видео полезным. Это с некоторыми из команды Ionic, которые работают бок о бок с командой angular, так как v2 больше фокусируется на мобильных устройствах https://youtu.be/OZg4M_nWuIk Надеюсь, это поможет.

ОБНОВЛЕНИЕ: Я обновился, добавив примеры, когда появились официальные реализации Angular 2.

ОБНОВЛЕНИЕ 2: Это все еще кажется популярным вопросом, поэтому я просто подумал, что я нашел какой-то ресурс, который мне очень пригодился, когда я начал работать с angular 2.

Полезные ресурсы:

Для получения дополнительной информации о ES6 я рекомендую ознакомиться с учебниками по новым функциям в Бостоне ECMAScript 6/ES6 — плейлист YouTube

Чтобы написать функции Typescript и посмотреть, как они компилируются в Javascript, ознакомьтесь с игровой площадкой на языке Typescript

AngularJS 1 или AngularJS 2

Собираюсь изучать AngularJS для разработки на WEB.

Стоит ли изучать первую версию, или сразу же лучше учить вторую? Т.е. другими словами, вторая версия ничем не уступает первой, в плане разработки для WEB?

    6 2
  • 24 янв 2015 2015-01-24 09:50:53
  • Александр

2 ответа

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

Наткнулся еще на пару статей, в которых говорилось, что разработчики будут решать проблему миграции . как? — слабо представляю.

Для себя принял решение осваивать и работать с AngularJS 1.4 . Выкатят 2.0 — будем посмотреть.

Лишние навыки еще никому вреда не приносили .

  • 24 янв 2015 2015-01-24 10:16:00
  • Alexey Lemesh

вторая версия официально не вышла. никто ее в продакшн не использует. доков по ней — минимум. рекомендую заниматься сейчас заниматься изучением исключительно первой версии. это позволит Вам понять общие концепции и особенности использования фреймворка и , после выхода сабжа, с минимальными потерями времени перейти на angularjs 2.0

Angular 2 просто ужасен

Мы используем Angular 2 в наших веб-интерфейсах. Я не принимал участия в этом решении, так как пришёл работать в этот проект относительно поздно. Статья не претендует на исчерпывающий обзор фреймворка, скорее это совокупность наблюдений после использования его в течении двух недель. Я не утверждаю, что использование его в течении двух недель делает меня экспертом, и приветствую любые корректировки, но считаю что использование Angular 2 это одна из самых больших ошибок в нашем проекте.

Ненадёжная основа

Стабильная версия Angular 2 основана на экспериментальных особенностях языка (TypeScript decorators, based on a Stage 1 TC39 draft proposal) и библиотеках находящихся в бете версии (Rx.js 5.0). Позвольте повториться, что от фреймворка требуется больше стабильности, чем от его зависимостей и языка с помощью которого он разработан. Это абсолютное бемзумство. Angular 2 не должен называть себя стабильным, пока его основные зависимости не будут стабильными. Создание приложений с помощью него, это как строительство карточного домика. Что случиться, если семантика декораторов измениться или вообще пропадёт из языка?

Фатальный недостаток (Not Invented Here)

Angular 2 — это фреймворк в прямом смысле этого слова. Он использует собственную систему загрузки модулей (потому что возможностей JavaScript не хватает, не так ли?), пытается абстрагироваться от всей браузерной платформы, и даже поставляется с полноценным HTML-парсером и санитайзером. Он даже разговаривает на собственном языке — структурные директивы, трубы (pipes), декларации, модули, инжекторы, сервисы, инкапсуляция представлений, декораторы.

Становиться сложнее изучать фреймворк. Даже те кто уже знаком с API браузера и реактивными фреймворками, должен переучиваться чтобы понять как это делается в Angular. Трубы (pipes), например, практически не отличаются от концепции Unix pipes или фильтров которые вы могли видеть традиционных шаблонизаторах таких как Twig. Другой пример: HTTP клиент в Angular возвращает Observables вместо Promises, заставляя нас выучить не только другую асинхронную библиотеку, но ещё и другую парадигму.

Это усугубляется тем, что несмотря на утверждения в документации, Observables не даёт ощутимых улучшений в сравнении с Promises, при использовании AJAX запросов.

Многие методы Rx.js проиллюстрированы с помощью потоков, как этот. По смыслу это подходит для данных, которые на самом деле являются потоками, но избыточно для запросов состоящих из одного значения.[/caption]

AJAX запросы являются сингулярными, и запущенные методы такие как Observable.prototype.map не имеют никакого смысла, когда есть только одно значение. Promises с другой стороны представляют собой значение, которые ещё предстоит выполнить, это именно то что даёт нам HTTP запрос. Я потратил несколько часов чтобы заставить Observables работать, перед чем начал использовать Observable.prototype.toPromise чтобы преобразовать Observable назад к Promises и просто использовать Promise.all , который работает намного лучше чем то что предлагает Rx.js.

Поспешная абстракция

Angular выглядит как платформа агностик, платформа с помощью которой можно разрабатывать приложения (мобильные или десктопные).

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

Он делает это путём абстрагирования от различных частей API браузера. Angular заменяет DOM с помощью собственного нелепо модифицированного HTML, историю браузера и Location API с помощью собственной маршрутизации и сервиса местоположения, а XHR и веб-сокеты с помощью собственного HTTP клиента. К сожалению, это смехотворно маленькое подмножество API, которое может понадобиться современному приложению. В любое время вам может понадобиться что-то простое, например LocalStorage, геолокация, push-уведомления, или даже простой полифилл по разному поддерживаемый браузерами для input type=»date» и вы тут же нарушите своё обещание о том, что ваше приложение кросс-платформенное.


Что ещё более важно, это то что в большинстве случаев эта абстракция просто не нужна. Некоторые вещи из Angular platform API — это просто тонкие обёртки вокруг API браузера, которые не делают ничего полезного, а только усложняют его использование. Геолокация и HTTP клиент — два хороших этому примера.

Цитата выше намекает на изучение одного фреймворка для разработки приложений под все платформы, но обратная сторона изучения этого фреймворка заключается в том, что вы не сможете использовать полученные знания в другом месте. Изучите основы Fetch API и вы сможете использовать его в любое время при разработке веб-приложений. Изучите HTTP клиент из Angular и эти знания будут бесполезны за пределами вселенной Angular.

HTML minus

Angular утверждает, что HTML Plus — это как HTML, но только лучше. Это неправда.

Во-первых, Angular HTML это не HTML. HTML атрибуты не чувствительны к регистру, а у Angular’а чувствительны. Это может показаться небольшой разницей, но это означает что любой инструмент разработанный с поддержкой HTML кода, не может поддерживать его Angular версию. Например в WebStorm автодополнение, ожидает что вы напишете ngif, но не как не ngIf. Они эквивалентны в HTML, но не в Angular HTML.

Цукерберг рекомендует:  Эффект движущейся тени в пяти строчках jQuery

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

Примеры приведённые выше эквивалентны, но если вы смешаете синтаксис, следующий пример просто не будет работать, без всяких предупреждений:

Причина заключается в звёздочке * , которая по существу является синтаксическим сахаром и просто оборачивает элемент в . Проблема в том, что когда мы используем звёздочку в теге он преобразовывается в:

который вообще ничего не отображает. Vue использует для этого одну директиву v-if и обычные HTML-теги работают так как они должны работать.

ngFor в Angular использует синтаксис микроразметки. Я никогда не видел шаблонизаторов которым нужен DSL для циклов.

let вводит в заблуждение — потому что на самом деле вы не можете делать присваивание в этих выражениях, что собственно заставляет задумываться, а зачем вообще всё это нужно? Синтаксис Vue, для примера, намного проще и разумнее:

Pipe’ы в Angular (все остальные фреймворки называют их «фильтры») могут принимать параметры. Но для нескольких значений в качестве разделителя используется двоеточие, а не запятая как это сделано почти в каждом шаблонизаторе, который я использовал. Зачем? Понятия не имею.

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

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

Ненужное многословность

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

Для создания компонента в Angular, нужно создать отдельные JS, CSS и HTML файлы. В зависимости от настроек, JavaScript может быть скомпилирован из TypeScript, а CSS может быть скомпилирован из SCSS или LESS, так что это 5 отдельных файлов для одного компонента. В связи с большим количеством файлов, вам нужно создавать отдельную папку для компонента. Сам компонент представляет собой класс с декоратором @Component , который объявляет метаданные компонентов такие как стили, шаблон и селектор, чтобы компонент можно было повторно использовать в других местах. После этого происходит внедрение зависимостей через конструктор, и не забудьте объявить интерфейсы жизненного цикла компонента. В заключении вам нужно зарегистрировать компонент в файле модуля приложения. Очень много работы, ради одного компонента.

Сравните этот подход с единственным файлом компонента в Vue. Для Vue, разметка, стили и логика объявляются в одном единственном файле. Компонент выражается как простой JavaScript объект. Есть очень маленький ритуал, который позволяет легко создавать новые компоненты.

Одиночные файлы компонентов возможны и в Angular, но вам нужно объявлять разметку и стили в TypeScript, а он (насколько я знаю) не совместим с препроцессорами, такими как SCSS.

Существенная разница? Я думаю, да. В нашем Angular приложении 21 компонент, в тоже время у нашего Vue приложения их более 30, хотя последнее намного проще. Vue компоненты маленькие и простые, в то время как Angular компоненты неудержимо растут, потому что проще добавлять некоторые вещи в один компонент, чем дробить их на отдельные.

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

Это может быть связано с конкретно нашей настройкой, но Angular 2 кажется очень тяжёлым. Приложение построенное на Vue, которое я разрабатывал для себя, перестраивается в одно мгновение. Во время разработки, пока я переключаю взгляд с рабочего пространства на браузер, страница уже перезагружена и отображена. Нашему Angular 2 приложению требуется несколько секунд чтобы перестроиться и отобразиться. Это может показаться недолго, но не забывайте что любые изменения в исходном коде вызывают перезагрузку, поэтому это происходит сотни раз в день.

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

Точно также, если Vue приложение поддерживает отображение шаблона перед компиляцией (ahead-of-time (AoT)) из коробки, то в Angular 2 всё это нужно настраивать и подключать сторонние зависимости. Подключение зависимостей наиболее важно потому что, для настройки в приложении поддержки AoT компиляции, всё тоже самое требуется и для зависимостей. Также это способствует увеличению размера. Изначальный размер нашего приложения 1MB.

Один мегабайт. Это размер приложения с единственным вендором и файлами полифиллов. Кроме того это размер всего JS использованного в нашем приложении. Он включает в себя 600kb использования Three.js и OSM Building библиотеку. 0.js содержит Three.js, а 1.js содержит OSMB.js. Это очень большие JS библиотеки спроектированные для 3D отображения в браузере, и даже когда они обе включены в наше приложение, оно меньше чем при использовании Angular.

Vue на собственной странице сравнения фреймворков отмечает, что «Hello World» в Angular 2 приложении может быть таким же лёгким, и весить всего 50 килобайт после встряхивания дерева (tree shaking). Тем не менее помните, что такой номер проходит только после удаление всех компонентов, которые не нужны для сборки, в то время как Vue 2.0 весит 23 килобайта из коробки. Другими словами, 23 килобайта это максимальный размер для Vue, а 50 килобайт это лишь минимальный размер для Angular.

Проталкиваем Java назад в JavaScript

Я попытался понять почему вывод профайлера для нашего приложения выглядел меньше похожим на пламя и больше похожим на абстрактное искусство постмодернизма.

. и тогда я наткнулся на статью в которой обсуждалась стратегия выявления изменений в Angular.

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

Разумеется я вас не знаю, но это смелое заявление, звучит дико. Angular обрабатывается браузерным JavaScript движком в качестве VM, но это не совсем так, как делает это Java. Что это означает в дополнении к трассировки стека для трёх длинных страниц и бесполезному профайлеру, дак это то что производительность полностью во власти движка. Есть только одна JVM, а у JavaScript есть полтора десятка различных движков, с разными профилями производительности. Я могу только предполагать, что код сгенерированный Angular будет «VM friendly» для всех остальных. Многообещающе.

На этом сходства с Java не заканчиваются. Angular — это не JavaScript фреймворк, а это TypeScript фреймворк. TypeScript выглядит безопасным потому что он строго типизированный. Это отчасти верно, но TypeScript страдает от той же проблемы что и Java — он не может хранить ссылку на null. Даже хуже, потому что у TypeScript нет времени выполнения для компонентов и он не выбрасывает предупреждения во многих не безопасных случаях, язык предлагает только иллюзию безопасности. Для примера это совершенно допустимый код написанный на TypeScript, который не вызывает никаких предупреждений.

Ужасная документация

У Angular 2 наихудшая документация из всех крупных фреймворков, которые я когда либо видел. Она не аккуратная, неполная и плохо написанная. Для начинающих, Angular — это JavaScript фреймворк, у которого нет документации на JavaScript. На странице «Quickstart» говориться следующее:

Не смотря на то, что в разделе «Getting started» приводятся примеры на TypeScript, вы можете писать Angular приложения на JavaScript или Dart. Используйте переключатель языка программирования в левой навигационной панели, для того чтобы переключить язык используемый в этом руководстве.

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

Большая часть документации была написана для TypeScript разработчиков и ещё не была переведена на JavaScript. Пожалуйста оставайтесь с нами. Между тем мы будем предоставлять ссылки на TypeScript главы, где документация по JavaScript не доступна.

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

Документация плохо организована. Авторы разделили её на три секции «Guide», «Advanced» и «Cookbook», но разграничения довольно таки произвольны. Например, руководства по формам и синтаксису шаблонов находится в секции Guide, а руководства по маршрутизации и навигации в секции Advanced. Ahead-of-Time компиляция почему то является разделов в Cookbook, также как и валидация форм. Ни один из приведённых только что примеров не имеет никакого смысла, а что ещё хуже, открытие второго уровня навигации полностью перезагружает страницу, что делает процесс поиска информации мучительно долгим.

Страницы в руководстве пронумерованы, но эти цифры ничего не значат. «Forms» находится перед «Template Syntax», даже при том что синтаксис двустороннего связывания данных, используемый в формах, описывается только в синтаксисе шаблонов.


Отдельные руководства сами по себе плохо написаны. Вот абзац из руководства по Pipe’ам:

Давайте напишем ещё один грязный pipe, который делает HTTP запрос к серверу. Как правило это ужасная идея. Вероятно, это ужасная идея независимо от того что мы делаем. Мы всё равно продвигаемся вперёд чтобы поставить точку. Помните что грязные pipe’ы вызываются каждые несколько микросекунд. Если мы не будем осторожны, то этот pipe покарает сервер запросами.

Стиль написания совершенно невыносим. Только первое и последнее предложение могут рассказать нам что-то полезно, но и они содержат большие технические ошибки — автор, вероятно имел в виду миллисекунды, а не микросекунды, величины которых различаются на три порядка. Опечатки есть по всюду (Прим. переводчика: Не стал переводить, чтобы было видно в каких местах опечатки):

The component doesn’t have to subscribe to the async data source, it doesn’t extract the resolved values and expose them for binding, and the component doesn’t have to unsubscribe when it is destroyed (a potentsource of memory leaks).

Despite the two bindings and what we know to be frequent pipe calls, the nework tab in the browser developer tools confirms that there is only one request for the file.

Вся документация читается так, как-будто написана и закодирована стажёром, которую недостаточно заплатили, чтобы позаботился о ней.

Будущее веб-разработки!?

Когда я знакомился с Angular 2, я надеялся что он будет элегантным фреймворком, который находится на одном уровне с такими проектами как Laravel или Django, и сделает разработку веб-интерфейсов лёгкой и приятной. Но всё что я увидел, это то что он является нестабильных, раздутым, слишком усложнённым фреймворком, который много что обещает, но мало что делает.

Angular 2: что это такое

Всем привет! Сегодня мы начнем разбирать фреймворк от известной компании Google — Angular 2.

Что такое Angular 2

Это фреймворк, основной целью которого является создание одностраничных браузерных приложений или по другому Single Page Application (SPA). Многие фичи были взяты из AngularJs ( первая версия ).

Вот какие отличительные достоинства имеет ангулар 2:

  • Высокая производительность — быстрая скорость работы в сравнении с предыдущей версией ( AngularJs ).
  • Низкий порог вхождения — не требуется каких-то больших познаний в программировании до непосредственного изучения фреймворка.
  • Популярность — в интернете есть большой кладезь информации посвященный этому языку: на официальном сайте, на форумах, на различных сайтах посвященных программированию. В основном это иностранные сайты.
  • Помощь — для каждой вводимой функции или при обнаружении неправильного синтаксиса будет выведена подсказка.

Недостатком является малое количество документации именно для русскоязычной аудитории, преимущественно это связано из-за недавнего релиза во всемирную паутину.

Цукерберг рекомендует:  Php - Как вывести ссылку на категорию, что бы она не повторялась

Для работы с Angular 2 используются:

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

Браузер Версии
Chrome С первой версии
FireFox С первой версии
Edge С версии выше 13
Internet Explorer С версии выше 9
Safari С версии выше 7
IOS С версии выше 7
Android С версии выше 4.1
Internt Explorer Mobile С версии выше 11

Каким образом он будет переводится поговорим позже.

Возможности Angular 2

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

  • Модульная система — это свойство отделение определенного функционала приложения в отдельные файлы (напоминает объектно-ориентированное-программирование).
  • Компоненты — с помощью их отображается содержимого html, css на экран браузера.
  • Метаданные — руководят правильным отображениям компонентов и их классов.
  • Анимация — компоненты работающие с интерфейсом по средством анимации.
  • Формы — компонент работающий с вводимыми формами. Что произайдет после клика по кнопке, после удаление всех символов с формы, за это все отвечает этот компонент.
  • Сервисы — компоненты которые внедряют (несут) логику во взаимодействие с приложением.
  • Роутер — компонент, который обеспечивает загрузку компонентов из другого компонента. Можно реализовать загрузку содержимого без перезагрузки самой страницы. Например, вы отправили форму, или перешли по ссылке. Такая загрузка реализована на официальном сайте.
  • Директивы — помогают улучшить взаимодействие с работой интерфейса.
  • Работа с сервером — взаимодействие с сервером.

Обо всем этом и многом другом будут сделаны отдельные уроки.

Если у вас имеются идеи по поводу создания новых статей, то пишите в комментарии.

Running AngularJS 1.6 in Angular 5 (side by side)

At Spatial Vision, We’ve got a number of AngularJS (1.2.x

1.6.x) apps in production which are built around 2012

2015. Their main tech stack:

  1. Angular 1.x
  2. Bootstrap 3.x
  3. Leaflet
  4. OpenLayer
  5. LocalStorage (ngstorage)
  6. Font Awsome
  7. Moment JS (Date/time)
  8. Grunt for build
  9. Docker for build process

Many apps are stable and there is no reason to migrate/upgrade (commercially) for Angular 5 (6 is coming soon). However some apps have on-going enhancement works and require new libraries for new features.

Problem

When you need a new library or external capabilities, most libraries (Angular wrapper etc.) are now only targeting Angular 2+.

Data Farming Mapping Website is a good example that they now want to add a shopping cart capability including eWay integration. While it is entirely possible to stay in 1.6, there is a risk of adapting an external capabilities that are no longer maintained.

ngUpgrade: Run AngularJS and Angular s >This topic is not new and a lot of materials have been published over the last couple of years (Since Angular 2). We learned everything through a number of blogs and official documentation, which are a kind of outdated as Angular is evolving so quickly even since early 2020 and things are slightly different as of March 2020.

Must read

It is still a good idea to go through the history of the migration process as well as reading the official documentation:

AngularJS app overview


We’ve selected the Data Farming app as a migration candidate as we’re about to implement some new features including an e-commerce capability using eWay and a custom shopping cart for downloadable shape files.

The app was originally created in order to demonstrate the API capability, however it was quickly evolved to an app used by farmers and consultants directly. Technically speaking, it has the following characteristics:

  1. AngularJS 1.6 + Angular Material, Grunt base and a few libraries including Auth0, OpenLayer 3, jsPDF and introJS
  2. The app is relatively small (Login; List Farms; Draw paddocks in map; Upload KML/Shape files; View NDVI images for paddocs and print PDF)
  3. Building a new feature which requires a new library (eWay) and new UX (shopping cart, purchase history etc.)
  4. The existing code base needs to be reviewed prior to extending as it was built for a simple prototype

Migration step summary

The following are the steps we took after a lot of readings. There are different migration strategies available in the official documentation, however our preference is running side by side with Angular 5 being the main application.

  1. Create Angular 5 application using Angular CLI (1.7.3)
  2. Copy an existing Angular JS app (should be 1.6.x and refactored so the structure of the code is feature based and each file has a single impl)
  3. Migrate JS dependencies (Switch npm or copy bower_components)
  4. Fix template paths in both JS and HTML
  5. Migrate scss files and fix import paths
  6. Fix API proxy path from Grunt to Angular CLI
  7. Fix minor CSS issues caused by an itroduction of view-container and view-frame
  8. Regression test (It seems all working at this stage, have a good test by QA)
  9. Add Angular Routing and introduce a new page
  10. Switch between AngularJS page and Angular page

Migration steps

Create Angular 5 application using Angular CLI (1.7.3)

Firstly, create an Angular 5 app using Angular CLI. (Used Node 8.10.0 LTS)

Copy an existing Angular JS app into src/ng1

The app is s Grunt based Angular JS 1.6 app using Bower for web dependencies, NodeJS for the build process and SCSS for css processing.

AngularJS vs Angular 2 vs Angular 4: What’s the Difference?

What is Angular JS?

AngularJS was created by Misko Heavery. He had built a framework to handle the downfalls of HTML and also taking ideas and best practices of the libraries which were never done earlier.

This first version of the framework known as AngularJS was launched in the year 2009. It laid the foundation of the present-day front-end application development. Angular JS was one of the best single-page application development solution. Gradually, it wide adoption and become very popular.

Features of Angular JS

  • A JavaScript MVW Framework
  • Extends HTML support by adding tags, attributes, and expressions
  • Allows easy event Handling
  • Supports for Data Binding
  • Built-In Template Engine and Routing
  • Form Validations and Animations
  • Dependencies Injection

What is Angular 2?

After, releasing Angular JS, Angular team released Angular 2 which is complete rewrite of its original Angular 1 or AngularJS. Angular 2 version is built around the concept of the component. It was rewritten from scratch by the Angular team using Typescript. It offers better performance to web developers. There are many new features along with other improvements and tweaks.

Some Important Features of Angular 2 are:

  • Modern, faster, and highly scalable framework
  • Equally useful framework for web, mobile, and desktop apps
  • Web components based architecture
  • Supports Hierarchical Dependency Injection

Why not Angular 3?

Angular 2 has been a single repository. Each package downloadable with the @angular/package-name convention. For example @angular/HTTP, @angular/router

All package names were assigned version 2, but router package by mistaken was given version 3. Therefore, the development team skipped Angular Version 3 and directly named it version 4 to maintain compatibility with Angular Router’s version.

What is Angular 4?

Angular 4 is unlike Angular 2 (which is completed rewritten version of Angular 1). There are in fact only few minor changes and new features added in it. Angular 4 supports TypeScript, which compiles to JavaScript and displays the same in the browser.

Some other features of Angular 4 are:

  • Reduce the size of the generated bundled code up to 60%
  • Animation moved out to a separated package @angular/animations
  • Supports for if/else statement
  • Supports for email validator

What is Angular 5?

Angular 5 doesn’t bring any significant change from Angular 4. However, lots of new features and many new improvements are done in this version.

Features of Angular 5:

  • Make AOT the default
  • Easier to build progressive web apps
  • Type checking in templates
  • Support for Internationalized Number, Date, and Currency Pipes
  • An update to Httpclient
  • Zone speed improvements
  • New Router Lifecycle Events

History of Angular Versions

  • Angular version 1.0 which is known as AngularJS was released in 2010 by Google
  • Angular version 2.0 was released in September 2020
  • Angular 4.0 was released in March 2020
  • Angular 5.0 was released in Nov 2020

Let see Angular versions history in detail:

History of Angular 1

Angular 1 which was also referred as AngularJS is a JavaScript open-source framework. It was designed especially for single-page web apps which is fully owned by Google. This was the first Angular version launched in the year 2010.

History of Angular 2

Angular 2 is a fully built and completed rework version from Angular 1. It is compatible with mobile devices. Moreover, Angular 2 gives you an option to choose more languages where you can choose your language like ES5, ES6, or TypeScript to write the codes of Angular 2.

History of Angular 4

As discussed earlier, Angular 3 was not released by the Angular team. Angular 4 was released on March 6, 2020, which is compatible with most of the applications. However, there is not any major changes in Angular 4 from Angular 2, and it offers better bug fixed, and alerts compare to Angular 2.

Angularjs — AngularJS 1 или AngularJS 2

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Alternatives

Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views.

Extensibility

AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how.

Изучаем AngularJS на пяти практических примерах

Скачать рабочие материалы к данной статье

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

Где бы лаконично и конкретно, на практических примерах были описаны принципы работы AngularJS. Цель этой статьи – изменить подобное положение вещей. Ниже приводится описание основных составляющих элементов Angular: Модели,Представления, Контроллеры, Сервисы и Фильтры, созданное на основе пяти конкретных примеров.

Если вы предпочитаете редактировать код через ваш любимый редактор, скачайте ZIP-архив по ссылке выше.

Что такое AngularJS?

По большому счету AngularJS является основой, которая связывает HTML-код (который генерируется для просмотра страницы в окне браузера) с JavaScript объектов /моделей. Когда изменяется один из объектов, автоматически обновляется и генерируемая страница. Верно и обратное — модели связаны с текстовым полем (контентом страницы). Когда изменяется контент, это вызывает изменения и в коде сайта.

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

Для использования AngularJS вы должны добавить его в код своей страницы. Для этого в тэг нужно прописать соответствующие параметры. Google’s CDN для более быстрой загрузки рекомендую еще такой код:

AngularJS включает в себя большое количество директив , которые позволяют связать HTML-элементы моделей. Они представляют из себя атрибуты, начинающиеся с префикса ng-, их можно добавлять к любому элементу. Самым важным атрибутом, который, если вы хотите использовать Angular, нужно включить во все страницы сайта является ng- приложений:

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

Но довольно теории. Давайте рассмотрим непосредственно некоторые коды.

Меню навигации

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

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

Если вы использовали шаблоны JavaScript раньше, то вы знакомы с синтаксисом команды <>. Когда фреймворк видит такую строку, он заменяет содержимое переменной. Эта операция повторяется каждый раз, когда изменяется переменная.

Встроенный редактор

Для второго примера, мы создадим простой встроенный редактор – при нажатии пункта меню всплывает небольшое текстовое поле с подсказкой. Мы используем контроллер, который будет инициализировать модели и задавать два разных метода отображения подсказки. Контроллеры являются стандартными функциями JavaScript, которые автоматически выполняются фреймворком Angular. Они связаны с кодом отображения страницы вашего сайта через директивы ng-controller .

Когда функция контроллера запускается на исполнение, для нее в качестве параметра задается специальный объект $scope. Он отвечает за ввод текста в текстовый редактор. Для того, чтобы вывести его на экран, нужно прописать дополнительные свойства и функции, которые описывают отображение его элементов. С помощью NG-моделей осуществляется связь кода сайта с текстом, который вводится в рабочее поле редактора. При вводе текста Angular задает соответствующие изменения переменных.

Форма заказа

В этом примере мы рассмотрим код формы заказы, в которой автоматически выводится общая сумма. Здесь использована еще одна полезная функция AngularJS — фильтры . Фильтры позволяют вносить изменения в модели, а также объединять их с помощью символа «|». В приведенном ниже примере, используется фильтр валюты , чтобы перевести числовое значение в корректный формат цены — с разделением долларов и центов. Когда вы рассмотрите пример № 4, вы сможете с легкостью задавать свои собственные фильтры.

Связка ng-repeat ( описание ) – это еще один полезный элемент Angular. Она позволяет запустить цикл обработки массива элементов, а также задать разметку для каждого из них. Она автоматически обновляет код, если один из элементов был изменен или удален.

Функция поиска

В этом примере приводится функция, позволяющая фильтровать список элементов по определенному критерию. Это еще одно направление, где с успехом может применяться AngularJS.

Фреймворк является идеальным инструментом для создания пользовательских фильтров. Для этого сперва мы должны сформировать специальный модуль для нашего приложения.

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


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

  1. Использовать функцию angular.module(«name»,[]) при вызове JS. Это установит границы нового модуля;
  2. Задать имя модуля в качестве значения директивы ng-app.

После этого фильтр создается очень просто функцией filter(). Также просто потом вызвать его через обращение к соответствующему модулю angular.module(«name», []).

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

Функция переключения режима вывода элементов на странице

Еще одна популярная функция – переключение по выбору пользователя различных режимов вывода элементов на странице (список или плитка). Через Angular это делается очень просто.

Кроме того, в этом примере описывается еще один важный элемент фреймворка – сервисы. Это объекты, которые могут быть использованы приложениями для взаимодействия с сервером, API или другими источниками данных. В нашем случае, мы напишем сервис, который взаимодействует с Instagram’s API и выводит массив с самыми популярными на текущий момент фотографиями.

Обратите внимание, что для работы этого кода, нам потребуется использовать на странице дополнительный файл Angular.js:

Для оптимизации работы с AJAX API здесь используется модуль ngResource (в коде модуля задействована переменная $resource).

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

Например, во время тестирования, вы можете предпочесть выводить данные из четко заданного массива фотографий (без фильтров и обработки), что ускорит отладку всей системы.

Дополнительная литература

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

Сайт AngularJS
Руководство по AngularJS
Официальное пособие по AngularJS
Список сайтов, где представлено еще много информации по теме, видео и учебники

Данная публикация представляет собой перевод статьи « Learn AngularJS With These 5 Practical Examples » , подготовленной дружной командой проекта Интернет-технологии.ру

Difference Between Angular Versions: Angular Vs AngularJS

Understanding the Difference Between Various Angular Versions: AngularJS Vs Angular 2, Angular 1 vs Angular 2, Angular 2 vs Angular 4 and Angular 5 Vs Angular 6

We explored developing SPA’s using AngularJS in our previous tutorial. This tutorial will explain more about the differences between Angular versions.

Being someone who has been working in the development domain for almost a decade, I have seen how technologies have evolved. Same is the case of front-end technologies too. There was a time when HTML and CSS were dominating the industry.

But today, without having good skills in AngularJS, you can’t land a good job as a front-end developer. Don’t miss to read our AngularJS tutorial series for beginners.

With the advent of Blockchain technology and new Blockchain-based projects, the demand for developers skilled in AngularJS has increased in many folds.

What You Will Learn:

About Angular and AngularJS

This introduction would be much useful for those who don’t know much about Angular.

Angular is a blanket term that is used for all the versions which came after AngularJS (Angular 1), i.e., Angular 2, Angular 4, Angular 5 and now Angular 6. It has the latest and most refined framework till date to design a web application that is dynamic and responsive.

During the last five years, AngularJS has evolved drastically. It was first introduced in 2009 and it enables two-way data binding. Utilizing HTML as a template language, it creates an environment that is quick to develop and more easily readable.

Angular lets developers to create more reusable codes. Thus, developers have to do less of coding, which saves time and helps to increase efficiency greatly. Due to this AngularJS web application development companies are in great demand now.

Why Opt for AngularJS or Angular?

Considering the features that AngularJS offer, it is a logical choice for the development of advanced web application built on a JavaScript framework, especially for Blockchain-based solutions.

Today, single page applications are popular as they offer improved navigation and present the information in a way that is much easier to understand. AngularJS can be utilized to develop great single page applications that give satisfying user experience.

Developed by the talented team of Google Developers, AngularJS has got a solid foundation, big community and is well-maintained too.

Differences Between Various Angular Versions

  • AngularJS Vs Angular 2
  • Angular 1 Vs Angular 2
  • Angular 2 Vs Angular 4

Starting from AngularJS (also known as Angular 1), followed by Angular 2, today we have Angular 6 version of this highly evolving technology.

Let’s have a quick look at the differences, which would be easier for you to upgrade.


#1) Programming Language

Angular 1 used JavaScript to build the application.

However, as an upgrade to Angular 1, Angular 2 uses TypeScript which is a superset of JavaScript and helps in building more structures and robust code.

As the upgrade progressed, the TypeScript version compatibility was further upgraded with Angular 4 supporting TypeScript 2.0 and 2.1.

JavaScript

[The code is here: https://dzone.com/articles/learn-different-about-angular-1-angular-2-amp-angu]

TypeScript

[The code is here: https://dzone.com/articles/learn-different-about-angular-1-angular-2-amp-angu]

#2) Architecture

While AngularJS is based on MVC (model-view-controller) design, Angular utilizes services/controller. Thus, if you are upgrading from Angular 1 to Angular 2, there is a possibility that you have to rewrite the whole code.

In Angular 4, the bundle’s size is further reduced by 60%, thereby helping in accelerated application development.

Model View Controller And Services Controller

[Image Source dzone.com]

#3) Syntax

In AngularJS you have to remember the right ngdirective to bind an image/property or an event.

However, Angular (2 & 4) focus on “()” for event binding and “[]” for property binding.

#4) Mobile Support

AngularJS was introduced without any inbuilt support for mobile application development. However, Angular offers support for building native mobile applications, which is something similar to what React Native offers.

#5) SEO Optimized

For developing SEO optimized applications in AngularJS, rendering of the HTML at the server side was required. This problem has been eliminated in Angular 2 and Angular 4.

#6) Performance

In specific, AngularJS is for designers. It does not offer much for the developers to play with.

However, Angular has many components to support a developer’s requirement, hence it can improve the overall performance of the application, especially in speed and dependency injection.

#7) Animation Package

When AngularJS was introduced, the code required for animation was always included in the application, whether or not required. But in Angular 4, the animation is a separate package which eliminates the necessity of downloading bundles of large files.

AngularJS

Angular 4

Should You Upgrade to Angular from AngularJS?

It is always advisable to upgrade to a new version of the technology.

The better question is – What is the right time to upgrade to a newer version of Angular?

  • If you are looking to develop complex web applications, then you certainly need to upgrade to the newer version of Angular.
  • If you think it is imperative for you to develop mobile apps, then better upgrade it.
  • If you are into development of smaller web apps only, then better stick to AngularJS, as setting up newer versions of Angular is more complicated.

Angular 5 Vs Angular 6

Google’s team has released Angular 5 with many new features as well as service improvements and bug fixes from version 4. Angular 5 is much faster with improved loading time and has better execution time as well.

The latest in line is Angular 6. According to Google’s team, this is a major release which is focused on making the toolchain easier to move quickly with Angular in the future, and less on the underlying framework.

ng update

is a new CLI command that is introduced with Angular 6. It analyses package.json and recommends updates to your application by utilizing its knowledge of Angular.

Another CLI command that has been introduced is ng add

which makes adding new capabilities to your project easy. It utilizes the package manager to download new dependencies. It can also invoke an installation script which can update your project with the configuration changes and add additional dependencies.

Angular 6 supports version 6 of RxJS. RxJS v6 and has several major changes. It offers a backward compatibility package rxjs-compat which ensures that your applications keep working.

Conclusion

The new versions of AngularJS, i.e., Angular 2, Angular 4, Angular 5, and Angular 6 have many features, but that doesn’t mean that AngularJS is obsolete. Many people are still using AngularJS for developing a small web application.

But I believe, sooner or later, the users would have to upgrade to the new versions as the new features introduced by Google team would only be available in the new versions.

Thus, it advisable to upgrade as soon as possible since migrating to a new version would require coding from scratch.

In the next tutorial, we will learn how to use the Protractor testing tool for End-to-end Testing of AngularJS Applications.

AngularJS 1 или AngularJS 2

Собираюсь изучать AngularJS для разработки на WEB.

Стоит ли изучать первую версию, или сразу же лучше учить вторую? Т.е. другими словами, вторая версия ничем не уступает первой, в плане разработки для WEB?

    7 2
  • 24 янв 2015 2015-01-24 09:50:53
  • Александр

2 ответа

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

Наткнулся еще на пару статей, в которых говорилось, что разработчики будут решать проблему миграции . как? — слабо представляю.

Для себя принял решение осваивать и работать с AngularJS 1.4 . Выкатят 2.0 — будем посмотреть.

Лишние навыки еще никому вреда не приносили .

  • 24 янв 2015 2015-01-24 10:16:00
  • Alexey Lemesh

вторая версия официально не вышла. никто ее в продакшн не использует. доков по ней — минимум. рекомендую заниматься сейчас заниматься изучением исключительно первой версии. это позволит Вам понять общие концепции и особенности использования фреймворка и , после выхода сабжа, с минимальными потерями времени перейти на angularjs 2.0

Цукерберг рекомендует:  UI UX main
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих