Ответы пользователя по тегу Angular
  • Как подружить backend (java) и front Angular?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    я не экстрасенс но...

    CORS
    Ответ написан
    Комментировать
  • Как в директиве получить контроллер в который она обернута?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    или если его и не нужно получать по идеологии, то почему?

    потому что это создает зависимость директивы от контекста, в котором она используется. Проследите логику

    1) работа директивы требует того что бы она была обернута в SomeControeller на уровень выше.
    2) директива становится частью SomeControeller, или если быть точным, куска view которым управляет SomeControeller.
    3) нет смысла в директиве, так как мы не можем более реюзать ее в другом месте
    4) если директива зависит от контроллера SomeControeller, почему бы не вынести из SomeControeller то что нужно директиве в ее собственный контроллер?

    как-то так. Все взаимодействие с директивой должно происходить либо через контроллеры директив (параметр require директивы), либо через атрибуты (изолированный scope, bindToController в angular 1.4). И уж тем более странно желание подменять методы контроллера из link.

    updated

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

    Далее, по поводу обработчиков - яркий пример директива ng-click. Эта директива выглядит как-то так:

    function myNgClick() {
        return {
            restrict: 'A',
            scope: {
                callback: "&myNgClick"
            },
            link: function (scope, el) {
                el.bind('click', function (e) {
                    scope.$apply(function () {
                         scope.callback({$event: e});
                    });
                });
            }
        }
    }


    Как мы видим на этом примере, у нас есть директива, чья основная задача - вызвать что-то по клику на элемент. И все. Через эту директиву мы скажем можем дернуть метод контроллера другой директивы. В этом проявляется сила ангуляра, мы можем проводить декомпозицию элементов интерфейса настолько глубоко насколько мы вообще хотим. делать крайне изолированные, маленькие и простые директивы, которые очень легко покрыть тестами и легко использовать.

    link директивы нужен ТОЛЬКО для того что бы связать DOM и логику. То есть в 99% случаев в директиве будет только link или только контроллер. Оба - это уже стремно, в этом случае лучше вынести ту логику которую хочется запихнуть в link в отдельную директиву.

    контроллер (мы сейчас отойдем чуть чуть от MVC только ради того что бы упростить все) реализует всю логику (или делегирует модели). Вся логика не относящаяся к DOM а например относящаяся к обработке данных должна быть вынесена в контроллер.

    Пара слов по поводу ng-controller. Это так же директива, которая позволяет привязать к элементу какой-то контроллер. Эта штука по сути (как и ng-include в принципе) нужна только для ускорения разработки и упрощения. В целом же приложение на angular стоит воспринимать как HMVC приложение, состоящее исключительно из деревьев директив. Первый шаг на пути к web-components (по сути ангуляровские директивы послужили неплохим глотком вдохновения).

    Как-то так.
    Ответ написан
  • Почему не работает UI - ROUTER в Angular?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    $rootScope.$on(
        '$stateChangeError',
        function (event, toState, toParams, fromState, fromParams, error) {
          if (!angular.isString(error)) {
            error = JSON.stringify(error);
          }
          $log.error('$stateChangeError: ' + error);
        }
      );


    приятного дебага, и поправьте опечатку с темплейтом в contacts.list
    Ответ написан
    Комментировать
  • Какова ниша js фреймворков?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    ну например google music написан на polymer

    что до builtwith - там как бы да, слегка разачаровываешься обычно когда просматриваешь это дело, там только парочка интересных проектов а все остальное - что-то простое.

    Веб-сервисы. Все понятно, туда сюда гонять XML/JSNON, JS вообще не нужен

    что для вас web сервисы и откуда там "гонять json"? Я правильно понимаю что вы сейчас о микросервисах на бэкэнде? Причем тут тогда фронтэнд?

    веб-приложения. Как правило, наборы гридов

    Хватит думать десктопными интерфейсами начала двухтысячных. Лично я считаю гриды дурным тоном (за очень редкими исключениями списки намного лучше справляются с выводом информации).

    Вот сижу и думаю, что за типы проектов должны быть, в которых применение фреймворков действительно было бы оправдано,


    Да на самом деле любой single page application, ибо фреймворк (например тот же angular) дает вам готовую инфраструктуру, позволяющую изолировать все по слоям, делать изолированные и легко покрываемые тестами (вы же не будете спрашивать зачем нужны тесты?) элементы интерфейса. А бизнес логика на клиенте в подавляющем большинстве простая, обычно все упирается именно в UI и как все это дело организовать. Фреймворки существенно упрощают разработку.

    Ну и еще на angular (а точнее на ionic) сделано приличное количество гибридных приложений (cordova/phonegap)
    Ответ написан
    Комментировать
  • Когда стоит применять ngAnimate?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    plnkr.co/edit/uO05xXDA754bR1FHO6Zg?p=preview - думаю проще всего посмотреть пример... просто прикиньте как бы вы делали такое без ngAnimate.
    Ответ написан
  • Как вывести данные json объекта только определенного id?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Ответ написан
    Комментировать
  • Какие актуальные на сегодня статьи или книги,можно прочитать,чтобы понять асинхронность в JavaScript?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    1) про асинхронность - https://developer.mozilla.org/en-US/docs/Web/JavaS... и дальше гуглить что не понятно

    2) про реализацию в библиотеках фреймворках (в порядке простоты реализации и сложности в поддержке, не спроста есть такая штука как callback-hell):
    - колбэки
    - промисы (ангуляр использует их повсюду к примеру, они же есть в jquery)
    - корутины (имеет смысл с трансляторами типа babel.js так как генераторы появились только в ES2015)
    Ответ написан
    Комментировать
  • Почему возникает ошибка если не обернуть директиву при её расширении?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    https://docs.angularjs.org/error/$compile/multidir...

    там все написано. Конкретно ваш случай:
    - Multiple directives attempting to define a template or templateURL.

    когда вы делаете replace: true, ваш шаблон содержит только один элемент - super, и текущий элемент - sub, заменяется на super и у вас выходит так что две директивы ссылаются на один элемент. В свою очередь Super имеет свой темплейт, и происходит конфликт. Если бы там небыло темплейта - все было бы хорошо.
    Ответ написан
    Комментировать
  • Как в Angular тестировать темплейт контроллера при использовании vm?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Все просто - не тестируйте контроллеры. У вас там в принципе не должно быть кода который бы вы хотели потестить. Контроллеры как отдельные сущности не имеют шаблонов, вообще. Единственный случай когда это допустимо - контроллеры директивы, тут у нас есть определенные шаблоны. Но опять же, тут мы будем тестить именно директиву.

    Вы так же можете потестить контроллер напрямую дергая его методы, что предпочтительнее, так как с controller as синтаксисом мы избавляемся от такой вредной зависимости как $scope.
    Ответ написан
  • Почему появляется ошибка при использовании as-синтаксиса в AngularJS?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    ну потому что не
    app.controller('ctrl', function() {

    а

    app.controller('Controller', function() {
    Ответ написан
  • Стоит ли писать frontend на Angular.js для проекта сложности примерно как CRM?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Минусы ангуляра:
    - очень легко написать плохо по незнанию. Во второй версии с этим чуть получше.

    В целом не вижу проблем, сам использую Angular и последний год все новые проекты веду на нем (в рамках комании). Пока минус только в том что приходится людям мышление менять.

    Можно к слову посмотреть в сторону polymer как хорошую библиотеку для организации UI.

    p.s. Как верно подметил sim3x Angular2 написан на ES2015 (и находится в глубокой альфе), на который я настоятельно рекомендую обратить взор (babel.js для транляции кода из ES2015 в ES5).
    Ответ написан
    6 комментариев
  • Управляемая сортировка в angular?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    <div ng-controller="ProductsController as products">
      <select ng-model="products.sort" ng-change="products.updateList()">
      </select>
    
      <ul>
        <li ng-repeat="item in products.list">{{ item.name }}</li>
      </ul>
    </div>


    function ProductsController {
       var vm = this;
    
       vm.sort = 1;
       vm.updateList = updateList;
       updateList();
    
       function updateList () {
           vm.list = vm.list.sort(function (a, b) {
                // логика сортировки тут
           });
       }
    }


    p.s. хватит решать проблемы тупо в шаблонах, будет намного проще и меньше боли.
    Ответ написан
    7 комментариев
  • Angular динамическая смена контролера по названию?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    меняйте темплейт просто, а "динамически подменять контроллер" это шило. Подменяйте всю директиву, к которой относится контроллер.
    Ответ написан
    Комментировать
  • Как вывести данную таблицу из объекта json?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    1) преобразуйте данные так, что бы массив объектов, категорий в нужном порядке, и у них был бы список цен
    2) выведите таблицу через ngRepeat
    Ответ написан
    2 комментария
  • Как проставить value в форму более красивым способ в Laravel как бы сработала ngmodel?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    ГЛЕБ ГЛЕБОВ: грубо говоря:

    <input type="text" ng-model="blabla" />

    если вам надо единоразово установить значение и обратно получать вы его не хотите, то есть ng-value:

    <input type="text" ng-value="blabla />
    Ответ написан
  • $q, Promises или же task?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    промисы, awaitable, таски... все суть одного и тогоже - единоразовые операции. То есть для обработки периодических событий они не подходят. И да, в контексте ангуляра вы можете юзать любую реализацию поддерживающую then, он их сконвертит в свои промисы. В целом же лучше использовать либо нативные промисы, которые уже есть во всяких там хромах, либо $q ангуларовский.

    то что вы описываете - event stream. для этого можно взять https://baconjs.github.io/
    Ответ написан
  • Как правильно связать сервисы объектами для которых он создается?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    нельзя инжектировать.

    можно, ng-transclude вам в помощь.

    $document и уже самому там искать то что нужно

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

    В идеальном мире ваша директива делалась бы примерно так:

    <x-video-bg-container type="youtube" video-id="{{my.videoID}}">
        <h1>Headline</h1>
        <x-video-bg-controls></x-video-bg-controls>
    </x-video-bg-container>


    Далее магия ng-transclude и общение через контроллер директивы, что позволяет нам реализовать свои контролы и т.д. Так же можно реализовать делегаты для директивы через сервисы или через колбэки директив.... Как пример - можете посмотреть как это реализовано в ionic framework (UI фреймворк для мобильных приложений на angular)
    Ответ написан
  • Как правильно внедрять зависимости в es6?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    // custom.directive.js
    
    /** @ngInject */
    export default function(customService){
      return {
        ///...
      };
    }


    // app.module.js
    angular
        .module('app')
        .service('customService', require('./custom.service.js'))
        .directive('customDirective', require('./custom.directive.js'))
    ;


    // bootstrap.js
    import './app.module';
    
    angular.bootstrap(document, [app]);


    я как-то так делаю обычно.

    Отдельно об аннотации ngInject - она нужна что бы ng-annotate ну на 100% разобрался что мы хотим туда что-то заинджектить и добавил автоматом свойство $inject с перечислением зависимостей.
    Ответ написан
    3 комментария
  • Придерживаетесь ли Вы angular-styleguide или какого-то другого?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    придерживаюсь но не соблюдаю на 100%. Я больше пытаюсь адаптировать свой код к грядущему релизу Angular2. Если придерживаться стайлгайда - то переход будет проще.

    конкретно момент описанный вами - не верная трактовка. Вы не полностью привели код:

    /* избегайте этого */
    angular
        .module('app', ['ngRoute'])
        .controller('SomeController', SomeController)
        .factory('someFactory', someFactory);
    
    function SomeController() { }
    
    function someFactory() { }


    если переместить SomeController и someFactory (и сделать их классами и фабрику заменить на просто класс) в отдельные файлы - то вы ничего не нарушили. У вас реализация будет в отдельных файлах, а регистрация в одном месте - в модуле. Все счастливы.
    Ответ написан
    2 комментария
  • Как на AngularJS динамически копировать значение поля в другое поле с фильтром?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    фильтровать в контроллере по изменению свойства и записывать в другое, либо же сделать директиву которая будет добавлять свой formatter.
    Ответ написан
    Комментировать