Ответы пользователя по тегу Angular
  • Почему angular не редеректит, а пытается загрузить html?

    search
    @search
    мама говорит что я особенный
    1. Angular не будет редиректить. Он так не работает. Он использует XmlHttpRequest под капотом, а XHR работает так в вашем случае: выполняет запрос -> получает редирект от сервера -> идёт по адресу редиректа -> достаёт по этому адресу полученный ответ и возвращает ангуляру. А ангуляр пытается распарсить полученный ответ. И ожидает при этом получить JSON, но получает при этом HTML, поэтому выдаёт ошибку

    2. this.httpService.postData(JSON.stringify(this.user)). Тут не совсем понятно зачем юзер превращается в строку и затем строка постится. Обычно постится сразу JSON объект. Если только там не какая-то дикая дичь на сервере. Но лучше решить вопрос путём поста JSON объекта, а не строки. Меньше страдать прийдётся

    Теперь по подводу редиректов на стороне сервера. SPA так не работают. Сервак не занимается редиректами. Это не его работа. Работа сервака вернуть JSON ответ и HTTP status 200 в случае если он может вернуть то что от него ждут. И ошибку в противном случае. Вот тут подробнее https://en.wikipedia.org/wiki/List_of_HTTP_status_codes

    Вобще, если хотите, не сильно расстраиваться из-за дурацкого Ангуляра (да и любого другого SPA фреймворка), то желательно ознакомиться и начать использовать oAuth или JWT.

    Если вы дочитали до этого момента и сказали "ну тебя в баню со своими советами, я хочу чтоб редиректило как у нормальных пацанов", то можете сделать это вот так:

    import { tap } from 'rxjs/operators';
    
    return this.http.post('/login', user, {observe: 'response', responseType: 'text'}).pipe(
      tap(response => {
        location.href = response.url;
      })
    );
    Ответ написан
    1 комментарий
  • Как заставить работать @HostListener('body:resize') на angular6?

    search
    @search
    мама говорит что я особенный
    HostListener в этом вопросе не поможет, потому что изменение высоты body не порождает событие JS.

    Идеологически правильным ходом было бы сделать изменение высоты ифрейма проблемой пользователя приложения, а не проблемой самого приложения. В любом случае пользователи будут городить какие-то огороды на прослушивание событий от приложения. Вместо этого можно заюзать, например, вот такую либу https://github.com/davidjbradshaw/iframe-resizer . В этом случае гора по обнаружения изменения высоты тела страницы сваливается с плеч приложения на плечи компонента, который специально создан для таких ситуаций.
    Ответ написан
  • Что важно знать в TypeScript для быстрого старта c Angular4+?

    search
    @search
    мама говорит что я особенный
    Все эти знания принесут пользу несомненно, но они не критичны. Ангуляр весьма органично дружит с тайпскриптом и не требует никакой экзотики. С перечисленными темами можно ознакомиться по ходу пьесы если будет интересно. К вашему списку можно добавтьб дженерики (Generics), они часто используются в ангуляре и желательно понимать что это такое.

    Что нереально важно для комфортной работы с ангуляром, так это RxJS. Rx представляет декларативный подход к программированию и на первых парах полностью выносит мозг. Правда потом не знаешь как без него жить дальше. Непонимание RxJS - это гарантия провала и обиды на фреймворк. Вот это видео может немного пролить свет https://www.youtube.com/watch?v=3LKMwkuK0ZE . Не теряйте времени зря и разберитесь в теме заранее, чтоб потом не жалеть о напрасно написанном коде.

    Еще, как и большинство фреймворков, ангуляр не поставляет менеджер состояния по умолчанию. Неокрепшие умы хранят глобальное состояние прямо в сервисах. Что мало чем отличается от использования глобальных переменных. Но для глобальных состояний существует NgRx. Это Redux на стероидах. Опять же, прийдётся с этим разобраться для того чтоб через год не оказаться у разбитого корыта.
    Ответ написан
    4 комментария
  • RxJs: условный mergeMap в pipe?

    search
    @search
    мама говорит что я особенный
    // Да, сначала мы делаем map, потому что он делается полюбому:
    
    let doSomething$ = this.myApi.getSomething(id).pipe(
      map(tags => ({ ...updatedShop, tags }))
    )
    
    // А затем мы делаем mergeMap если понадобится:
    
    if (shop.isNew) {
      doSomething$ = doSomething$.pipe(
        mergeMap(() =>
                      this.myApi.addTags(updatedShop.id, shop.tags).pipe(
                          map(() => {
                              return {
                                  ...updatedShop,
                                  tags: shop.tags
                              };
                          })
                      )
                  )
      )
    }
    
    // ну и затем подписываемся на это дело чтоб оно начало работать:
    
    doSomething$.subscribe();


    Вам будет значительно легче понять RxJS после просмотра вот этого видео: https://www.youtube.com/watch?v=3LKMwkuK0ZE Оно слега отстало от времени (операторы к обозревателю теперь добавляются через функцию pipe()), но сами принципы, описанные в видео, никуда не делись.

    UPD

    Если код выше повергает вас в тоску, то можно сделать так:

    this.myApi.getSomething(id).pipe(
      map(tags => ({ ...updatedShop, tags })),
      mergeMap((tags) => {
        if (!shop.isNew) {
          return of(tags);
        }
       return this.myApi.addTags(updatedShop.id, shop.tags).pipe(
                          map(() => {
                              return {
                                  ...updatedShop,
                                  tags: shop.tags
                              };
                          })
                      )
      }),
    )


    Имеется ввиду, что можно иф вынести в сам mergeMap. И если магаз не новый, то возвращать обзёрвбл от магаза, а если новый, то сделать что-то там еще.
    Ответ написан
    1 комментарий
  • Как правильно загрузить файлы и привязать их к сущности?

    search
    @search
    мама говорит что я особенный
    Грузить файл во временную папку и при этом задавать файлу рандомное уникальное имя. Во время поста передавать связку действительное_имя - рандомное_имя.

    Рандомное уникальное имя должен задавать сервер и возвращать его как ответ поста.
    Ответ написан
    6 комментариев
  • Как мне преобразовать полученный json в массив, который я бы мог прогнать через ngFor?

    search
    @search
    мама говорит что я особенный
    Не нужно result.json()

    Данные уже там.

    result.data достаточно.

    (при условии что вы используете Angular > 4.3)
    Ответ написан
  • Как вывести значение из массива в HTML элемент, по определенному шаблону?

    search
    @search
    мама говорит что я особенный
    По классике такое делается фильтром, а не ng-repeat. Потому что с ng-repeat обработка ситуаций "пустой массив", "массив с одним элементом" и "массив с двумя элементами" (про массив с двумя элементами объяснено ниже) будут выглядеть по-уродски в шаблоне.

    Вот как это выглядет

    // human-friendly-concat.js
    angular.module('yourModule', [])
    .filter('humanFriendlyConcat', function() {
      return function(input) {
        input = input || [];
        if (input.length === 0) {
            return 'does not exist';
        }
    
        if (input.length === 1) {
            return input[0];
        }
    
       if (input.length === 2) {
            return input.join(' and ');
        }
    
        return input.slice(0, -1).join(', ') + ', and ' + input.slice(-1);
      };
    })
    
    // template.html
    <p>
      This name <span ng-bind="name | humanFriendlyConcat"></span>.
    </p>


    Разница между массивом из двух элементов и массивом из больше чем двух элементов в так называемой "гарвардской запятой". Она ставится перед "and" в перечислении. Например, перечисляя страны мы напишем "Russia and Spain" для двух, но "Russia, Jamaica, and Spain" для трёх. Такие дела. https://en.wikipedia.org/wiki/Serial_comma
    Ответ написан
    Комментировать
  • Angular2+: как надежно доставить новую версию приложения клиенту минуя кэш браузера?

    search
    @search
    мама говорит что я особенный
    В Google Inbox это реализовано через всплывающую кнопку. Если приложение определило появление новой версии, то показывается ненавязчивое сообщение и кнопка "перезагрузить". Элегантное решение.
    Ответ написан
    2 комментария
  • Как правильно скопировать свойства объекта в anjular.js?

    search
    @search
    мама говорит что я особенный
    Чтобы было проще понять почему так происходит, попробуйте разобраться с понятием "присвоение по ссылке". Это базовая концепция многих языков. Без этого знания, использовать JS очень непросто.

    Для того чтоб решить вашу проблему, можно сделать так:

    $scope.manufacturers = angular.copy(manufacturers);
    $scope.datadilers = angular.copy(datadiler);
    Ответ написан
    1 комментарий
  • Как использовать одну админку для разных стран?

    search
    @search
    мама говорит что я особенный
    В таких случаях обычно пишется общий код и хранится в одном репозитории. Настройки по странам хранятся в конфиге. Вся разница в поведении так же определяется конфигом.
    Ответ написан
    Комментировать
  • Парсинг результата в Angular 5+, как правильно?

    search
    @search
    мама говорит что я особенный
    Когда будите работать над Http Interceptor, как посоветовал Ivan Stroykin, проработайте обработку ошибок как следует. Интерсептор не должен возвращать null в случае ошибки. Он должен делать return Observable.throw(error).

    Еще одно общее наблюдение: старайтесь функции, не использующие this выносить в отдельный файл (не сервис). Т.е. делать как-то так:

    // get-data-response.ts
    export function getDataResponse<T>(response: IResponse<T>) {
        if (response && response.data) {
          return response.data;
        } else {
          return null;
        }
      }


    Так намного больше шансов на то что функция будет переиспользована где-то еще и не захламлена ненужными подробностями. Да и юнит-тестировать такой код гораздо проще.
    Ответ написан
    4 комментария
  • Angualar HttpInterceptor: почему не могу получить response?

    search
    @search
    мама говорит что я особенный
    В коде интерсептора перепутан респонз и реквест.

    Что сейчас происходит:

    1. Интерсептор перехватывает объект реквеста
    2. Интерсептор добавляет в реквест { body: {data: messages} }
    3. Интересептор передаёт реквест дальше на обратоку

    Я так понимаю, идея интерсептора в том, чтоб ловить реквест и вместо передачи реквеста дальше на обратоку, возвращать ответ.

    Попробуйте как-то так:

    import {
      HttpRequest, 
      HttpEvent,
      HttpHandler,
      HttpInterceptor,
      HTTP_INTERCEPTORS
    } from '@angular/common/http';
    
    import { Injectable } from '@angular/core';
    
    import { Observable } from 'rxjs/Observable';
    
    import { messages } from 'src/fake-backend/data/messages/messages';
    
    import { of } from 'rxjs/observable/of';
    
    @Injectable()
    export class FakeBackendInterceptor implements HttpInterceptor {
      constructor() { }
    
      intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    
        console.log('HTTP REQUEST INTERCEPTED BY THE MOCKED BACKEND');
    
        return of(new HttpResponse({body: {data: messages}}));
      }
    }
    Ответ написан
    2 комментария
  • Angular 2 ngFor?

    search
    @search
    мама говорит что я особенный
    ngFor не работает с объектами, которые нельзя проитерировать. Нужно привести data['in'] к массиву. Попробуйте так:

    this.listers = Object.values(data['in']);
    Ответ написан
    3 комментария
  • Как отобразить данные через контроллер в AngularJS?

    search
    @search
    мама говорит что я особенный
    Скорее всего у вас ошибка в вызове api.clients.allCompany.

    Судя по коду эта функция передаёт какие-то данные в первый аргумент коллбэка, но то что этот перавый аргумент - $scope - очень маловероятно.

    Попробуйте заменить

    api.clients.allCompany("", function($scope, response) {		
        console.log(response.data);
        $scope.clientsCompany = response.data;
    });


    на

    api.clients.allCompany("", function(_, response) {		
        console.log(response.data);
        $scope.clientsCompany = response.data;
    });


    Это должно помочь. Но рекомендую разобраться что конкретно api.clients.allCompany передаёт в коллбэк.
    Ответ написан
    6 комментариев
  • Почему не работает map в Angular 4?

    search
    @search
    мама говорит что я особенный
    HttpClient работает так, что в функцию map прилетит уже готовый распаршенный json ответ, а не Response.
    Ответ написан
    2 комментария
  • Стоит ли использовать Redux при разработке на Angular 5?

    search
    @search
    мама говорит что я особенный
    вот тут я немного коснулся менеджмента состояний в ангуляре:
    ангуляр не предоставляет никаких средств для менеджмента состояния и попытки запихнуть состояние системы в переменную сервиса (это первое к чему приходят почти все разработчики на ангуляре) обычно заканчивается непредсказуемым поведением системы по мере её разрастания и невозможностью переиспользовать компоненты.


    На сложном проекте без толкового менеджмента состояний очень легко наломать дров.

    В принципе проект можно начать без редакса и прикрутить его по мере необходимости.
    Ответ написан
    7 комментариев
  • Что можно почитать на предмет отправки логов на сервер в angular?

    search
    @search
    мама говорит что я особенный
    Вот отличный сервис https://sentry.io

    Хостить логи у них на серваке стоит денег, но это опен соурсный проект, так что вы можете поднять свой сервак и это будет бесплатно (если под словом "бесплатно" понимать "настройка и поддержка сервера собственными силами").

    Пока что не встречал чего-то лучше или хотя-бы аналогичного.

    Вот тут описана интеграция с ангуляром https://docs.sentry.io/clients/javascript/integrat...

    ПС

    Понимаю что это слегка не по теме, и вы хотели изучить вопрос логирования в JS. Но если воспользоваться этим сервисом хоть раз, то можно очень хорошо понять как происходит логирование в 21 веке.
    Ответ написан
    Комментировать
  • Как не уничтожать компонент Angular 2+?

    search
    @search
    мама говорит что я особенный
    Вот полезная статья, которая многое проясняет https://medium.com/@dan_abramov/smart-and-dumb-com...

    Идея в том чтоб каждый вопрос находился в своём компоненте и этот компонент был "тупым". Имеется ввиду что сам компонент на хранит ответ пользователя и не знает как его получить извне. Он получает предыдущий ответ пользователя через @@Input и отдаёт новый ответ пользователя через @@Output. Само состояние никогда не хранится в компоненте-вопроса.

    Весь список вопросов менеджится внешним компонентом и внешний компонент решает какой вопрос показывать. Так же внешний компонент собирает и хранит ответы пользователей из @@Output компонентов-вопросов. И при переходе назад на предыдущий вопрос предаёт этот ответ в @@Input компонента-вопроса для того чтоб тот корректно отобразил предыдущий ответ пользователя.

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

    Если вернуться в к Ангуляру, с его полной неспособностью менеджить состояния из коробки, то советую взглянуть на https://github.com/ngrx/platform. Это редакс для ангуляра. На данный момент юзаю его на нескольких проектах, полёт нормальный. Не серебряная пуля, конечно, но многократно лучше чем то ничего, которое предлагает ангуляр из коробки. Если не знакомы с редаксом, то придется поуродствовать сначала. Но это окупается. Ну и не понимать редакс - как-то не комильфо для соврменного продвинутого программиста.
    Ответ написан
    Комментировать
  • Возможен ли AngularJS, без роутинга?

    search
    @search
    мама говорит что я особенный
    Да, возможно.

    1. Создаёте компонент angular.module('Monorythm').component('monorythm', {})
    Вот документация по компонентам https://docs.angularjs.org/guide/component

    2. На html странице указываете место, где будет рендериться компонент

    3. Затем бутстрепите прилажение angular.bootstrap(document.body, ['Monorythm']);

    Вуаля.

    Набрасал для вас пример
    https://jsfiddle.net/sneas/gtrwzsn1/525/

    а вот этот нашел в интернете при помощи поисковой системы Гугл
    https://jsfiddle.net/langdonx/gtrwzsn1/
    Ответ написан
    4 комментария
  • Можно ли делать бизнес логику в Angular?

    search
    @search
    мама говорит что я особенный
    Вы можете всё что угодно. Стоит ли так делать? Нет, не стоит. Хотя бы потому что это будет крайне ненадежно. Например, любой школьник насуёт вам в лог по самое нихачу и повалит вашу систему.
    Ответ написан