AngularJS vs Angular 2: ключевые различия

Мы в команде Web Development компании Itransition уже имеем хороший опыт разработки на Angular 2 и хотим им поделиться.

Эта статья ориентирована на тех крутых ребят, которые разрабатывают на Angular и подумывают перейти на вторую его версию.

Стоит ли начинать новый проект на Angular 2?


Однозначно – да! И вот почему:

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

Начало нового проекта


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

Свобода действий


Но с первой версией Angular не всё так просто. Нужно чтобы всё придуманное ложилось на реалии фреймворка, его модули и сервисы строго определенного типа. Нельзя просто так взять и аккуратно создать некий класс или компонент, который будет делать что-то важное. Нужно решить, чем этот компонент будет с точки зрения фреймворка? Каким типом сервиса: «value», «constant» или всё же «factory»? А может быть сервис типа «service»? Ведь он создаёт объект с оператором new, вроде бы это то, что нужно. А вдруг синглтона будет недостаточно? И эти вопросы возникают практически всегда, работая с Angular, в подобных ситуациях, и нет на них однозначного ответа.

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

Генератор кода


Далее для начала работы над проектом необходимо:

  • создать файловую структуру приложения,
  • наладить работу с шаблонами,
  • наладить работу со стилями, препроцессором,
  • настроить сборку для разработки, отладки, продакшена,
  • настроить процесс тестирования,

Со второй версией фреймворка мы получаем инструмент командной строки, с которым можно генерировать приложения, модули, компоненты, директивы, сервисы, фильтры (pipe – новое их название), запускать тесты, проверку кода и т.д. И для выполнения описанного выше необходимо выполнить одну команду:

ng new app-name

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

Команда может принимать дополнительные аргументы. Например, если планируется использовать CSS препроцессор Stylus:

ng new app-name --style=styl

Будет автоматически настроена компиляция и сборка стилей с учётом выбранного препроцессора.

TypeScript


Сгенерированный код приложения будет использовать TypeScript, который пугает многих, скорее всего попросту из-за ошибочных представлений о нём. На самом деле это тот же JavaScript (ECMAScript 6), но с некоторыми приятными и полезными примочками:

  • интерфейсы,
  • типизация,
  • перечисления (Enum),
  • модификаторы (public, private, static),
  • декораторы (@).

Всё это позволяет писать более стабильный и красивый код, избавляет от надобности повсеместно использовать скверный JSDoc.

Начав использовать TypeScript, хочется писать только на нём, и уже не понимаешь, как можно было быть таким грешным – не использовать его раньше?

Компоненты


В Angular 2 нет контроллеров, только компоненты. Создать новый можно таким образом:

ng generate component playground/player

Эта команда создаст директорию player в playground с минимально необходимым кодом компонента:

  1. файл реализации,
  2. файл шаблона,
  3. файл стилей с расширением используемого CSS препроцессора,
  4. файл юнит-тестов.

Никаких копипастов — источника зла и ошибок! Сгенерированный код реализации компонента будет такой:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-player',
  templateUrl: './player.component.html',
  styleUrls: ['./player.component.styl']
})
export class PlayerComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

@ + Component здесь – и есть пример декоратора. В конечном счёте, это простая функция, которая получает в качестве аргумента конструктор, определённый ниже, и изменяет его с учётом описанной конфигурации, в данном случае это:

  1. selector – определяет, как будет называться элемент компонента в шаблонах приложения (<app-player></app-player>),
  2. templateUrl – путь к файлу шаблона текущего компонента,
  3. styleUrls – массив путей к файлам стилей компонента.

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

Two-way binding


Ключевая фишка Angular — two-way binding. Как она реализована в Angular 2?

<app-player [(position)]="playerPosition"></app-player>

Такая запись в шаблоне передаст значение свойства playerPosition текущего компонента и будет изменять его при изменении свойства position внутри компонента player. Это и есть two-way binding.

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

В Angular 2 появился новый синтаксис, который позволяет передавать значения свойств дочерним компонентам (one-way binding). Использует он квадратные скобки:

<app-player [position]="playerPosition"></app-player>

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

<app-player (positionChange)="onPositionChange($event)"></app-player>

Такая запись подразумевает, что в компоненте player есть свойство positionChange, которое является экземпляром класса EventEmitter. И когда в компоненте player вызывается this.positionChange.emit(newValue), выполняется код onPositionChange($event), указанный в шаблоне. $event будет содержать значение newValue.

Собственно, так в Angular 2 и реализуется two-way binding:

  1. передача исходного значения свойства,
  2. подписка на событие с названием «название свойства внутри дочернего компонента» + «Change»,
  3. изменение свойства в родительском компоненте при появлении события.

А запись [(position)]=«playerPosition» является лишь синтаксическим сахаром, которая делает всё описанное автоматически и экономит время на постройку дома, посадку дерева и выращивание сына.

Благодаря этой реализации в Angular 2 нет вотчеров, которые ранее являлись источников многих проблем с производительностью. Теперь всё более естественно.

Принципы SOLID


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

Angular 2 решает множество проблем, связанных с высоким уровнем связанности кода, новой мощной реализацией Dependency Injection и возможностью абстрагироваться от реализаций различных взаимосвязанных компонентов, используя интерфейсы (TypeScript).

Например, можно написать такую конструкцию:

class SomeComponent {
	constructor(public someService: SomeService) {}
}

И при создании экземпляра этого компонента автоматически будет создан экземпляр сервиса SomeService и передан в конструктор SomeComponent. Это очень сильно снижает уровень связанности и позволяет тестировать их в отдельности друг от друга.

Так же, запись public someService (TypeScript) делает этот сервис доступным внутри экземпляра класса с помощью ключевого слова this (this.someService).

Валидация форм


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

Пример реализации формы ввода нового пароля с проверкой его сложности и подтверждением:

let passwordControl = new FormControl('', [
	Validators.required,
	CustomValidators.complexPassword,
]);

let passwordConfirmControl = new FormControl('', [
	Validators.required,
]);

this.formGroup = new FormGroup({
	password: passwordControl,
	passwordConfirm: passwordConfirmControl,
}, CustomValidators.match(passwordControl, passwordConfirmControl));

Валидатор (Validators.required и подобные) – простая функция, в которую передаётся значение и которая возвращает null или объект с описанием ошибки.

В шаблоне формы нужно указать formGroup:

<form [formGroup]="formGroup">

Полям ввода нужно указать соответствующие названия контролов formGroup:

<input type="password" formControlName="password">
<input type="password" formControlName="passwordConfirm">

И всё. Валидна ли форма, все ошибки и состояния можно получать через объект formGroup, который будет обновляться при каждом взаимодействии пользователя с ней.

Роутинг


Роутинг похож на прежний, но с некоторыми приятными улучшениями. Например, если какой-нибудь громоздкий модуль приложения используется редко, можно подгружать его динамически:

{
  path: 'profile',
  loadChildren: 'app/profile/prodile.module#ProfileModule'
}

Обработка всех запросов, начинающихся с /profile (/profile/photo, /profile/orders, /profile/orders/:id), будет передана ProfileModule, который будет загружен раз при первой необходимости.

Низкий порог вхождения


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

На мой взгляд, это из-за того, что:

  • максимально используются возможности JavaScript,
  • многие вещи реализованы более логичным и ожидаемым образом,
  • качество подсказок и авто-завершения на высшем уровне (благодаря TypeScript),
  • имеется командная строка для генерации всего необходимого,
  • хорошая документация.

Но это не говорит о лёгкости его усвоения человеком не знающего JavaScript.

Заключение


Ещё много можно написать про новую версию фреймворка, сравнить основные сервисы, разобраться, как происходит работа с асинхронными операциями (Zone.js), упомянуть о реактивном программировании (Rx.js) и так далее. Но это уже будет не статья, а целая книга.

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

QuickStart

Успехов!
Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 80

    0

    Ради любопытства — сколько по времени вы уже используете 2-ю версию и много ли на ней готовых проектов? Какие используете библиотеки / наборы компонентов? Есть ли свои наработки? Если да, есть ли что-то в опенсорсе (или, может быть, планируете).


    Просто сам имею уже год работаю со второй версией, есть своя библиотека (пока внутренняя, но хочется привести её в порядок и сделать публичной) со многими UI компонентами. Интересно, как это всё обстоит в других командах.

      0
      Год с Angular2 + PrimeNG + ngrx/store & effects.
      Только вот решили выпилить ngrx.
        +1
        А почему вы решили выпилить ngrx?

        Мы используем его уже достаточно давно — впечатления только положительные.
          +1
          ngrx очень хорош, но для небольших приложений.
          У нас приложение — это по сути набор тулов для нашего бизнеса, и оно разрослось. Стало сложно работать с глобальным стейтом. Да и у ангуляра по сути все уже есть из коробки (Services + RxJS).

          Ну и есть пара проблем, 1) очень мало разработчиков понимают функциональщину, 2) всех у нас достало писать одинаковый код (все эти action, action creator, reducer и т.д.)
        0
        В коммерческих проектах фреймворк начали использовать сразу после выхода стабильной версии. До этого следили, изучали, писали тестовые приложения, устраивали внутренние митапы, делились, кто, что узнал нового.

        Вот недавно начали 3-й проект на нём.

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

        1. система мониторинга за состоянием крупной системы в реальном времени,
        2. большая база данных с возможностью просмотра всевозможных её срезов и агрегатов,
        3. и что-то типа сетевой игры в реальном времени.

        В таких проектах каждый компонент или элемент может быть сильно кастомизирован. Поэтому, по возможности, ради однородности кода пишем всё сами (если нет нативного аналога в браузере). Это не так уж и сложно, интересно и лишает боли в случае «неудобной» кастомизации. А такое случается часто, когда в календарь, например, необходимо встроить отображение различных событий, произошедших в системе с учётом их типов и интенсивности.

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

        К тому же, у нас хорошая команда дизайнеров, по запросу рисуют и дорисовывают всё необходимое — замена поиска необходимого элемента в UI библиотеке :-) — конечно, если бюджет проекта позволяет.

        А библиотеками пользуемся лишь базовыми moment.js, lodash, highcharts и подобными для удобства в различных ситуациях.
        +14
        Вот насчет «низкого порога вхождения» я не соглашусь. Чтобы сделать самое простое приложение на первом Angular, достаточно было скачать angular.js, подключить его в теге script и поехали. Для второй же версии понадобится целый зоопарк технологий и утилит — npm, tsc, typings, system.js, rx.js. Это нормально, потому что более серьезный подход требует больше усилий при старте, но порог вхождения абсолютно точно выше.

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

          Angular CLI сильно упрощает настройку окружения и других рутинных штук до 4-5 команд в консоли. Но да, чтобы начать разрабатывать что-то более-менее серьёзное, нужно немного потрудиться. Порог вхождения действительно не такой уж низкий.

            0
            По-моему, с ней на тот момент тоже не получилось. Кроме того, у меня было специфическое требование по сборке — все библиотечные файлы в один минифицированный .js, весь пользовательский код — в другой, оба подключить через script и никакой динамической загрузки.

            Так что чтобы утилита начала упрощать жизнь, сначала к ней самой нужно как следует привыкнуть :)
              0

              можете поделиться рецептом?
              я работаю из VS, и пытаюсь сделать все там.
              максимум чего я добился это чтоб мне создало единый файл, но он все равно не был единым нифига(
              (то есть тот же zone.js был нужен и тп)

                +1
                Вот примерно так оно выглядело. Сейчас уже пример почему-то не собирается, так что воспользоваться out of the box не получится, но надеюсь что хотя бы как-то поможет.
              +1
              То что для вас немного потрудиться, для других полный ступор. Я даже с вашей ссылкой не понимаю как скачать эту самую утилиту. И где тот прежний мир, где софт скачивался по кнопке download…
                0

                "Скачивать" её надо через пакетный менеджер npm. Это азы современной фронт-енд разработки. Вы уж извините, но совсем без знаний и желания разобраться в матчасти не стоит заниматься разработкой.

                  +4
                  В статье обсуждается разница между Angular и Angular 2. Для первого не нужно было познавать эти адские «азы», а для второго это необходимое требование, через которое не все могут перешагнуть. Для первого я могу продолжать заниматься разработкой, а для второго вы мне отказываете в элементарной помощи и предлагаете сменить профессию.
                    –2

                    Извините, но вас что, забанили в гугле?


                    1. Идете по ссылке, которую вам дали. Видите команду в разделе Installation: npm install -g angular-cli
                    2. Вбиваете в гугл непонятную программу (npm). Первая же ссылка — на Википедию:

                    npm(Node.js Package Manager) — менеджер пакетов, входящий в состав Node.js.

                    1. Идете на сайт node.js и скачиваете. Той самой кнопкой download.
                    2. После установки ноды пишете в консоли npm install -g angular-cli.

                    Все, программа у вас.

                      0
                      Свежескачанный node.exe после запуска пишет > с пробелом и больше ничего. Гадания типа help приводят к:
                      ReferenceError: help is not defined
                      at repl:1:1
                      at sigintHandlersWrap (vm.js:22:35)
                      at sigintHandlersWrap (vm.js:96:12)
                      at ContextifyScript.Script.runInThisContext (vm.js:21:12)
                      at REPLServer.defaultEval (repl.js:346:29)
                      at bound (domain.js:280:14)
                      at REPLServer.runBound [as eval] (domain.js:293:12)
                      at REPLServer. (repl.js:545:10)
                      at emitOne (events.js:101:20)
                      at REPLServer.emit (events.js:188:7)
                        0

                        Вы невнимательны. Надо не node запускать, а npm. Они вместе ставятся.

                          0

                          А теперь покажите мне строку в документации, где сказано, что нужно запускать ноду? Там же явно написно: npm i -g angular-cli. Ну где там хоть строка про ноду?

                            0
                            Хорошо, признаю что ошибся и был не прав, что запустил node.exe. Почему всё таки нельзя найти вебсайт, где можно скачать напрямую angular-cli.exe?
                              0

                              Потому что angular-cli — это скрипт, а не программа. Более того, это скрипт, который создает окружение разработчика, используещее инструменты, которые тоже являются скриптами, а не программами.


                              Более того, angular-cli загружает библиотеки при помощи npm. Вот и получается, что нет никакого смысла ставить angular-cli отдельно.

                                0
                                Окей, angular-cli это не утилита которая упрощает жизнь, а скрипт который не является программой (что бы это не означало...)
                                После запуска этого магического скрипта, мне станет доступна команда ng, она то хоть является программой?
                                  0

                                  ng — это и есть angular-cli.

                                    +7
                                    Великолепна вся ветка целиком. "ng — это и есть angular-cli" что непонятно-то?" Просто великолепно.

                                    Вспомнились сразу целая куча юмористических статей на тему «что нужно знать чтобы ...» Только там это как анекдот, а тут — на полном серьёзе… Мне жаль сейчас любого кто начинает что-то изучать в айти. У меня опыт около 30 лет и то иногда трудно… А новичкам… не завидую.
                                      +1
                                      Казалось бы, идет речь об апгрейде клиентского javascript фреймворка с первой версии на вторую. Как бы там не предупреждали что это разные фреймворки, но это на самом деле два разных мира программирования в принципе. Первый просто подключается и с помощью документации создается html верстка для него. Второй требует погружения в дивный мир коммандлайновых программ на рабочей машине, которые устанавливают другие программы, которые устанавливают очередные программы, которые все не являются программами, а скриптами, которые исполняет другая программа, которую нельзя запустить
                                        0

                                        Это вы еще IDE искать не пытались!

                                          0
                                          Я за 30+ лет все пытался :)
                                          –1
                                          https://habrahabr.ru/post/312022/
                                            +1
                                            Добро пожаловать в мир современного веб клиентсайда.
                              0

                              Если вы хотите заниматься современной веб-разработкой сложных проектов (для которых как раз и подходит второй ангуляр), но не смогли поставить ноду и набрать в консоли 4 команды:


                              npm install -g angular-cli
                              ng new PROJECT_NAME
                              cd PROJECT_NAME
                              ng serve

                              то да, я отказываюсь объяснять такие элементарные вещи. Если не понимаете, то сходите на курсы, почитайте материал в интернете, его очень много. Почитайте официальные доки и quickstart. Если хотите зарабатывать знаниями, в них надо вложиться сперва. Либо деньгами, либо временем, либо и тем и другим. Увы, по-другому никак, само собой всё не получится.
                              Я разобрался сам. Мои коллеги из мира бэк-енда разобрались.


                              На счёт адских азов: 2-й ангуляр не требует ни знания typescript (и даже es6), ни npm, ни webpack или systemjs. Просто с ними куда удобнее. Хотите — подключайте готовые js прямо на страницу и пишите на чистом javascript.

                                0

                                Насчет "и даже es6" вы лукавите. Там же в документации все примеры — на typescript или es6. На старом js писать можно — но для этого надо знать es6 в объеме, достаточном для транслирования документации к старым стандартам "в уме".

                                +1
                                Хотите — подключайте готовые js прямо на страницу


                                Где взять готовые js, которые можно подключить?
                                  0
                                      <script src="https://unpkg.com/rxjs@5.0.1/bundles/Rx.js"></script>
                                      <script src="https://unpkg.com/@angular/core/bundles/core.umd.js"></script>
                                      <script src="https://unpkg.com/@angular/common/bundles/common.umd.js"></script>
                                      <script src="https://unpkg.com/@angular/compiler/bundles/compiler.umd.js"></script>
                                      <script src="https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
                                      <script src="https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>

                                  Хотя сомневаюсь, что это как-то поможет. Ведь всё это есть в документации (ссылку на нужную страницу я уже приводил в комментах тут). Но вы, как вижу, документаций не читаете.

                                    0
                                    Ок, спасибо, возвращаюсь в профессию. А unpkg.com это надежный сайт? Написан каким то Майклом Джексоном
                                  0
                                  Справедливости ради — вся эта красота отлично работает, до тех пор пока вы используете node.js в качестве бекенда. Если бекенд другой (в моем случае — ASP.NET), то все современные node-js-build-based технологии оборачиваются изрядными плясками с бубном (я несколько дней пытался заставить работать React+Webpack с хваленым «живым обновлением», смог, но не до конца. Да, я мало разбираюсь в ноде)
                                    0

                                    Надо просто разделять бэкенд API и сервер, где лежит статика.

                                      0
                                      А что не так со связкой Angular 2 + ASP.NET?)
                                        +1
                                        Тоже интересно, наоборот фишка Angular в том что его можно спокойно использовать в cshtml файлах вместе с razor и контролировать это через MVC контроллер (допустим добавить HTTP заголовок на определенную страницу, что бы ее не добавлять в кэш ангуляра, без добавления констант в текст HTML и его парсинга как в основном советуют на SA).

                                        С Angular 2 не работал, но шаблон там указывается так же как и в первой версии.
                          0
                          А кто-нибудь решил проблему с медленным стартом ангуляр 2? Насколько я понял, есть какая-то пауза между загрузкой скриптов и запуском самого приложения. Интересно, что происходит в это время и как бы эту паузу сократить до нуля?
                            0

                            1) AoT-компиляция (по-умолчанию, там JIT-компиляция всего в браузере)
                            2) Пререндер с помощью Angular universal. Правда, примеров использования пока немного, но проект развивается.

                              0
                              Ну вот после AoT-компиляции есть какая-то непонятная пауза. То есть, есть проект скомпилированный для продакшена. Когда открываешь его страницу, то видно, что все скрипты загружены, а пауза перед началом работы приложения все равно есть…
                            0
                            А насколько вообще актуален Angular 2 сейчас для новых проектов, если уже Angular 4 на весну анонсировали? Я просто тоже недавно выбирал для себя фреймоворк, и глядя на то как люди второй раз переписывают с его нуля, и устраивают шоу с версиями остановился на Vue.
                              0
                              Angular 3,4 это продолжение Angular2, версионирование изменили
                                0
                                Терерь просто Angular.
                                http://angularjs.blogspot.ru/2016/12/ok-let-me-explain-its-going-to-be.html
                              0

                              А как собирается проект/компонент? С импортами понятно, а что происходит со всеми этими литералами './player.component.html', ['./player.component.styl']?

                              • UFO just landed and posted this here
                                  0

                                  18 секунд? Обалдеть. Что это у вас там такое монструозное? Вероятно, какие-то проблемы с модульностью? Отсутствие динамической подгрузки и пр.?

                                  • UFO just landed and posted this here
                                      0
                                      Попробуйте сжимать трафик. Я у себя включил максимальное сжатие и бандл размером почти 3МБ превратился в 350-400кб трафика для клиента. Приложение стало загружаться намного быстрее при имитации 3G. Плюс можно некоторые роуты вынести из бандла и загружать их динамически. А ещё можно какую-нибудь CSS анимацию воткнуть в index.html, чтобы пользователь не скучал эти 18 секунд :)
                                    +1
                                    Используйте AoT компиляцию, сборку с флагом prod (ng build --prod --aot) и серверное gzip сжатие. На выходе получите ~300кб.
                                    • UFO just landed and posted this here
                                        0
                                        Даже интерфейс стал заметно работать шустрее

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

                                      0

                                      Судя по 5мб видимо вы собирали не в режиме prod а в режиме dev. В этом случае все скрипты не минифицируются зато за счет этого всегда можно посмотреть на какой строке произошла ошибка. В режиме prod среднеразмерный проект у нас компилируется в ~700КБ

                                      • UFO just landed and posted this here
                                      +4
                                      С первого ангуляра сильно проще перейти на vue, нежели на второй ангуляр.
                                        0
                                        Благодаря этой реализации в Angular 2 нет вотчеров, которые ранее являлись источников многих проблем с производительностью. Теперь всё более естественно.

                                        Не понятно как избавились от вотчеров? Если есть компонент с одним полем foo: string = "bar"; а в шаблоне биндится это поле <otherComponent [field]="foo"></otherComponent> то тут нету EventEmmiter'ов — но обновление данных в шаблоне при изменении в родительском компоненте все равно работает. Выглядит так будто все таки в ангуляре происходит пулл данных в цикле, потому что явно событие об изменении поля foo ни где не генерируется.


                                        зы: Пока из того что бесит в ng2:
                                        Непонятно как работает интерполяция.
                                        Внутри не работает (пришлось писать костыль);
                                        Директиву интерполяцией в элемент нельзя добавить
                                        <div {{flag ? 'someDirective' : ''}}> — так интерполяция работает, но директива потом не отрабатывает, просто вставляется как текст.
                                        Из за этого не получается добавить директиву по условию. Пока нашел только способ передавать в саму директиву флаг "включения" <div someDirective="flag">, но это костыль.


                                        Вот в такой ситуации <div class="123" [class]="classField"> — класс 123 будет выкинут. Тоже самое если добавлять классы к хосту @Component(... host: {'[class]': '123' }). Не очевидное место — долго искал почему у меня нифига стили не накладываются.


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

                                          0
                                          Из за этого не получается добавить директиву по условию.

                                          Используйте *ngIf
                                            0
                                            Используйте *ngIf

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

                                            +1
                                            Не понятно как избавились от вотчеров?

                                            Насколько я во всём этом разобрался, всё работает следующим образом.


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


                                            После исполнения каждой асинхронной функции Angular сравнивает все поля объектов и ищет, какие изменились, и при обнаружении таковых запускает процедуру обновления. Так что, можно сказать, цикл $digest никуда не делся, просто ушёл на уровень Event Loop — что сильно разгрузило Angular и позволило ему работать со скоростью, сопоставимой с React и ему подобными.


                                            Подробнее в статьях на thoughtram:



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

                                              Гляньте PrimeNG. Конечно для Angular сейчас пока беда с UI либами, но эта из всего что я пробовал лучшая по функционалу и по скорости развития.
                                                0
                                                Либа отличная, но тянет с собой JQuery UI, который не во всех ситуациях приемлем)
                                                  0
                                                  Разве? По моему они его уже выпилили. И в версии 2 там тоже много оптимизаций.
                                              0
                                              Недавно начал изучать AngularJS 1. А тут читаю: «Низкий порог вхождения». Это как понять. А для первого Ангулара, тогда какой порог вхождения?
                                                +1
                                                Без разницы какой там порог, он индивидуальный для каждого человека, нет стандарта IQ или чего бы там ни было.

                                                Очень важно найти хороший материал, я вот читал статьи на хабре, официальную доку, видео на youtube — и до конца не понимал как там что работает. А все потому что не каждый может объяснить сложные вещи простым языком, обычно на оборот хорошо получается. Ангуляр не сложный и не простой, нужно только правильно «приготовить» материал для обучения.

                                                Лучший курс который я видел по Angular — https://itvdn.com/ru/video/angular-js.
                                                Стайл гайд (говорят по первой версии официального не было, каждый как мог делал, на втором уже есть стандарт) — http://devacademy.ru/posts/rukovodstvo-po-stilyu-programmirovaniya-i-oformleniya-prilozhenij-na-angularjs/
                                                Практические примеры — https://www.codementor.io/learn-angularjs
                                                  0
                                                  Ну мне достался проект на Ангуларе, до этого вообще о нем ничего не знал. Сразу конечно было все очень необычно, но задачки надо решать и задачки решены… И базовые вещи усвоены. Теперь вот на свой проектик пытаюсь прикрутить на фронт Ангулар… На офсайте почему то мало документации… Базовые вещи вот тут еще есть http://www.w3schools.com/angular/default.asp
                                                –1
                                                У вас ошибки в названиях. Во-первых правильно не Angular 2, а Angular, и последнее название появилось уже после выхода Angular 2, а во вторых вы говорите на самом деле про AngularJS, подразумевая предшественника Angular 2
                                                  0
                                                  Спасибо. Да, формально это более корректно, но статья для людей, таких же разработчиков, как я. Поэтому все всё понимают :)
                                                    –2
                                                    Так если статья для разработчиков, почему же придерживаться более формального языка? Я понимаю когда такие ошибки допускают на новостных ресурсах, когда люди не имеющего никакого отношения к коду допускают подобные искажения. Но разве вам приятно искать информацию про Angular и попадать на страницы про AngularJS?
                                                      0
                                                      То есть вы предлагаете назвать статью AngularJS vs Angular?
                                                        0
                                                        Не только назвать, но еще и текст поменять соответствующим образом. Пусть и выглядит немного странновато, но так будет правильно:) Постепенно привыкнем и про AngularJS забудем совсем.
                                                        Так как
                                                        Поэтому все всё понимают :)
                                                  0
                                                  Angular 2 решает множество проблем, связанных с высоким уровнем связанности кода, новой мощной реализацией Dependency Injection

                                                  Казалось бы, причем тут SOLID. Подозреваю что автор путает dependency inversion и dependency injection.

                                                    0
                                                    Во-первых, вы приводите не всю фразу полностью, выдёргивая контекст. Там ещё говорилось про интерфейсы. А во-вторых, речь была про возможность удобной реализации этих принципов, используя фреймворк.
                                                      –1
                                                      Там ещё говорилось про интерфейсы.

                                                      Использование интерфейсов еще не говорит что вы инвертировали зависимости.


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


                                                      С другой стороны, мы говорим о UI компонентах (если мы рассматриваем пример в статье). Из сервисов им стоит давать только сервисы уровня приложения, которые будут иметь строго одну реализацию (по сути реализация какого-то юз-кейса, ну или проще — делегирование операции записи). В этом случае соблюдать DiP нет особо смысла (вам же важно что бы логика не зависела от UI а не наоборот). Все остальное будет попахивать нарушением SRP (инджект сервисов для получения данных, вместо инджекта непосредственно данных через биндинги компонента).

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

                                                          Ну по сути в этом абзаце больше про преимущества inversion-of-control нежели SOLID. Хотя отдельный цикл статей (я думаю в одну не влезет) о том как применение этих принципов помогает держать под контролем сложность поддержки приложениа на ангуляре было бы круто увидеть. Может кому-то это даст идею для статей.

                                                        0

                                                        Так можно все же услышать подробнее как вы используете DiP в контексте компонентов?

                                                          0
                                                          Я с вами солидарен, сложно придумать применение DiP в контексте UI компонентов.
                                                      +1
                                                      В Angular 2 появился новый синтаксис, который позволяет передавать значения свойств дочерним компонентам (one-way binding).

                                                      В пермов ангуляре one-way binding тоже есть, появился вместе с компонентами, больше года назад.


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

                                                        0
                                                        В пермов ангуляре one-way binding тоже есть, появился вместе с компонентами, больше года назад.

                                                        Разница в том что в angular как такового 2way биндинга нет, есть сахар для организации оного. В angular 1.x же one-way биндинг сделан поверх two-way. Больше накладных расходов, но безопаснее да.


                                                        Я бы поставил VueJS и Angular2 на один уровень,

                                                        Это инструменты совершенно разного уровня.

                                                      Only users with full accounts can post comments. Log in, please.