Ответы пользователя по тегу Angular
  • Индексация сайта при использовании AngularJS?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Прочтите рекомендации Google на этот счет. Bing и Yandex тоже поддерживают подобное (по сути в том же виде)
    Ответ написан
    2 комментария
  • Angularjs. Как создать свою CMS?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Вы под каждый фреймворк будете вопрос задавать?

    AngularJS в контексте CMS подходит разве что для админки, так как вы сталкнетесь с веселыми вопросами индексации.

    Twitter построен был изначально на RubyOnRails, сейчас вроде как написано все на Scala. И уж извините, но с CMS твиттер сравнивать как-то не очень.

    Я бы посоветовал вам ограничить свои мысли задачей. То есть что включает в себя CMS, разделить на функции и т.д. И потом прикинуть как это реализовать.
    Ответ написан
  • Angular.js Директива следящая за результатами запросов к API сервера

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    .controller('MyCtrl', function ($scope, myDataProvider, flashBag) {
        myDataProvider.getData()
            .then(function () {
                  flashBag.success('All done!');
            }, function () {
                  flashBag.error('Something went wrong...');
            });
    })


    как-то так.

    Реализаций подобного хватает
    Ответ написан
    3 комментария
  • Ng-repeat во втором уровне json

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    jsfiddle.net/X6Zvm/1

    Сразу рекомендую вынести штуку которая забирает данные в сервис, и там все эти извращения спрятать.

    Ну и может подумайте, вдруг есть более надежный источник данных который отдает валидный JSON.
    Ответ написан
    Комментировать
  • AngularJS, загрузка конфига перед запуском приложения?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Но мне необходимо, чтобы конфиг загрузился до других модулей\сервисов\итд

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

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

    У меня схожая система хранения конфигов - просто сделал таск для сборки под определенное окружение.
    Ответ написан
    2 комментария
  • Почему не работает watch в директиве при вводе значения?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Используйте изолированные скоупы:
    directive('ngIsInputValid', function () {
        return {
            scope: {
                 input: '=ngIsInputValid'
            },
            link: function (scope, el, attr) {
                 scope.$watch('input.$invalid', function (invalid) {
                       if (invalid && scope.input.$dirty) {
                             el.show();
                       }
                       el.hide();
                 })
            }
        };
    });


    p.s. любая валидация должна происходить на инпутах и вестись через ngModelController.
    Ответ написан
    1 комментарий
  • Как бороться с плохочитабельным HTML при использовании angularJS?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    <input class="d-form__input-text" 
               name="pickup__point_address" 
               ng-model="pickup__point_address"
               ng-required="true"
               ng-focus="focusHandler($event)" 
               ng-blur="blurHandler($event)">
    
    <div class="d-form__error"
            ng-show="orderingForm.pickup__point_address.$invalid && orderingForm.pickup__point_address.$dirty">
         <span class="d-form__exlmark"></span> Пожалуйста заполните поле
    </div>


    p.s. спан внутри d-form_error я бы убрал и заменил на :before к класса контейнера.
    Так же условие в ng-show можно сделать чуть проще - сделайте свою директиву, типа show-on-invalid="orderingForm.pickup__point_address" и все будет чуть приятнее (я думаю что таких вещей к вас в формах хватает.) Ну или еще чего можно понавыдумывать, типа в контроллер вынести метод хелпер (не очень хорошо, но можно)
    Ответ написан
    Комментировать
  • Создание приложения и деплой, как?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Собственно, а в чем проблемы то?

    Создавать приложения - собственно angular.js + система сборки (gulp/grunt), опционально идут штуки типа less/sass, autoprefixer, зависимости ресолвятся через bower/components... По сути нужно организовать процесс сборки билда, который будет уже деплоиться. Никаких сложностей аля миграций для баз данных и т.д. нету, так что все сводится к аплоаду билда на сервер (по scp например).

    Либо уточните какие моменты вас инетесуют.
    Ответ написан
  • Как получить данные из элемента в AngularJs?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    вам нужно реализовать директиву, которая будет отвечать за drag'n'drop объектов, и внутри организовать калбэки, которые можно задавать через scope. (например что-то типа on-drop). Для удобства настройки можно сделать несколько директив, и одну главную (читать про require).

    Работать с элементами можно только в директивах, но директивы не должны ничего знать о вашей бизнес логике. То есть если у вас появляются конструкции вида angular.element(garage).scope() то это повод задуматься.

    Должно получиться что-то такое:
    <ul>
    <li data-ng-repeat="car in Model.cars" data-draggable="car" data-draggable-item="car">{{car.modelName}}</li>
    </ul>
    <ul>
        <li data-ng-repeat="garage in Model.garages"  data-droppable="car" data-on-drop="doSomething">{{garage.name}}</li>
    </ul>

    атрибуты data-draggable и data-droppable будут отмечены тегами, что бы указать какие объекты можно тягать куда. Для вашей задачи можно и без этого.

    // controller
    $scope.doSomething = function (car, garage) {
        // ставим машинку в гараж, убираем ее из списка если хотим, или что-то еще...
        // контроллер в этом случае вообще ничего не знает о drag n drop, 
        // только о том что что-то нужно сделать с данными.
    };
    Ответ написан
  • Angularjs как организовать сохранение данных

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Посмотрите в сторону того, как это ораганизовано в Backbone. Более того, это нормально использовать Backbone в контексте angular-based приложеня?
    Ответ написан
    Комментировать
  • Почему директива Angular неправильно интерпретирует значение?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Вопервых:
    <ul data-foo="{{foo.bar}}">
    тут вы записываете в атрибут значение foo.bar в виде строки. То есть у вас был массив, а вы его приводите к строке.

    Но и так у вас работать ничего не будет, так как вы используете
    scope: {
         model: '@foo'
    },

    тоесть в скоуп не будет передаваться само значение, будет передаваться только содержимое атрибута. Оно у вас и так есть.

    plnkr.co/edit/iuswK0v6CgyiEMf3Lph9?p=preview

    но проще всего будет сделать так:
    scope: {
         model: '=foo'
    },
    Ответ написан
  • Стоит ли использовать AngularJS вне концепции SPA?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Так же когда-то задавался подобным вопросом... По сути все резюмировано в этом вопросе на StackOverflow.
    stackoverflow.com/questions/15231251/is-angular-js...

    Если коротко - можно.
    Ответ написан
    Комментировать
  • AngularJs Рендер таблицы, почему срабатывает только 1 раз ?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    что бы angular понял что данные нужно синхронизировать, нужно запустить у $scope либо $apply (проверяет на изменения все от $rootScope и вниз по иерархии) либо $digest (обновляет текущий и дочерние скоупы).

    Вообще как это должно выглядеть:
    angular.module('app')
    
    .factory('myApi', function ($http, $q) {
        return {
            list: function () {
                 return $http.get('/points').then(function (response) {
                     return response.data;
                 }, function () {
                     return $q.reject(); // произошла какая-то ошибка
                 });
            },
            add: function (point) {
                  return $http.post('/points', data).then(function (response) {
                       if (201 === response.status) { // если на сервере все сохранилось удачно
                            return response.data;
                       }
    
                       return $q.reject(); // как-то не удалось
                  }, function () {
                       return $q.reject();
                  });
            }
        }
    })
    
    .controller('MyCtrl', function ($scope, myApi) {
        myApi.list().then(function (points) {
            $scope.points = points;
        }); // было бы неплохо еще и ошибки как-то обрабатывать
        
        $scope.add = function () {
            myApi.add({...}).then(function (item) {
                 $scope.points.push(item);
            });
        }
    });


    Это как пример. Когда $http завершит запрос, этот сервис запустит digest цикл (так как на него завязаны промисы, без вызова $apply/$digest промисы так же не отработают сразу. Так что при таком варианте скоуп всегда будет в актуальном состоянии.

    Если у вас какое-то действие меняет что-то в $scope по событию - нужно вручную вызывать $scope.$apply или $scope.$digest. Причем лучше сделать так:
    // перед вызовом функции, переданной в $apply, 
    // приложение синхронизирует свое состояние
    // Это позволяет гарантировать то, что в на момент вызова функции
    // отработают все ватчеры и внесут возможные изменения
    // Это эдакий безопасный способ
    $scope.$apply(function () {
        // chage scope
        $scope.points = []; // меняем...
    });


    Если же у вас подменяется коллекция на ту же, то не отработает ватчер, не обновится таблица.
    Ответ написан
  • Angular.js и backend будет ли дублирование кода?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Валидация на сервере должна быть. Валидация на клиенте просто понижает таких мелких запросов к серверу для валидации, так же упрощает сам сервер в виду того что нужно организовать только REST Api. Так же это увеличивает качество самого UI. Но главное же что бы не дублировалась бизнес логика, обычно она полностью закрыта на сервере, а клиент лишь предоставляет UI для работы с данными. Хотя если приложение должно работать оффлайн дублирование все равно будет иметь место.
    Ответ написан
    Комментировать
  • Работа с angular, bootstrap модальные окна, как правильно работать с AJAX ?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    вы заменили кастыль на jquery гуано на angular.js.

    Никогда в контроллере не работайте с jquery или dom. Для этого существуют директивы.
    Никогда в контроллере не работайте с $http, выносите все это в сервисы.

    Конструкция, которую вы приводите, реализуется приблизительно так:
    angular.module('app')
       .factory('myApiClient', function ($http, $q) {
           return {
                save: function (data) {
                
                     return $http({
                           method: 'POST',
                           url: 'some_url',
                           data: data
                     }).then(function (response) {
                         if (!response.data || response.data.error) {
                             return $q.reject();
                         }
                         
                         return response.data; // я не уверен надо ли вам это... сами решите
                     }, function () {
                         return $q.reject();
                     });
                } 
           }     
       })
    
       .controller('MyCtrl', function ($scope, myApiClient) {
           $scope.save = function () {
               myApiClient.save(...).then(function (data) {
                    $scope.showResponse = true;
               }, function () {
                    $scope.showResponse = false;
               })
           }
       });


    А в представлении уже используете директивы, которые завязаны на scope (ngHide/ngShow). Идею вы должны уловить. Суть в максимальном уменьшении связанности. Иначе смысла использовать angular я не вижу. И у меня есть подозрение что для вашей задачи не нужен angular.
    Ответ написан
    Комментировать
  • AngularJS ngRepeat и ngForm - как обратиться к конкретному экземпляру contact?

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

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

    Если вам нужно, что бы вложенная директива имела доступ к директиве родителю. то используйте связь через контроллер родительской директивы (читать про опцию require при определении директивы). Например:

    angular.module('foo', [])
    
    .directive('foo', function () {
        return {
            restrict: 'E',
            controller: function ($scope) {
                   this.$childs = [];
                   this.appendChild = function (child) {
                         this.$childs.push(child);
                   }
            }
        }
    })
    
    .directive('bar', function () {
        return {
             restrict: 'E',
             requires: '^foo', // говорит о том что директива должна быть вложена в другую
             link: function (scope, el, attr, ctrl) {
                   ctrl.appendChild(el);
             }
        }
    });
    Ответ написан
    Комментировать
  • Как использовать вложенные контролеры angularjs?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Это еще и не такие уж и длинные названия... так что не переживайте.
    Ответ написан
    Комментировать
  • Где посмотреть примеры AngularJS и Twitter Bootstrap?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    builtwith.angularjs.org - выбирайте в фильтрах по тегу bootstrap и радуйтесь.
    Ответ написан
    2 комментария