Анатолий Саламатин

https://codepen.io/anon/pen/WzxLaW

Для обращения к svg через xlink:href нужен HTTP, локально не работает. Если только не встраивать svg инлайново.

закидывай в ng-class длину passenger.lastName

<input class="g-input" type="text"
                  ng-class="{'someClass':passenger.lastName.length}"
                   name="lastName"
                   ng-model="passenger.lastName"
                   required
                   placeholder-helpers
                   ng-pattern="vm.passengerLastNameRegexp">

Есть такая фишка - gulp-load-plugins
На моём гитхабе есть репа с генетаротом - там таски разбиты на файлы.
https://github.com/WebKieth/yeogurt-glob

https://codepen.io/werty1001/pen/ZyaPaa

Что-то непонятное происходит с компиляцие CSS. Сперва быстро. Через несколько сохранений - начинает думать по 4-6 секунд. Перезагружу gulp и вроде все нормльно опять. Как можно оптимизировать это?

Часто встречающаяся проблема, несколько решений можно найти тут, мне лично помогло отключение atomic_save в Саблайме.

Также буду благодарен, если подскажете как еще можно оптимизировать данный файл.

1) Вынести таски в отдельные файлы, и подключать их только при вызове.
2) То же самое с плагинами, gulp-load-plugins в помощь
3) Использовать ES6 стрелочные функции
Пример из вашего же файла:

gulp.task('clean', function() {
    return del(path.clean);
});

Можно переписать как: gulp.task( 'clean', () => del(path.clean) );

В целом, можете взглянуть на эти прекрасные репозитории: bemgo, cssr
(ну или на мой ужасный)

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

1. У Вас в styles таске, есть csscomb. Зачем вам пересобирать правила в компилруемом CSS? Вы часто в готовый CSS файл заглядываете? И так ли Вам это нужно? Вот например в исходниках, в .styl файлах я бы это ещё мог понять, а так лишние машиноресурсы тратятся.

2. В scripts Вы постоянно запускаете минификацию. Минификация нужна для продакшена, во время разработки она не нужна.

3. Pug скорее всего у Вас тоже не быстро собирается, посмотрите в pug inheritance. А лучше , и плагин прочтите статьюemitty

4. Почитайте доку галпа, чтобы понимать как это всё работает. Если лень, то курсы Кантора. Он там и про `cached` рассказывает и про `changed`. Также у него на курсе `стилус`.

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

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

Ответы на эти вопросы можно получить у Ваших коллег, которые владеют (целиком или по частям) представлением о фактической архитектуре. Спрашивайте, пытайтесь рисовать схемы для себя, уточняйте. Если вместе с вопросами "что" и "как" будете спрашивать "почему именно так" - это приведёт к результатам.

Другого пути нет. Сами фреймворки (и Ангуляр - далеко не самый простой из них) дают общий набор соглашений, причём далеко не полный, и вокабуляр. Однако без архитектуры приложение не оживёт, и вот это-то и есть самое сложное.

видео курс AngularJS Essential

Я бы не рекомендовал Флэнагана начинающим, это скорее уже чтобы углубить знания.
Из русскоязычных в качестве базы можете использовать только 1 ресурс - learn.javascript.ru.
По CSS почитайте про способы организации CSS-кода (MCSS, БЭМ, OOCSS и т.д.), изучите PostCSS, статей по ним много и вы их легко найдете.