Ответы пользователя по тегу Angular
  • Как дождаться выполнения http запроса с angularjs?

    @bromzh
    Drugs-driven development
    $http.post('/api/item', item) // делаем запрос к API
      .then(function (response) { // чейним промис от $http
        // этот код начнёт выполняться только после успешного ответа от сервера
        // в параметре response будут данные ответа: HTTP-код ответа, данные из тела ответа и т.д.
        console.log(response); // обрабатываем ответ от сервера, если надо
        return $state.go('item.list'); // переход на страницу
      });
    Ответ написан
  • Какой стек выбрать для разработки обучающей веб-игры?

    @bromzh
    Drugs-driven development
    Java, Spark, Jackson, PostgreSQL (он теперь умеет в json- и jsonb-поля), Hibernate, Angular1.x+webpack+es6 или Angular2 + TS.
    Ответ написан
    Комментировать
  • Как лучше организовать приложение на Angular?

    @bromzh
    Drugs-driven development
    Добавлю к советам Николай
    https://github.com/johnpapa/angular-styleguide
    Советую почитать и следовать. Лучше сразу приучиться писать хорошо, чем потом переучиваться.

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

    Так что делай 5 директив, потом вставляй их на страницу.
    Ответ написан
    1 комментарий
  • Как лучше реализовать приложение?

    @bromzh
    Drugs-driven development
    Есть вариант взять ноду, на сервере поднять монгу. У монги есть файловое хранилище. Хранить файлы в нём, а информацию о пользователе в самой БД.
    Бэкенд пишется на чём угодно. Знаешь js - бери ноду.
    Далее есть пара вариантов:
    1) писать всё приложение на expressjs (или аналогах), UI сделать в виде шаблонов с минимум логики на клиенте
    2) написать на ноде api-сервис, на фронтенде взять ангуляр/реакт/ембер.
    3) писать всё изоморфно на метеоре (или реакте, есть примеры изоморфных приложух на нём).

    Лично я бы сделал api-сервис (правда на java/python, так как их больше люблю) с монгой в качестве БД, а на клиенте взял бы ангуляр (может даже и второй).
    Ответ написан
    Комментировать
  • Как при помощи Angular показать что приложение загружается?

    @bromzh
    Drugs-driven development
    https://github.com/chieffancypants/angular-loading-bar
    Можешь стили взять свои, чтобы скрыть всё.
    Ответ написан
    Комментировать
  • Ошибка использования сервиса в своем сервисе?

    @bromzh
    Drugs-driven development
    В провайдер нельзя инжектить сервисы, только другие провайдеры (и константы). Связано это с тем, что провайдер можно внедрять на стадии конфига, чтобы иметь возможность сконфигурировать сервис. Во время стадии конфига сервисы ещё недоступны, так что внедрить их не выйдет.

    Если у тебя провайдер, то сервисы нужно внедрять в твой сервис. т.е. в функцию, которая в поле $get:
    angular.module('foo')
        .provider('$foo', ['сюда внедрять только провайдеры и константы, не сервисы', function (...) {
            return {
                $get: ['а сюда можно внедрить сервисы', function (...) { }
            };
        }
    ]);
    
    // Или в более читабельном виде:
    
    angular.module('foo')
        .provider('foo', fooProvider);
    
    fooProvider.$inject = ['$httpProvider', 'someAnotherProvider'];
    function fooProvider($httpProvider, someAnotherProvider) {
        var provider = this;
    
        provider.someProperty = 'someValue';
        provider.$get = foo;
    
        ////////// 
    
        foo.$inject = ['$http', 'anotherService'];
        function foo($http, anotherService) {
            var service = {};
    
            service.bar = bar;
            service.foo = 1;
    
            return service;
    
            //////////
    
            function bar () {
                return provider.someProperty;
            }
        }
    }
    Ответ написан
    Комментировать
  • Какой фреймворк выбрать для интернет-магазина?

    @bromzh
    Drugs-driven development
    Бери angular (первый). Для связи с REST API бери restangular или стандартный сервис $http.
    Я сам бэкенд пишу на питоне и яве. На фронте ангуляр.
    Ответ написан
    8 комментариев
  • Почему не работает watch в angular.js?

    @bromzh
    Drugs-driven development
    Попробуй добавить 3-й параметр со значением true в вызов $watch.

    UPD
    Может просто рассылать уведомления при изменении? В функции edit_node сделать $scope.$emit / $scope.$broadcast (смотря куда по иерархии нужно их отсылать).
    Ответ написан
    2 комментария
  • AngularJS Как у url изменять get параметры и их считывать?

    @bromzh
    Drugs-driven development
    Гугл запретили?
    https://github.com/angular-ui/ui-router
    christopherthielen.github.io/ui-router-extras/#/home

    Соответственно роутинг я не использую.

    А зря.
    Ответ написан
    Комментировать
  • Снова AngularJS или насколько автор тупит?

    @bromzh
    Drugs-driven development
    Нужно научиться пользоваться ангуляром и не писать подобный г-нокод. Jquery не должен быть в контроллере. Потому что контроллер ничего не должен знать о DOM, ведь он выполняется когда реальный DOM ещё не построен (работает только с виртуальным). Если нужно впилить jquery-плагин, то нужно создать директиву. В директиве в методе postLink (он же link) и нужно работать с DOM. Причём нужно обернуть всё в $(function () { ... }), чтобы код выполнился только по окончанию построения DOM. И в конце вызвать scope.$digest().
    angular.module('foo').directive('player', function () {
      return {
        restrict: 'E',
        link: function (scope, element) {
          $(function () {
            твой код
          }
          scope.$digest();
        }
      };
    });

    Ну и раз уж ты пользуешься жквери, то пиши на нём всё, зачем document.getElementById ?
    Ответ написан
    Комментировать
  • Как реализовать crud юзеров на фронт-енде, на ангуляре?

    @bromzh
    Drugs-driven development
    https://docs.angularjs.org/api/ngResource/service/...
    Автоматом создаёт CRUD-методы
    Ответ написан
    Комментировать
  • AngularJS или ExtJS для работы с Java бэкендом?

    @bromzh
    Drugs-driven development
    На текущем месте работы делаем личный кабинет интернет-банка. Довольно насыщенный фронтенд - диаграммы, много всяких форм, и т.д.
    Стек как раз Spring + angular с requirejs(я фронтенд пилю). Пишется отлично. На другом фреймворке было бы геморнее.

    UPD. Перечислю вещи, которые мне нравятся в ангуляре.
    • DI. Это довольно хороший паттерн, и тут он очень помогает. Да и это близко по духу к самой яве, там это часто используется.
    • Двустороннее связывание данных. Многие критикуют его, т.к. в больших приложениях могут начаться тормоза из-за кучи вотчеров. Но на самом деле, если писать нормальный код, связывать с 2-х сторон только нужное и помнить про циклы. то всё будет хорошо.
    • Директивы
    • Отсутствие шаблонов. Вместо этого манипуляции напрямую с DOM. Для меня это плюс, так как нет разделения на обычный html-код и синтаксис шаблонизатора. Это очень удобно. Сперва делается вёрстка, при этом верстальщик не обязательно должен знать ангуляр. А потом js-разраб расставляет по коду директивы и постепенно наращивает функционал. В случае наличия шаблонизатора, верстальщик должен ещё и уметь в шаблоны.
    • Отсутствие стандартного набора виджетов. Можно выбирать на свой вкус: есть модуль с UI на Bootstrap'e, есть Matrial, и всегда можно сделать свой набор UI
    • Модули
    • Куча библиотек почти на все случаи жизни
    Ответ написан
    1 комментарий
  • Как в Angular $rootScope передать переменную из шаблона?

    @bromzh
    Drugs-driven development
    хотелось бы минимизировать кол-во запросов к серверу

    Так не отправляй их слишком много, в чём проблема? Создаёшь сервис, в нём функцию, которая будет загружать данные, вызываешь эту функцию в контроллере.

    UPD
    Если уж сайт генерируется извне, то можно сделать так же, как делает плагин angular-templatecache для систем сборок: сгенерировать код, который бы эти данные засовывал в константу:
    angular.module('app', [зависимости]); // это ты пишешь сам
    
    // А это должен генерировать сам генератор:
    angular.module('app').constant('screens', { 
    а сюда вставлять сгенерированные данные в каком-то формате
    });

    Ну а в ангуляр-коде использовать эту константу по назначению.
    Ответ написан
    6 комментариев
  • Почему использование $parse не рекомендуется в angularjs?

    @bromzh
    Drugs-driven development
    Может потому что это и есть почти тоже, что и eval? Следовательно нужно тщательно проверять входные параметры. А ты сразу вызываешь её от значений атрибутов, даже не проверив их ни на что. Ну и отслеживать ошибки в таких штуках крайне сложно.

    habrahabr.ru/post/244001/#comments
    Ответ написан
    1 комментарий
  • Angular $resource как отправить свой header?

    @bromzh
    Drugs-driven development
    404 же, проверь адрес. И проверь, присылает ли сервер заголовоки
    Access-Control-Allow-Origin: http://foo.example
    Access-Control-Allow-Methods: POST, GET, OPTIONS
    Access-Control-Allow-Headers: X-PINGOTHER
    Access-Control-Max-Age: 1728000
    Ответ написан
    Комментировать
  • Как передать значение с JQuery в AngularJS?

    @bromzh
    Drugs-driven development
    Если используешь ангуляр, то забудь про jquery. Напиши на ангуляре сервис, через $http отправляй/получай данные. Либо откажись от ангуляра и используй только jquery с чем-то другим. Текущий вариант - ненужные костыли.
    Ответ написан
    Комментировать
  • Как лучше организовать локальные настройки в angular-проекте?

    @bromzh Автор вопроса
    Drugs-driven development
    Спасибо за ответы, они навели на решение. Сделал так:

    За основу взял структуру проекта, которую генерит generator-gulp-angular.
    В корне создал папку config, в которой лежат json-файлы с настройками. В default.json описаны всевозможные настройки. В других файлах достаточно лишь переопределить нужное поле:
    // config/default.json
    {
      "api": {
        "scheme": "http",
        "host": "localhost",
        "port": 8080,
        "root": "/api/v1/"
      }
    }
    // config/prod.json
    {
      "api": {
        "host": "example.com"
      }
    }
    // config/dev.json
    {}

    Файл local.json добавлен в гитигнор, но его можно использовать (если он есть).

    Далее, написал задачу для gulp, которая в зависимости от окружения генерирует с помощью gulp-ng-config js-файл с ангуляровским модулем:
    // gulp/config.js
    'use strict';
    
    var gulp = require('gulp');
    var gutil = require('gulp-util');
    var cjson = require('cjson');
    var b2v = require('buffer-to-vinyl');
    var gulpNgConfig = require('gulp-ng-config');
    
    module.exports = function (options) {
      function p(name) {
        return [options.config + '/default.json', options.config + '/' + name + '.json'];
      }
    
      gulp.task('config', function () {
        var env = gutil.env.env || 'dev'; // получаем имя окружения через значение аргумента командной строки, или выставляем его равным dev, если ничего не передавалось
        var config = JSON.stringify({
          config: cjson.load(p([env]), true) // Загружаем json'ы, сливая их в 1 объект
        });
    
        return b2v.stream(new Buffer(config), 'config.js') // создаём поток из строки
          .pipe(gulpNgConfig('lemonfront.config', { // генерим по JSON'у ангуляровский модуль
            createModule: false
          }))
          .pipe(gulp.dest(options.tmp + '/serve/app/')); // и записываем во временную папку
      });
    }

    Эта задача стоит в зависимостях у другой (script) и генерит такой файл:
    // .tmp/serve/app/config.js
    angular.module('app.config')
      .constant('config', {
        "api": {
          "scheme": "http",
          "host": "localhost",
          "port": 8080,
          "root": "/api/v1/"
        }
      });


    Далее, добавил этот скрипт в список для инъекции в html. В index.js определил сам модуль и добавил его в зависимости всего проекта, чтобы любой дочерний модуль имел доступ к этим настройкам:
    // src/app/index.js
    angular.module('app.config', []);
    angular.module('lemonfront', [
      'ngAnimate',
      'ngCookies',
      'ngSanitize',
      'ui.router',
    
      'app.config',
      'app.core'
    ]);

    В ангуляре теперь достаточно внедрить config:
    angular.module('...', [])
    .factory(SomeService, ['config', function (config) {
      console.log(config.api.host);
    }]);

    А выбор конфига идёт через аргумент при запуске gulp:
    gulp build --env=prod
    Ответ написан
    Комментировать
  • Как устроен AngularJS?

    @bromzh
    Drugs-driven development
    Конкретно скобки скорее всего парсятся регуляркой. Всё, что между них разбивается на токены (там ведь может быть не только простой вывод переменной. а целые выражения) и обрабатывается по сложной логике, учитывая всякие окружающие scope`ы, data binding-и, внедрённые зависимости в контроллер и т.д.
    Ответ написан
    6 комментариев
  • Как правильно работать с чекбоксами в angular?

    @bromzh
    Drugs-driven development
    Комментировать