lanvin lanvin07

Перевел обзорную часть доков: Angular 2 in JavaScript.
Реализовал туториал "Tour of Heroes" на JavaScript(и несколько ссылок на видео): тыц.
Надеюсь, поможет.
Удачи

Не знаю на счет эффективного способа, могу поделиться своим.

Когда мы мигрировали наш проект GrabDuck на angularjs с js+jquery, стоял такой же вопрос - как быстро понять что такое angular и начать его использовать. Совет N1, который все дают - "читаем доки" нам не подошел. Очень трудно понять какие-то детали, не понимая что такое angular в целом. Инфы очень много и в голове от всего каша. Наверное можно так выучить и даже стать реальным профессионалом, но быстро сделать это точно не получится. Вообщем метод хорош для любителей академических подходов.

Что делали мы:
1. пройти пару туториалов, лучше видео - получается быстрее. (как пример Egghead.io - AngularJS)
2. начать что-то делать самому, лучше уже реальное, обращаясь к туториалам из #1, за подсказками. Тут уже вы готовы начать посматривать в сторону официальной доки
3. Через какое-то время, вы почувствуете себя комфортно делать что-то на уровне пройденных туториалов, без использования их как подсказки. Тут уже без чтения доков, для прояснения каких-то вопросов, не обойтись. будет много рефакторинга вашего предыдущего кода, потому что к этому моменту у вас появится свое чувство стиля и вы увидите как все неправильно было сделано изначально. )
4. Последний пункт наступает примерно через несколько месяцев работы. Внезапно вы обнаруживаете, что ваше angular приложение работает чертовски медленно и нужно с этим что-то делать. Читайте статьи о том как оптимизировать (как пример, который нашел на GrabDuck - 11 Tips to Improve AngularJS Performance). тут уж вам, хочется того или нет, прийдется понять как работает angular изнутри и стать настоящим профи в этом фреймворке.

Надеюсь информация была полезна. :-)

Решения следующие:
1) Если вам не нужно перетаскивание блоков просто удаляете из index.html подключение
Scripts/jquery.ui.touch-punch.js. Именно он не дает корректно отработать нажатию на кнопки

<button class='change-color'>change color</button><br>"
<button class='remove'>remove</button>"

2) Если хотите оставить полный функционал,- здесь посложнее:
1. Качайте свежие версии jquery и jquery-ui. Я Использовал версии jquery-1.11.2.js и jquery-ui-1.11.4.min.js соответственно. Брал отсюда: https://cdnjs.com/libraries/
2. Качаете обычную(не минимизированную) версию jQuery UI Touch Punch 0.2.3. Брал отсюда: touchpunch.furf.com
3. В файле Scripts/main.js, после строк

var $dialog = $("#dialog")
      .dialog({
        resizable: false
      });

добавляем строку
$('#dialog').parent().css({'z-index': '99999'});
Это для того чтобы окошки "Drag Me" не перекрывали диалога изменения цвета

4. В jquery.ui.touch-punch.js ищем 130 строку. Должны увидеть:

.....
// If the touch interaction did not move, it should trigger a click
    if (!this._touchMoved) {

      // Simulate the click event
      simulateMouseEvent(event, 'click');
    }
....

Здесь нужно закомментировать проверку. Т.е. получается

.....
 // If the touch interaction did not move, it should trigger a click
    // if (!this._touchMoved) {

      // Simulate the click event
      simulateMouseEvent(event, 'click');
    // }

    // Unset the flag to allow other widgets to inherit the touch event
.....

Собственно все. Сохраняем,- проверяем.

Почему в инструментах разработчика в Хроме текст скрипта без переносов строки?

Для всех интересующихся подписчиков выкладываю. Я сделал файл с картинками после просмотра которого любые новички смогут начать использовать Git с удаленным репозиторием на GitHub
Работа через GitHub вдвоем без консоли и специальн...