Эта статья ориентирована на тех крутых ребят, которые разрабатывают на 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 с минимально необходимым кодом компонента:
- файл реализации,
- файл шаблона,
- файл стилей с расширением используемого CSS препроцессора,
- файл юнит-тестов.
Никаких копипастов — источника зла и ошибок! Сгенерированный код реализации компонента будет такой:
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 здесь – и есть пример декоратора. В конечном счёте, это простая функция, которая получает в качестве аргумента конструктор, определённый ниже, и изменяет его с учётом описанной конфигурации, в данном случае это:
- selector – определяет, как будет называться элемент компонента в шаблонах приложения (<app-player></app-player>),
- templateUrl – путь к файлу шаблона текущего компонента,
- 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:
- передача исходного значения свойства,
- подписка на событие с названием «название свойства внутри дочернего компонента» + «Change»,
- изменение свойства в родительском компоненте при появлении события.
А запись [(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
Успехов!
Комментарии (80)
impwx
20.01.2017 14:26+14Вот насчет «низкого порога вхождения» я не соглашусь. Чтобы сделать самое простое приложение на первом Angular, достаточно было скачать
angular.js, подключить его в тегеscriptи поехали. Для второй же версии понадобится целый зоопарк технологий и утилит — npm, tsc, typings, system.js, rx.js. Это нормально, потому что более серьезный подход требует больше усилий при старте, но порог вхождения абсолютно точно выше.
Первая настройка рабочего окружения у меня заняла полтора дня. Наверняка так получилось из-за того, что только-только вышел RC с довольно серьезными изменениями, а все мануалы еще были ориентированы на Beta. Надеюсь, с тех пор это сильно упростилось.
bromzh
20.01.2017 14:29+2Angular CLI сильно упрощает настройку окружения и других рутинных штук до 4-5 команд в консоли. Но да, чтобы начать разрабатывать что-то более-менее серьёзное, нужно немного потрудиться. Порог вхождения действительно не такой уж низкий.
impwx
20.01.2017 14:39По-моему, с ней на тот момент тоже не получилось. Кроме того, у меня было специфическое требование по сборке — все библиотечные файлы в один минифицированный .js, весь пользовательский код — в другой, оба подключить через
scriptи никакой динамической загрузки.
Так что чтобы утилита начала упрощать жизнь, сначала к ней самой нужно как следует привыкнуть :)
ColdPhoenix
20.01.2017 20:32можете поделиться рецептом?
я работаю из VS, и пытаюсь сделать все там.
максимум чего я добился это чтоб мне создало единый файл, но он все равно не был единым нифига(
(то есть тот же zone.js был нужен и тп)impwx
20.01.2017 22:07+1Вот примерно так оно выглядело. Сейчас уже пример почему-то не собирается, так что воспользоваться out of the box не получится, но надеюсь что хотя бы как-то поможет.
mtt
20.01.2017 15:48+1То что для вас немного потрудиться, для других полный ступор. Я даже с вашей ссылкой не понимаю как скачать эту самую утилиту. И где тот прежний мир, где софт скачивался по кнопке download…
bromzh
20.01.2017 16:24"Скачивать" её надо через пакетный менеджер npm. Это азы современной фронт-енд разработки. Вы уж извините, но совсем без знаний и желания разобраться в матчасти не стоит заниматься разработкой.
mtt
20.01.2017 16:42+4В статье обсуждается разница между Angular и Angular 2. Для первого не нужно было познавать эти адские «азы», а для второго это необходимое требование, через которое не все могут перешагнуть. Для первого я могу продолжать заниматься разработкой, а для второго вы мне отказываете в элементарной помощи и предлагаете сменить профессию.
mayorovp
20.01.2017 17:08-2Извините, но вас что, забанили в гугле?
- Идете по ссылке, которую вам дали. Видите команду в разделе Installation:
npm install -g angular-cli - Вбиваете в гугл непонятную программу (npm). Первая же ссылка — на Википедию:
npm(Node.js Package Manager) — менеджер пакетов, входящий в состав Node.js.
- Идете на сайт node.js и скачиваете. Той самой кнопкой download.
- После установки ноды пишете в консоли
npm install -g angular-cli.
Все, программа у вас.
mtt
20.01.2017 17:15Свежескачанный 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)bromzh
20.01.2017 17:18А теперь покажите мне строку в документации, где сказано, что нужно запускать ноду? Там же явно написно:
npm i -g angular-cli. Ну где там хоть строка про ноду?
mtt
20.01.2017 17:26Хорошо, признаю что ошибся и был не прав, что запустил node.exe. Почему всё таки нельзя найти вебсайт, где можно скачать напрямую angular-cli.exe?
mayorovp
20.01.2017 17:34Потому что angular-cli — это скрипт, а не программа. Более того, это скрипт, который создает окружение разработчика, используещее инструменты, которые тоже являются скриптами, а не программами.
Более того, angular-cli загружает библиотеки при помощи npm. Вот и получается, что нет никакого смысла ставить angular-cli отдельно.
mtt
20.01.2017 17:46Окей, angular-cli это не утилита которая упрощает жизнь, а скрипт который не является программой (что бы это не означало...)
После запуска этого магического скрипта, мне станет доступна команда ng, она то хоть является программой?mayorovp
20.01.2017 17:58ng — это и есть angular-cli.
vdasus
20.01.2017 18:53+7Великолепна вся ветка целиком. "ng — это и есть angular-cli" что непонятно-то?" Просто великолепно.
Вспомнились сразу целая куча юмористических статей на тему «что нужно знать чтобы ...» Только там это как анекдот, а тут — на полном серьёзе… Мне жаль сейчас любого кто начинает что-то изучать в айти. У меня опыт около 30 лет и то иногда трудно… А новичкам… не завидую.mtt
20.01.2017 19:09+1Казалось бы, идет речь об апгрейде клиентского javascript фреймворка с первой версии на вторую. Как бы там не предупреждали что это разные фреймворки, но это на самом деле два разных мира программирования в принципе. Первый просто подключается и с помощью документации создается html верстка для него. Второй требует погружения в дивный мир коммандлайновых программ на рабочей машине, которые устанавливают другие программы, которые устанавливают очередные программы, которые все не являются программами, а скриптами, которые исполняет другая программа, которую нельзя запустить
- Идете по ссылке, которую вам дали. Видите команду в разделе Installation:
bromzh
20.01.2017 17:16Если вы хотите заниматься современной веб-разработкой сложных проектов (для которых как раз и подходит второй ангуляр), но не смогли поставить ноду и набрать в консоли 4 команды:
npm install -g angular-cli ng new PROJECT_NAME cd PROJECT_NAME ng serve
то да, я отказываюсь объяснять такие элементарные вещи. Если не понимаете, то сходите на курсы, почитайте материал в интернете, его очень много. Почитайте официальные доки и quickstart. Если хотите зарабатывать знаниями, в них надо вложиться сперва. Либо деньгами, либо временем, либо и тем и другим. Увы, по-другому никак, само собой всё не получится.
Я разобрался сам. Мои коллеги из мира бэк-енда разобрались.
На счёт адских азов: 2-й ангуляр не требует ни знания typescript (и даже es6), ни npm, ни webpack или systemjs. Просто с ними куда удобнее. Хотите — подключайте готовые js прямо на страницу и пишите на чистом javascript.
mayorovp
20.01.2017 17:22Насчет "и даже es6" вы лукавите. Там же в документации все примеры — на typescript или es6. На старом js писать можно — но для этого надо знать es6 в объеме, достаточном для транслирования документации к старым стандартам "в уме".
bromzh
20.01.2017 17:28Нет, там есть DSL для написания кода без фишек es6.
https://blog.thoughtram.io/angular/2015/05/09/writing-angular-2-code-in-es5.html
Даже в доках где-то видел сравнение, там были версии кода на TS, es6-7 + декораторы, es6 без декораторов и es5 + DSL
https://angular.io/docs/ts/latest/cookbook/ts-to-js.html#!#dsl
mtt
20.01.2017 17:31+1Хотите — подключайте готовые js прямо на страницу
Где взять готовые js, которые можно подключить?bromzh
20.01.2017 17:46<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>
Хотя сомневаюсь, что это как-то поможет. Ведь всё это есть в документации (ссылку на нужную страницу я уже приводил в комментах тут). Но вы, как вижу, документаций не читаете.
mtt
20.01.2017 17:52Ок, спасибо, возвращаюсь в профессию. А unpkg.com это надежный сайт? Написан каким то Майклом Джексоном
Alex_ME
20.01.2017 22:01Справедливости ради — вся эта красота отлично работает, до тех пор пока вы используете node.js в качестве бекенда. Если бекенд другой (в моем случае — ASP.NET), то все современные node-js-build-based технологии оборачиваются изрядными плясками с бубном (я несколько дней пытался заставить работать React+Webpack с хваленым «живым обновлением», смог, но не до конца. Да, я мало разбираюсь в ноде)
denismaster
21.01.2017 00:10А что не так со связкой Angular 2 + ASP.NET?)
Dywar
21.01.2017 09:47+1Тоже интересно, наоборот фишка Angular в том что его можно спокойно использовать в cshtml файлах вместе с razor и контролировать это через MVC контроллер (допустим добавить HTTP заголовок на определенную страницу, что бы ее не добавлять в кэш ангуляра, без добавления констант в текст HTML и его парсинга как в основном советуют на SA).
С Angular 2 не работал, но шаблон там указывается так же как и в первой версии.
igorch96
20.01.2017 14:49А кто-нибудь решил проблему с медленным стартом ангуляр 2? Насколько я понял, есть какая-то пауза между загрузкой скриптов и запуском самого приложения. Интересно, что происходит в это время и как бы эту паузу сократить до нуля?
bromzh
20.01.2017 15:031) AoT-компиляция (по-умолчанию, там JIT-компиляция всего в браузере)
2) Пререндер с помощью Angular universal. Правда, примеров использования пока немного, но проект развивается.igorch96
21.01.2017 19:10Ну вот после AoT-компиляции есть какая-то непонятная пауза. То есть, есть проект скомпилированный для продакшена. Когда открываешь его страницу, то видно, что все скрипты загружены, а пауза перед началом работы приложения все равно есть…
pmcode
20.01.2017 17:17А насколько вообще актуален Angular 2 сейчас для новых проектов, если уже Angular 4 на весну анонсировали? Я просто тоже недавно выбирал для себя фреймоворк, и глядя на то как люди второй раз переписывают с его нуля, и устраивают шоу с версиями остановился на Vue.
sentyaev
20.01.2017 18:25Терерь просто Angular.
http://angularjs.blogspot.ru/2016/12/ok-let-me-explain-its-going-to-be.html
tenbits
20.01.2017 18:29А как собирается проект/компонент? С импортами понятно, а что происходит со всеми этими литералами
'./player.component.html', ['./player.component.styl']?
AlgenGold
20.01.2017 19:53Со многим о чем вы пишете, солидарен. Как только вышла стабильная версия, сразу переписал свое приложение, и действительно многие вещи гораздо лучше реализованы, код стал более понятен, и работа приложения стала стабильнее. Только сейчас столкнулся с проблемой размера приложения, оно весит примерно 5мб и грузится около 10-18сек. Оно конечно потом летает, но загрузка ооочень долгая. Решил сделать серверный рендер, и столкнулся с рядом проблем, а именно конфликт зависимостей из-за того что ангуляр меняет версии быстрыми темпами, а другие пакеты это делают не так часто. Используя angular-universal (единственное средство на текущий момент по серверному рендеру) пришлось приложение даунгрейдить с версии angular2.4 до версии 2.2.
Вы пробовали используя angular-cli прикрутить angular-universal (рендеринг на сервере)? Может быть вы решили проблему серверного рендеринга другим способом? Сколько весит ваше приложение?
faiwer
20.01.2017 19:5918 секунд? Обалдеть. Что это у вас там такое монструозное? Вероятно, какие-то проблемы с модульностью? Отсутствие динамической подгрузки и пр.?
AlgenGold
20.01.2017 21:57забыл указать что это на имитации 3G соединения такое время показывает, но это все равно плохой результат.
При соединении «no throttling» 2-4сек приложение грузится.
самый большой монстр это vendor.bundle.js — 1.2mb, остальные файлы не больше 300кб, а самые тяжелые это map файлы, до 10мб(но что с ними, что без них результат одинаковый)
zBit
23.01.2017 15:12Попробуйте сжимать трафик. Я у себя включил максимальное сжатие и бандл размером почти 3МБ превратился в 350-400кб трафика для клиента. Приложение стало загружаться намного быстрее при имитации 3G. Плюс можно некоторые роуты вынести из бандла и загружать их динамически. А ещё можно какую-нибудь CSS анимацию воткнуть в index.html, чтобы пользователь не скучал эти 18 секунд :)
LFedorov
21.01.2017 15:18+1Используйте AoT компиляцию, сборку с флагом prod (ng build --prod --aot) и серверное gzip сжатие. На выходе получите ~300кб.
AlgenGold
21.01.2017 22:36+1Спасибо большое! попробовал собрать с параметром --aot, результат превзошел все ожидания))
Даже интерфейс стал заметно работать шустрее
Fesor
21.01.2017 23:50Даже интерфейс стал заметно работать шустрее
В этом же и суть, все вьюхи/код для трекинга изменений данных компилируются на этапе сборки.
TSR2013
21.01.2017 15:35Судя по 5мб видимо вы собирали не в режиме prod а в режиме dev. В этом случае все скрипты не минифицируются зато за счет этого всегда можно посмотреть на какой строке произошла ошибка. В режиме prod среднеразмерный проект у нас компилируется в ~700КБ
AlgenGold
21.01.2017 22:47если считать размер *.gz файлов которые получаются при компиляции то размер 410кб, а если считать размер всех не сжатых js то примерно 2мб получается.
Но благодаря советам выше, сейчас приложение грузится почти мгновенно.
to2n
20.01.2017 23:45Благодаря этой реализации в 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-обертку.
Lodin
21.01.2017 20:31+1Не понятно как избавились от вотчеров?
Насколько я во всём этом разобрался, всё работает следующим образом.
Для избавления от вотчеров Angular использует библиотеку zone.js, которая создаёт для приложения контекст, в котором все нативные асинхронные функции заменяются на их усовершенствованные реализации, которые позволяют встраивать дополнительные коллбэки до и после выполнения этой функции.
После исполнения каждой асинхронной функции Angular сравнивает все поля объектов и ищет, какие изменились, и при обнаружении таковых запускает процедуру обновления. Так что, можно сказать, цикл $digest никуда не делся, просто ушёл на уровень Event Loop — что сильно разгрузило Angular и позволило ему работать со скоростью, сопоставимой с React и ему подобными.
Подробнее в статьях на thoughtram:
ozknemoy
20.01.2017 23:50+1фреймворк быстрый, но всего лишь немного быстрее настроенного первого ангулара. многие даже dev режим не выключают в продакшене. порог вхождения не изменился. документация слабовата. по единичке лучше. модулей пока малова то. удивляюсь как вообще люди что то писали год назад без них. не лендинги же. масок единицы, кроперов, датапикеров и тд тоже немного. матириал дизайн куций. пишу админку на нем. понятно что за ним будущее, но пока малова то всего. особо радует пререндер. в принципе это то изза чего стал его осваивать, другие проблемы решаются полностью единицей.
sentyaev
21.01.2017 04:51матириал дизайн куций
Гляньте PrimeNG. Конечно для Angular сейчас пока беда с UI либами, но эта из всего что я пробовал лучшая по функционалу и по скорости развития.denismaster
21.01.2017 20:14Либа отличная, но тянет с собой JQuery UI, который не во всех ситуациях приемлем)
sentyaev
21.01.2017 20:59Разве? По моему они его уже выпилили. И в версии 2 там тоже много оптимизаций.
ArtVol
20.01.2017 23:50Недавно начал изучать AngularJS 1. А тут читаю: «Низкий порог вхождения». Это как понять. А для первого Ангулара, тогда какой порог вхождения?
Dywar
21.01.2017 09:42+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-angularjsArtVol
21.01.2017 11:28Ну мне достался проект на Ангуларе, до этого вообще о нем ничего не знал. Сразу конечно было все очень необычно, но задачки надо решать и задачки решены… И базовые вещи усвоены. Теперь вот на свой проектик пытаюсь прикрутить на фронт Ангулар… На офсайте почему то мало документации… Базовые вещи вот тут еще есть http://www.w3schools.com/angular/default.asp
webmasterx
21.01.2017 10:44-1У вас ошибки в названиях. Во-первых правильно не Angular 2, а Angular, и последнее название появилось уже после выхода Angular 2, а во вторых вы говорите на самом деле про AngularJS, подразумевая предшественника Angular 2
alex-chuev
21.01.2017 11:42Спасибо. Да, формально это более корректно, но статья для людей, таких же разработчиков, как я. Поэтому все всё понимают :)
webmasterx
21.01.2017 15:12-2Так если статья для разработчиков, почему же придерживаться более формального языка? Я понимаю когда такие ошибки допускают на новостных ресурсах, когда люди не имеющего никакого отношения к коду допускают подобные искажения. Но разве вам приятно искать информацию про Angular и попадать на страницы про AngularJS?
alex-chuev
21.01.2017 15:33То есть вы предлагаете назвать статью AngularJS vs Angular?
webmasterx
21.01.2017 16:17Не только назвать, но еще и текст поменять соответствующим образом. Пусть и выглядит немного странновато, но так будет правильно:) Постепенно привыкнем и про AngularJS забудем совсем.
Так как
Поэтому все всё понимают :)
Fesor
21.01.2017 14:04Angular 2 решает множество проблем, связанных с высоким уровнем связанности кода, новой мощной реализацией Dependency Injection
Казалось бы, причем тут SOLID. Подозреваю что автор путает dependency inversion и dependency injection.
alex-chuev
21.01.2017 14:38Во-первых, вы приводите не всю фразу полностью, выдёргивая контекст. Там ещё говорилось про интерфейсы. А во-вторых, речь была про возможность удобной реализации этих принципов, используя фреймворк.
Fesor
21.01.2017 22:03-1Там ещё говорилось про интерфейсы.
Использование интерфейсов еще не говорит что вы инвертировали зависимости.
Какому модулю будут принадлежать интерфейсы? Если интерфейс будет принадлежать тому же модулю, где будет реализация, то никакой инверсии у нас тут не произошло.
С другой стороны, мы говорим о UI компонентах (если мы рассматриваем пример в статье). Из сервисов им стоит давать только сервисы уровня приложения, которые будут иметь строго одну реализацию (по сути реализация какого-то юз-кейса, ну или проще — делегирование операции записи). В этом случае соблюдать DiP нет особо смысла (вам же важно что бы логика не зависела от UI а не наоборот). Все остальное будет попахивать нарушением SRP (инджект сервисов для получения данных, вместо инджекта непосредственно данных через биндинги компонента).
alex-chuev
24.01.2017 10:54Пример в статье больше для иллюстрации SRP и отсутствие надобности создавать экземпляр передаваемого сервиса с учётом всех его зависимостей внутри компонента, всё разрулит Angular DI. Вы считаете, этот момент нужно как-то подкорректировать?
Fesor
25.01.2017 12:16Вы считаете, этот момент нужно как-то подкорректировать?
Ну по сути в этом абзаце больше про преимущества inversion-of-control нежели SOLID. Хотя отдельный цикл статей (я думаю в одну не влезет) о том как применение этих принципов помогает держать под контролем сложность поддержки приложениа на ангуляре было бы круто увидеть. Может кому-то это даст идею для статей.
Fesor
24.01.2017 09:45Так можно все же услышать подробнее как вы используете DiP в контексте компонентов?
alex-chuev
24.01.2017 10:54Я с вами солидарен, сложно придумать применение DiP в контексте UI компонентов.
serf
22.01.2017 09:21+1В Angular 2 появился новый синтаксис, который позволяет передавать значения свойств дочерним компонентам (one-way binding).
В пермов ангуляре one-way binding тоже есть, появился вместе с компонентами, больше года назад.
Я бы поставил VueJS и Angular2 на один уровень, Angular2 конечно при этом гораздо более "инженерно ориентированный" (не совсем подойдет для скрипт кидди).
Fesor
22.01.2017 13:27В пермов ангуляре one-way binding тоже есть, появился вместе с компонентами, больше года назад.
Разница в том что в angular как такового 2way биндинга нет, есть сахар для организации оного. В angular 1.x же one-way биндинг сделан поверх two-way. Больше накладных расходов, но безопаснее да.
Я бы поставил VueJS и Angular2 на один уровень,
Это инструменты совершенно разного уровня.
bromzh
Ради любопытства — сколько по времени вы уже используете 2-ю версию и много ли на ней готовых проектов? Какие используете библиотеки / наборы компонентов? Есть ли свои наработки? Если да, есть ли что-то в опенсорсе (или, может быть, планируете).
Просто сам имею уже год работаю со второй версией, есть своя библиотека (пока внутренняя, но хочется привести её в порядок и сделать публичной) со многими UI компонентами. Интересно, как это всё обстоит в других командах.
sentyaev
Год с Angular2 + PrimeNG + ngrx/store & effects.
Только вот решили выпилить ngrx.
Iorg
А почему вы решили выпилить ngrx?
Мы используем его уже достаточно давно — впечатления только положительные.
sentyaev
ngrx очень хорош, но для небольших приложений.
У нас приложение — это по сути набор тулов для нашего бизнеса, и оно разрослось. Стало сложно работать с глобальным стейтом. Да и у ангуляра по сути все уже есть из коробки (Services + RxJS).
Ну и есть пара проблем, 1) очень мало разработчиков понимают функциональщину, 2) всех у нас достало писать одинаковый код (все эти action, action creator, reducer и т.д.)
alex-chuev
В коммерческих проектах фреймворк начали использовать сразу после выхода стабильной версии. До этого следили, изучали, писали тестовые приложения, устраивали внутренние митапы, делились, кто, что узнал нового.
Вот недавно начали 3-й проект на нём.
Фреймворк и его конечный размер, как мне кажется, больше подходят для средних и больших приложений. В нашем случае это:
В таких проектах каждый компонент или элемент может быть сильно кастомизирован. Поэтому, по возможности, ради однородности кода пишем всё сами (если нет нативного аналога в браузере). Это не так уж и сложно, интересно и лишает боли в случае «неудобной» кастомизации. А такое случается часто, когда в календарь, например, необходимо встроить отображение различных событий, произошедших в системе с учётом их типов и интенсивности.
Поэтому, конечно, есть внутренние наработки некоторых типичных решений, но всё оно довольно частное, не заслуживает называться библиотекой и быть выложенной публично.
К тому же, у нас хорошая команда дизайнеров, по запросу рисуют и дорисовывают всё необходимое — замена поиска необходимого элемента в UI библиотеке :-) — конечно, если бюджет проекта позволяет.
А библиотеками пользуемся лишь базовыми moment.js, lodash, highcharts и подобными для удобства в различных ситуациях.