SLY_G Dec 26 2014 at 21:44

Учебник AngularJS: Всеобъемлющее руководство, часть 1

7 min

272K

JavaScript*

Tutorial

Translation

+32

Comments 29

goodnickoff Dec 26 2014 at 22:26

Интересно услышать мнение новичков о этом переводе. У меня есть подозрение, что не знай я angular, у меня бы осталась одна каша в голове от прочтения этой статьи. Написать об двустороннем связывании, одной из основных фишек фреймворка, и директиве ng-model без единого примера не очень информативно.
На мой взгляд, при изучении angular просто необходимы примеры, желательно со ссылкой на jsfiddle, так как концепция очень отличается от других технологий.
Хотя цикл переводов будет несомненно полезен и интересен. Надеюсь в последующих публикациях почерпну для себя что-то новое.

+10

dshster Dec 26 2014 at 22:59

Я новичок в Angular и насколько я понял $scope не предоставляет, как можно подумать из статьи, ссылки на DOM объекты, а взаимодействует только с данными. Когда я только начал разбираться с Angular первые же мои грабли были именно эти! Как позже оказалось получить сам DOM объект можно через директивы. Самое сложное при изучении выкинуть из головы jQuery подход.

goodnickoff Dec 26 2014 at 23:05

А я с опытом выработал правило, что никакого DOM объекта получать не нужно, и если я пытаюсь это сделать, то где-то свернул не туда. Выкинуть из головы jQuery подход, — первое что необходимо сделать работая с angular.

Houston Dec 27 2014 at 01:04

Вы абсолютно правы. DOM нужен для каких-то уберспецифичных вещей, и такие вещи лучше инкапсулировать в директивы.

NikitaKA Dec 26 2014 at 23:01

Очень хорошо, если такое руководство будет на Хабре. Как подметили выше — без примеров сложновато. Пример helloworld был бы очень кстати, чтобы новичок сразу въехал что к чему. Но, это перевод…

Сам сейчас занимаюсь написанием CRM на AngularJS в связке с Ruby, получается очень элегантно и функционально. В такой связке очень удобно разделяется front- и back-end. Пугает другое — с появлением все новых и новых модулей в приложении, кол-во подключенных библиотек уже зашкаливает за 20 штук. И это только начало. Боюсь представить, в какого неповоротливого монстра может превратиться js-файл после склейки в продакшене… И вторая проблема — видимость для поисковых роботов. Понятное дело, что для CRM-системы это не важно. Но как делать доступные для индексации сайты на базе Angular? Без использования того же prerender.io или дублирования шаблонов на стороне сервера.

Немного критики по переводу: почему bootstrap — присобачивание?

goodnickoff Dec 26 2014 at 23:08

Но как делать доступные для индексации сайты на базе Angular?

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

NikitaKA Dec 26 2014 at 23:23

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

Но узнать подробнее о PhantomJs было бы очень интересно, жду с нетерпением статьи. :)

goodnickoff Dec 26 2014 at 23:34

Во-первых, PhantomJs работает на большинстве самых обычных хостингов (shared hosting), за исключением наверно бесплатных или самых дешевых. На моем опыте он запускался без проблем на 4-х из 5-ти.
Во-вторых, для себя я решил что лучше установить его на своем vps хостинге, к которому все ваши приложения могут обращаться для рендера своих страниц. С использованием кэша все выходит быстро и просто.

inook Dec 26 2014 at 23:53

Prerender.io

goodnickoff Dec 26 2014 at 23:56

prerender.io/pricing

Menjoy Dec 27 2014 at 13:36

Как я понял, расценки актуальны в том случае, если использовать их сервера. А если разворачивать на своем, то библиотека бесплатна. Или ошибаюсь?

NikitaKA Dec 27 2014 at 14:12

Да, можно поднять сервер и запустить свой сервис.

We host this as a service at prerender.io but we also open sourced it

SLY_G Dec 26 2014 at 23:08

Ваш вариант?

NikitaKA Dec 26 2014 at 23:16

Может быть… загрузка? «Если мы подгружаем файлы с JavaScript асинхронно, нам надо загрузить приложение вручную...» Ну, или связать, инициализировать. В том смысле, что не обязательно ведь дословно пытаться перевести, главное суть.
Просто само по себе слово «присобачить» (по крайней мере у меня) вызывает ассоциации с каким-то гаражным автосервисом, где при свете лампочки, с помощью отвертки и тестера чинят инжектор.

SLY_G Dec 27 2014 at 12:32

Поменял на «подгрузить». «Связать» используется в контексте data binding.

UFO just landed and posted this here

DmitryKoterov Dec 27 2014 at 01:53

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

SLY_G Dec 27 2014 at 12:33

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

-1

UFO just landed and posted this here

SLY_G Dec 27 2014 at 21:40

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

seyfer Dec 27 2014 at 08:25

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

UFO just landed and posted this here

NikitaKA Dec 27 2014 at 14:19

Цитата с angularjs.blogspot.se:

What about Migrating from 1.3 to 2.0?

Our goal with Angular 2 is to make the best possible set of tools for building web apps not constrained by maintaining backwards compatibility with existing APIs. Once we have an initial version of Angular 2, we'll start to work on a migration path for Angular 1 apps.

We know that you have invested a lot of time learning how to build web apps with Angular. Since we are preserving most of the core concepts, this knowledge will help you be proficient in Angular 2 much faster.