Ответы пользователя по тегу Angular
  • Как в Django REST сделать два списка объектов?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    1-ый вариант.
    Ответ написан
    Комментировать
  • Странное поведение нулей в JS, как такое может быть?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    простите, а что должно работать? В первом варианте вы всегда сэтите vm.list в null,

    function (data) {
        if (Array.isArray(data)) {
             vm.list = vm.list.concat(data);
        } else {
             vm.list = null;
        }
    }
    Ответ написан
    4 комментария
  • Запуск функции, когда все данные загрузятся?

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

    function foo() {
        return $http.get('/foo');
    }
    
    function bar() {
        return $http.get('/bar');
    }
    
    $q.all([
      foo(),
      bar()
    ]).then(function (results) {
       // данные загружены
    })
    Ответ написан
    Комментировать
  • Как запустить snippet директивы для angulsrjs?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    https://docs.angularjs.org/guide/directive

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

    60908_colours_881-by_endi.gif

    Updated
    Черт... не думал что вы это сделаете ну... теперь не отвертеться...

    .directive('', ['', function(){

    что тут происходит. Первые пустые кавычки - имя директивы. Записывается в camel case, используется с нижним подчеркиванием (так уж повелось с DOM).

    .directive('someDirective', fn);
    // <some-directive></some-directive>


    дальше, у нас есть массив, в котором одни пустые кавычки и функция. Это такой вот кастыль (по другому не выйдет сказать) что бы описать зависимости директивы. Можно заменить массив просто на функцию, но если вы будете прописывать зависимости от сервисов (например от $q) при минификации все сломается. Дело в том, что если мы явно не указали проперти $inject у функции, которую передаем, то angular будет пытаться подобрать зависимости по названиям аргументов. И тут проблемы - при минификации имена аргументов меняются и... все плохо. Потому либо явно прописываем $inject либо используем array notation, при котором сначала идут оригинальные названия сервисов, а последним элементом массива - функция, в которое это все будет инджектиться. Ну и справедливости ради - есть ng-annotate который все это автоматизирует.

    По поводу пропертей, основы - link - это та функция, которая связывает конкретный DOM элемент и директиву. По сути именно тут должно происходить работа с DOM. Еще из часто используемых свойств является controller, там собственно.... контроллер, который содержит именно логику работы директивы. Контроллер может шарится между зависимыми директивами (зависимости описываются через require и описывают положение относительно других директив в DOM).

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

    Собственно по тому как и что писать в директивах много написано.
    Ответ написан
    5 комментариев
  • Как ng-repeat разделить запятыми?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    да что за народ то пошел... Если можно что-то в шаблонах делать то все пытаются там делать.

    angular.module('app').filter('join', function () {
        return function (arr, glue) {
             if (!Array.isArray(arr)) {return arr;}
             return arr.join(glue);
        };
    });


    <strong>{{store.product.genres | join : ', '}}</strong>
    Ответ написан
    Комментировать
  • Что лучше подойдет для построения клиентского GUI в сочитании с AngularJs?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    смотря насколько вам кросбраузерно (на дворе ж 2015-ый, IE11+ скажем) и насколько наворочено.

    Я лично использую bootstrap в большинстве проектов и не парюсь, но мне дико нравится material design и потому тыкаюсь с angular material.
    Ответ написан
    5 комментариев
  • Как устроен AngularJS?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    ангуляр берет HTML и парсит его (не регурялками, ибо парсить HTML регурярками не шибко удобно). Запись вида {{var}} является ничем иным как сокращенной записью директивы ng-bind:

    <div>Hello, {{name}}</div>
    <!-- Эквивалентно -->
    <div> Hello, <span ng-bind="name"></span></div>


    Как только шаблон полностью обработан, ангуляр может начать применять директивы к элементам. тут я на 100% не помню, но вроде как Angular тупо траверсит все элементы нашего фрагмента и пытается найти зарегистрированные директивы. Это удобно, тогда у нас есть период простого препроцессинга HTML, а затем мы просим распарсить это дело браузер, далее работая исключительно с DOM. Браузер за нас сделает большую часть грязной работы.

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

    Директива ngBind, которая используется в нашем случае, слушает изменения переменной в скоупе и, когда дожидается оных, меняет содержимое элемента через DOM.
    Ответ написан
    6 комментариев
  • Есть ли какой-то туториал по Angular Seed?

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

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Скажем контроллер директивы которые делает запросы на получение массива

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

    И вообще в целом не перекликающиеся контроллеры

    c3d0981ae770f926eedf4eda7505b006.jpeg
    Как много стоит плодить директив?

    Столько, сколько нужно. Важно что бы директивы были изолированными кусочками функциональности, не имеющими представления о реализации внешнего мира.
    Ответ написан
    3 комментария
  • Как добавить анимацию в AngularJS при изменении модели?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    пишите директиву, а там магия с DOM и css transition.
    Ответ написан
    Комментировать
  • Использовал ли кто то HMVC при работе с AngularJs?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Просто используйте директивы грамотно и будет вам что-то похожее на HMVC.

    По сути именно это дают вам директивы, возможность разделить одно приложение на иерархию маленьких, изолированных MVC приложений, каждое из которых отвечает за свой маленький кусок работы.
    Ответ написан
    Комментировать
  • Скажите, пожалуйста, как получить параметры с УРЛ?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    разделяй и властвуй.

    как получить параметр "inactive" с УРЛ

    Курить в сторону маршрутизации (ngRoute, ui-router). На чем у вас эти урлы реализованы я не вкурсе.

    передать его в php

    сервис $http.
    Ответ написан
    Комментировать
  • SPA application, авторизация и что рендерить backend'y?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    что стоит , если вообще стоит, рендерить на стороне backend ?

    Ничего вообще не надо редндрить. Сервер отдельно, клиент отдельно. Они никак не должны пересекаться. server-side рендеринг применяют как один из вариантов оптимизаций + для поисковиков. Это нужно далеко не всем и далеко не всегда.

    c REST авторизовываемся token'ом

    Еще следует помнить, что хранить секьюрные данные доступными из JS не шибко удобно (браузеры увы не предоставляют секьюрного хранилища пока-что), потому лучше токен сэтить сервером в httponly куку. Тогда браузер будет все сам разруливать и будет чуть чуть более безопасно. К сожалению другого способа в контексте SPA как организовать это дело секьюрно я не знаю. В общем случае и в localStorage хранить норм, но меня это смущает. Ну и естественно все под HTTPS, иначе все загоны по безопасности идут прахом.
    Ответ написан
    3 комментария
  • Как работать с datetime в angularjs?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Ответ написан
    Комментировать
  • Как устранить данную ошибку Angular js?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    1 - метод $scope.getChildList вызывается на каждый $digest цикл
    2 - каждый вызов $scope.getChildList порождает вызов запроса на сервак через $http
    3 - каждый вызов $http завершенный (да и вообще изменение статуса) порождает запуск $digest цикла
    4 - возвращаемся к первому пункту

    // Все люди ходят в туалет
    // но обычно делают это в одном месте
    function dataProviderFactory($http, $q) {
    
        return {
            getManufactures: getManufactures,
            getCategories: getCategories,
            getCategoryTree: getCategoryTree
        };
    
        function getManufactures () {
            var sql = 'SELECT * FROM audio.w8265_virtuemart_manufacturers_ru_ru';
    
            return exec(sql)
                .then(function (data) {
                    return pluck(data, 'mf_name');
                }, repeatError);
        }
    
        function getCategories(pid) {
            var sql = 'SELECT virtuemart_category_id, category_name FROM audio.w8265_virtuemart_categories_ru_ru join audio.w8265_virtuemart_category_categories on virtuemart_category_id = category_child_id where category_parent_id = ' + (pid || 0);
    
            return exec(sql)
                .then(function (data) {
                    return pluck(data, 'category_name');
                }, repeatError);
        }
    
        // а еще лучше уж тогда так:
        function getCategoryTree() {
            // get all categories
            var sql = 'SELECT virtuemart_category_id as id, category_name, category_parent_id as parent_id FROM audio.w8265_virtuemart_categories_ru_ru join audio.w8265_virtuemart_category_categories on virtuemart_category_id = category_child_id';
    
            return exec(sql)
                .then(function (categories) {
    
                    return getChildren(categories);
    
                    // простенький рекурсивный обход дерева
                    function getChildren(collection, pid) {
                        pid = pid || 0;
    
                        return collection.filter(function (item) {
                            return item.parent_id == pid;
                        }).map(function (category) {
    
                            return {
                                name: category.category_name,
                                children: getChildren(collection, category.id)
                            }
                        });
                    }
                }, repeatError);
        }
    
        // я думаю не стоит даже говорить насколько это плохо....
        // я надеюсь что никто не увидит эту систему кроме как менеджеры какие-нибудь...
        // ибо это нехилая такая дыра в безопасности
        // да и вообще стремно
        function exec(sql) {
    
            return $http
                .get('/ajax/index.php')
                .then(function (response) {
                    // а если вы на сервере укажите Content-type application/json
                    // Angular будет делать вам это автоматом
                    return angular.fromJson(response.data);
                }, repeatError);
        }
    
        function repeatError(reason) {
            return $q.reject(reason)
        }
    
        function pluck(collection, key) {
    
            return collection.map(function (item) {
                return item[key];
            });
        }
    }
    
    // чистенький контроллер
    function SearchController (dataProvider) {
        var vm = this;
    
        dataProvider.getCategoryTree().then(function (tree) {
    
            vm.categories = tree;
        });
    }


    ну и да. используйте controller as синтаксис:

    <div ng-controller="SearchController as search">
        <ul>
           <li ng-repeat="item in search.tree">
    </div>


    короче мысль простая - вам вообще не нужно было дергать этот метод контроллера или вообще делать его.

    еще одно замечание, вы сделали просто ужасные штуки в контроллере и приэтом еще и используете track by явно не понимая что это такое и зачем оно надо.
    Ответ написан
  • Как правильно вывести $scope?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    правильнее убрать это из шаблона и разруливать на уровне сервисов или хотя бы в контроллере. Ну а так...

    {{vm[CurrentLanguage]}}
    Ответ написан
    2 комментария
  • Как реализовать возврат данных на angularjs?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    вот только ради бога, не надо использовать фильтр filter для этого.

    фильтры поменялись - контроллер фильтрует коллекцию результат - выводим коллекцию. Никакой магии, никаких фильтров во вьюшках, все максимально примитивно и просто.
    Ответ написан
    Комментировать
  • Как на angular, вызвать событие focus на input?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    писать совю директиву?

    да, именно так.

    angular.module('app')
        .directive('focusOnEnter', focusOnEnter)
    ;
    
    function focusOnEnter() {
         return (scope, el) => {
             el.focus();
         }
    };


    <input focus-on-enter type="text" />
    Ответ написан
    5 комментариев
  • Как сделать множественные фильтры в Angular?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    или же видел решение

    Делать фильтрацию в контроллере любым удобным для вас образом. Хватит писать логику в шаблонах.
    Ответ написан
    9 комментариев