Ответы пользователя по тегу Angular
  • AngularJS как на es5 задать геттер\сеттер у контроллера компоненты?

    @SuperOleg39ru
    Front-end разработчик
    Пример класса на ES5:
    function MyComponent() {
      this._bindedValue = 'someValue';
    }
    
    MyComponent.prototype.getBindedValue = function() {
      return this._bindedValue;
    }
    
    MyComponent.prototype.setBindedValue = function(value) {
      this._bindedValue = value;
      this.makeSomethingWithNewValue();
    }


    Геттеры-сеттеры в ES5 доступны для объектов:
    var MyComponent() {
      _bindedValue: 'someValue',
    
      get bindedValue() {
          return this._bindedValue;
      }
    
      set bindedValue(value) {
         this._bindedValue = value;
         this.makeSomethingWithNewValue();
      }
    }


    Пример подробнее, можно применить и к функции.
    Ответ написан
  • Angular 1.6.4 $watchGroup возвращает пустые строки для старых значений. Не пойму в чём дело?

    @SuperOleg39ru
    Front-end разработчик
    Рекомендую вам отказаться от $watchGroup и $watch, вместо этого на инпуты добавьте ng-change, и уже в функциях-обработчиках делайте все что вам угодно.

    Причины:
    1) Полностью контролируете процесс
    2) Нет потери производительности из за watch'еров
    Ответ написан
  • Как отлавливать вводимые данные из каждых форм?

    @SuperOleg39ru
    Front-end разработчик
    При рендере массива через ng-repeat, введенные данные и так будут применяться к свойству соответствующего объекта.

    Если вам нужно отправлять эти данные в другие объекты, а не только в этот массив, то добавьте к каждому инпуту on-change, передавая туда текущий $index что бы идентефицировать форму.

    Еще лучше, для объектов массива educations добавить свойство id с действительно уникальным идентификатором, и пусть этот id создается на лету, при добавлении нового объекта.
    Ответ написан
    Комментировать
  • Как ставить темы для Ангуляра?

    @SuperOleg39ru
    Front-end разработчик
    Если тема = верстка + отдельные angular компоненты, скорее всего вам надо:

    1) Сделать корневой роут, который будет содержать только файл шаблон с версткой общей разметки админки, и там указать место, куда будут выводиться роуты-потомки (контент конкретных страниц)

    2) Angular компоненты темы (скорее всего они будут оформлены в один модуль) подключить в зависимость вашего основного модуля приложения

    // пример роутов, использую ui-router
    $stateProvider.state('admin', {
      template: '...', // содержит <div ui-view></div> для вывода потомков, например роута home
    })
    
    $stateProvider.state('home', {
      parent: 'admin',
      template: '...',
      controller: '...'
    })


    // Пример как выглядит angular тема INSPINIA
    export default angular.module('inspinia', [ ])
        .directive('...', ...)
        ...
        .name;
    Ответ написан
    Комментировать
  • С чем может быть связана ошибка?

    @SuperOleg39ru
    Front-end разработчик
    Возникла проблема с разрешением зависимостей.

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

    Пример:
    const requestManager = $injector.get('requestManager');
    Ответ написан
  • Делаю директиву Angular вида autocomplete. Как правильно передавать параметры?

    @SuperOleg39ru
    Front-end разработчик
    Логика передачи параметров следующая:
    Что в html шаблоне разделяется дефисами (on-find, on-click) - то в свойстве scope пишется через camelCase (onFind, onChange);

    Так что можете упростить до:
    {
        users: '=',
        onFind: '&'
    }
    Ответ написан
    2 комментария
  • Как подключить сервис авторизации в angular 1.5 component way?

    @SuperOleg39ru
    Front-end разработчик
    Добрый день!

    Проверка прав может быть на:
    1) Доступ к странице - относится к роутингу
    2) Выполнение http запроса - для этого есть http interceptor
    3) Просмотр конкретных DOM-элементов - достаточно простой директивы
    А так же непосредственная проверка прав в любом месте кода, если этого не достаточно.

    Есть отличная библиотека, которая предоставляет вам готовое решение для проверки прав.

    Что касается rootScope - вам надо один раз, перед загрузкой любой из страниц (на которую требуются особые права), получить с сервера профиль пользователя. Можете создать для него соответствующий сервис, или получать и хранить его в сервисе, который отвечает за сессию, и всегда будете иметь доступ к профилю.
    Ответ написан
    Комментировать
  • Как запустить перерисовку на Angular, если изменился родительский объект?

    @SuperOleg39ru
    Front-end разработчик
    Добрый день.

    Вам нужно сделать сервис storageService полноценной моделью.

    То есть, описываете свойства модели, и методы, что бы получать и изменять эти свойства.
    Простой пример, используя систему событий Angular:
    export default class StorageService {
      constructor($rootScope) {
        'ngInject';
        this.$rootScope = $rootScope;
        this._model = {};
      }
    
      getModel() {
        return this._model;
      }
    
      setModel(newModel) {
        this._model = newModel;
        // вызываем событие Сервис изменился, при каждом изменении модели
        this.$rootScope.$broadcast('storageServiceChange');
      }
    
      loadFromFile(fileName) {
        fs.readFile(fileName, 'utf-8', (err, data) => {
            let newModel = JSON.parse(data);
            this.setModel(newModel);
        });
      }
    }


    И в контроллере подписываемся на модель:
    class AppController {
      constructor($rootScope, $scope, storageService) {
            'ngInject';
            this.storage = storageService;
            this.$rootScope = $rootScope;
            this.$scope = $scope;
            this.model = {};    
      }
      
      $onInit() {
        this.storage.loadFromFile('storage.txt');
        // подписываемся на событие Сервис изменился, и обновляем модель
        this.$rootScope.$on('storageServiceChange', () => {
            this.model = this.storage.getModel();
        })
      }
    }
    Ответ написан
  • Почему из трех вариантов инициализации controller работает только третий?

    @SuperOleg39ru
    Front-end разработчик
    На самом деле не работает ни один из вариантов.

    Просто ваша директива получает в качестве контроллера функцию mailListCtrl, которую вы и объявили в 3 варианте.

    Оберните название контроллера в кавычки:

    mailApp.directive('mailList', function(){
        return {
            restrict: 'E',
            templateUrl: 'mailListDirective.html',
            controller: 'mailListCtrl',
            // replace: true,
            controllerAs: 'mailListCtrl'
        };
    });


    Еще лучше, если вы начнете использовать компоненты, появившиеся в Angular 1.5+

    А вот стартовый шаблон, использующий вебпак для сборки и синтаксис ES6, так выглядит современное приложение на Angular 1.
    Ответ написан
    1 комментарий
  • Как повторно отправить не успешные запросы?

    @SuperOleg39ru
    Front-end разработчик
    Добрый день!

    Вкратце, как решал эту проблему:
    Отдельный сервис занимается сохранением и обновлением токена, назовем его Session.
    В interceptors фазе request вы все делаете верно, это добавляет токен на каждый запрос.

    Переходим к фазе responseError:
    1) Определяем необходимые тип ошибки
    2) Можно ограничить количество повторных запросов, и редиректить на login page (тут свой нюанс, надо обнулять счетчик в фазе response - успешный ответ)
    3) Отправляем запрос на обновление токена
    4) При успехе, вызываем сервис $http с параметрами этого запроса

    Пример кода:
    responseError: function(rejection) {
      ...
    
      if (tokenError) {
        return Session.refreshToken().then(function() {
            return $http(rejection.config); // Повторяем запрос, когда получили новый токен
        });
      }
    
      return $q.reject(rejection);
    }
    Ответ написан
    4 комментария
  • Почему не могу обновить данные при получения события?

    @SuperOleg39ru
    Front-end разработчик
    Добрый день!

    Broadcast вызывается до успешного добавления данных, поэтому его надо перенести в then. Попробуйте так:
    $scope.addDb = function (name) {
            NetFactory.addDb(name).then(
                function (data) {
                    $scope.message = data;
                    $rootScope.$broadcast('db:change');
                }
            );
    };
    Ответ написан
    3 комментария