Быстрый старт за 5 минут с Angular 2 beta

[lega]

Видимо это тренд, я недавно пробовал собрать «Hello world» на aurelia.io, я был в шоке когда увидел что файлы для сборки весят более 400Мб.

[bazarnazar]

Тут вопрос в том, что вы получаете на фронте язык со строгой типизацией. И более менее сносным ООП. А не «прекрасный» JS который, особенно если вы в основном занимаетесь back-end разработкой, похож на воплощение хаоса и нелогичности.
И да. Настройка среды будет определенным гемороем, но если вы сравните приложение с большим количеством форм со сложными контролами(которые еще и с API тащат какие-то данные) на ангуляре и просто на JQuery,(или упаси господи на чистом JS) то думаю вопросы в целесообразности отпадут.

[Fesor]

И более менее сносным ООП

ОО должна быть не сносной а правильной, а еще больше функциональной чистоты. И тогда все хорошо.

[SolovyevMax]

Спасибо за перевод.
Я с первым Angular знаком не был, но думаю, после такого вполне можно попробовать начать что-то писать на втором.

[hudson]

А я вот встал на распутье перед туториалом. Более менее приличный и объёмный, есть пока только под TypeScript, но я что-то не уверен что хочу начинать именно с этого языка. Вот и сижу третий день, перебираю — VanillaJs / TypeScript / DART

[SolovyevMax]

Ну с виду он не показался мне каким-то неудобным, после JS. Типизация и плюшки. Мне казалось, что это даже будет преимуществом второй версии, что оно на TypeScript.

[hudson]

Я тогда вообще с катушек съеду ))

[hudson]

Да нет, просто глаза разбегаются )

[hudson]

Вот да, оно все-равно в ваниллу интерпритируется. Я сел ковырять JS версию, попробую ориентироваться на туториал TS, но писать на JS.

[Fesor]

Рекомендую к просмотру: Ember = Angular = React

TL;DW

Идеи всех этих эмберов, реактов и ангуляров идут в общем-то в одном направлении. Независимые UI компоненты, отказ от двустороннего биндинга, односторонний потока данных… То есть зная хорошо React и Redux у вас нет проблем те же подходы использовать в AngularJS или Ember. Да, чуть тонкостей будет но со временем различий будет все меньше и меньше.

Лучше концентрироваьтся на схожих идеях, а не холиварить о том кто круче.

[urrri]

Если эти фреймворки сложны и система построения проекта зашкаливает, то попробуйте Google Polymer — это надстройка над новой системой в HTML — Web Components. Это всего лишь библиотека, позволяющая строить компоненты легко и прозрачно. У меня заняло несколько минут понять простоту системы, пару часов для написания простейшего проекта и неделю для достаточно сложного проекта и разбора истемы в деталях. Просто открыть документацию и прочиитать её (она относительно короткая) будет достаточно для написания систем практически любой сложности. Не требуется знаний новейших скриптов, поскольку используется уровень функции и объекта, а не класса. Система загрузки зависимостей встроена в HTML. Существует аппликация Vulkanizer, позволяющая упаковать весь проект в один файл

[Vilyx]

Я бы вам посоветовал Dart, ибо гугл решил своё первое Angular 2 приложение выпустить именно на этом языке. Пруф

[hudson]

Ну вот интересно кстати. Вроде ангулар и дарт в недрах гугл родились. А продвигают в первую очередь почему-то тайпскрипт версию (во всяком случае у меня сложилось такое впечатление)

[Vilyx]

TypeScript это почти ES6, плюс скомпиленный TS в JS выглядит читаемо и библиотеки написанные на TS бесшовно работают с JS. А после обновления 1.13 в Dart появилась возможность с минимальными усилиями писать фасады для JS либ. Буквально одна строка на одну функцию. А вот в обратную сторону всё сложнее, поэтому и пишут библиотеки на TS.

[Fesor]

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

[Fesor]

А я бы советовал то на чем вам придется писать. Например я тыкаю Angular2 с Babel просто. И мне нравится.

[beduin01]

А я для себя вчера открыл vuejs.org на вид куда понятнее чем Ангулар. К сожалению он сложноват для начинающих разработчиков. А вот vue js выглядит куда лучше.

[shuron]

Кому интересно, рабочий код туторила:

https://github.com/aholbreich/angular2

и продолжение из Developers Guide
https://github.com/aholbreich/ng_hero

[medianoche]

Как за 5 минут вывести на экрана строчку текста:
1. Установите NodeJS
2. Установите NPM
3. Настройте package.json
4. Выучите TypeScript
5. Настройте tsconfig.json
6. Познакомьтесь с SystemJS
7. Настройте SystemJS
8. Подключите 5 библиотек
9. Подключите полифиллы для ES6
…
10. Забудьте это все и пишите на React Angular 1

[aav]

Все же, наверное, стоило в Caps Lock жирным написать, что это туториал для БЕТЫ. В бете еще не все вылизано, потому требуется понимание, как все функционирует. К слову, это же понимание требуется при написании сколько-нибудь серьезного приложения.

В районе релиза это все будет выглядеть как-то так:

npm install -g angular-cli
ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
ng generate component my-new-component

Для тех, кто хочет просто поиграться по-быстрому: plnkr.co/edit => New => AngularJS 2.0.x (ES6/ES5/TS — выбирайте сами)

[Lodin]

Все же, наверное, стоило в Caps Lock жирным написать, что это туториал для БЕТЫ.

Спасибо за замечание, исправил.

[maratische]

вот буквально на выходных начал смотреть что такое angular 2 (с первым не сталкивался),

• впечатлил конечно "хеллой волд" и список телодвижений для его явления миру, но нам, работающим с java ee и не такое приходилось делать ради одной строки :)
• Оно когда выйдет из беты в что то релизное? те формально мы не можем на нем создавать продукты, так как релиза то все нет
• npm реально подружить с проксей?
  ну просто у меня есть ноутбук с виндой находящийся в домене с проксей с авторизацией, какие я только танцы не использовал (у меня богатый опыт по дружбе java приложений и auth proxy) — не работает
  убунту ноут с прямым доступом в интернет — все работает.

[Fesor]

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

2) серидина 2016-ого года, то есть где-нибудь летом. Но это приблизительная дата релиза. В принципе выход beta уже говорит о том, что больших изменений в API уже не будет. И в принципе пилить продукты на нем более чем можно, вопрос в рисках. Сейчас вот вышел Angular 1.5, который является эдаким промежуточным звеном между ng1 и ng2, который форсит компонентный подход и т.д.

3) https://docs.npmjs.com/misc/config#proxy

[maratische]

Посмотрел AngularClass — это готовый проект по сути, те получается аналог того же maven archetype.

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

вопрос такой, читая доку на сайте ангулара по диагонали, не увидел.
А как мне сбилдить пакет, который я могу на сервак залить для публикации сайта в интернете?

[Fesor]

А как мне сбилдить пакет, который я могу на сервак залить для публикации сайта в интернете?

Это уже вне специфики ангуляра. Вам в помощь webpack-ки, system.js-ы всякие надо или другие бандлеры модулей. с webpack проще.

[maratische]

И впорос туда же, из WebStorm/Idea как это дебажить?

[Fesor]

гуглите "typescript webstorm debug" и т.д. Я думаю даже в официальном хелпе вэбшторма будет информация.

[maratische]

в папке app нельзя создавать подпапки, что бы вынести туда тематические components+service с шаблонами.
у меня не получилось, решил все проблемы с путями, перестало ругаться на 404, но сайт все равно не стартует

[Fesor]

А теперь сформулируйте проблему более… понятно. Вы не разобрались как с модулями работать или что? Какие 404-ые ошибки? Что пишет консоль?

[maratische]

(сорри, писал утром)
Задача следующая, переписываю базовый пример angular2-tour-of-heroes на свой проектик, добавляю сущность parking, получаем следующую структуру

angular2-bike
 app
  Parking.ts 
  parking.component.css
  parking.component.html
  parking.component.ts
  parking.service.ts
  mock-parking.ts

все отлично работает, А теперь хочу добавить папку, а то слишком уж много файлов лежит в app

angular2-bike
 app
  parking
    Parking.ts 
    parking.component.css
    parking.component.html
    parking.component.ts
    parking.service.ts
    mock-parking.ts

на утреннюю голову не получилось, но по сейчас пересмотрел все пути импортов и все заработало.

По итогу получается интересный вывод, что эти две строки идентичны (абсолютный путь и относительный путь)

import {ParkingService} from "app/parking/parking.service";
import {ParkingService} from "./parking.service";

что достаточно не очевидно все таки, ожидал что абсолютный путь будет "/"

[Fesor]

что достаточно не очевидно все таки, ожидал что абсолютный путь будет "/"

это не совсем "абсолютный" путь, это путь относительно модуля app. А ваше приложение это и есть модуль app. Вот и вся наука.

То есть к ангуляру или typescript это не имеет никакого отношения, все упирается только в работу с es2015 модулями. Разберитесь с ними.