Ответы пользователя по тегу Angular
  • Передача js кода или рендер на сервере?

    ozknemoy
    @ozknemoy
    яваскриптист
    если приложений всего пять то я бы не стал городить огород и разруливал бы все с помощью ngIf в зависимости от ответа с сервера. встречал компилятор аля $compile из первой части но он уже не тот что раньше
    Ответ написан
    Комментировать
  • Возможно ли Angular 2 использовать со сторонним кодом?

    ozknemoy
    @ozknemoy
    яваскриптист
    лучшее решение это адаптер к ангулару. для threejs например этот https://github.com/amcdnl/ng2-three-demo
    у бутстрапа есть моменты когда его обычная реализация перестает работать под ангуларом. например табы и модалки
    Ответ написан
    Комментировать
  • Почему не передается $scope?

    ozknemoy
    @ozknemoy
    яваскриптист
    не пользовался обычным роутером но думаю/уверен что ng-view создает изолированный scope и простое наследование тут не работает. вообще стоит пересмотреть существующую архитектуру. либо использовать не $scope а $rootScope что тоже является плохим решением
    Ответ написан
    Комментировать
  • Применения generator и promise?

    ozknemoy
    @ozknemoy
    яваскриптист
    побаловался в свое время генераторами для фронтенда. даже в продакшн сунул. и забыл про него. навсегда. сомнительной нужности вещь. ну а без промисов никуда
    через секунду вернет 4
    function getPromise() {
      return new Promise((resolve,fail)=> {
        // что либо асинхронное
        setTimeout(()=>resolve(4),1e3)
      })
    }
    
    getPromise().then((d)=>console.log(d))

    кто то возразит что генераторами можно и нужно последовательно разруливать несколько асинхронных запросов. для этого есть Promise.all
    Promise.all([
                httpFactory.get(`reward/${idReward}/view`)
                    .then(d=> {
                        this.reward = d.data;
                        this.term = dictFactory.termsDelivery[this.reward.delivery_rules].name;
                        this.reward.date = handleDataFactory.getIntervalDate(this.reward.send_date_from,this.reward.send_date_to);
                        // осталось наград
                        // sell_count == 0 это бесконечность наград
                        this.amountRewD=this.reward.sell_count-(this.reward.collected_count || 0)
                    }),
                httpFactory.getAuth()
                    .then(d=> {
                        // возвращает 'no' если нет регистрации или она устарела
                        //  под логином возвращает число денег на счету начиная от 0
                        this.isAuth = d.data;//===false? false:d.data;
                        // если фронт под логинон а сервер нет, то
                        if (this.isAuth == 'no' && authFront) userFactory._reLogin(true);
                    })
            ]).then(d=> {
                this.getAmountRewD()
            });
    Ответ написан
    Комментировать
  • Как сделать ребилд только изменённых файлов Angular 2 и Cordova для разработки в live-режиме?

    ozknemoy
    @ozknemoy
    яваскриптист
    с недавних пор предпочитаю готовые решения с гита. я юзал ionic3-angular4 https://github.com/ionic-team/ionic2-app-base используя команду и package.json 'ionic serve -l'
    Ответ написан
  • Оптимальный стек Front/Back/API для реализации проекта?

    ozknemoy
    @ozknemoy
    яваскриптист
    если юзать 4 ангулар то будет довольно просто написать мобильные приложения на ионик 3. но! писать надо на том что умеешь. новичек на ангуларе первые пол года пишет приложения которые надо будет переписывать в силу трешовости кода
    Ответ написан
    Комментировать
  • Какие максимально подробные гайды можете посоветовать по разработке на Node.JS?

    ozknemoy
    @ozknemoy
    яваскриптист
    все курсы это только лишь дополнение. база это книги. советую "веб разработка с применением node и express"
    Ответ написан
    Комментировать
  • Какая правильная структура папок в AngularJS приложении с бэкендом на NodeJS?

    ozknemoy
    @ozknemoy
    яваскриптист
    советую как в angular starter https://github.com/AngularClass/angular-starter
    Ответ написан
    Комментировать
  • Как скомпилировать директиву полученную из json?

    ozknemoy
    @ozknemoy
    яваскриптист
    первая часть уже выполнена($sce.trustAsHtml(html)). осталось во вью директиву ng-bind-html="data.content" но ангуларовские фишки не работают от такого способа. поэтому берем не директиву scrollbar а компонент пробрасываем через биндингс содержимое html с сервера и в методе $onChanges компилим этот html:

    this.$onChanges = (changes)=> {
    if(changes.nameOfBinding && changes.nameOfBinding.currentValue ) {
    var element = $compile(changes.nameOfBinding.currentValue)($scope);
     $element.append(element )
    }
      
    }
    Ответ написан
    1 комментарий
  • Как подключить ionic приложение к апи или базе данных для работы с запросами?

    ozknemoy
    @ozknemoy
    яваскриптист
    так же как и любое rest.
    Ответ написан
    Комментировать
  • Ошибка angular2-in-memory-web-api 404 (Not Found), в чём дело?

    ozknemoy
    @ozknemoy
    яваскриптист
    думаю стоит указать путь до билда в systemjs.config.js : 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    Ответ написан
    1 комментарий
  • Как сделать selenium тест для angular проекта?

    ozknemoy
    @ozknemoy
    яваскриптист
    больше чем написано в доках добавить особо нечего. похоже проверка заполненности происходит до того как туда вписывается значение. так вписываешь? $('#login_username').sendKeys(vars.userName) ?
    возможно мой пример поможет продвинуться
    describe('под логином /', function () {
            it(`нулевого счета ${vars.userName}.(не)доступность кнопки отправить + отправка на шлюз`,function () {
                $('login-button').click();
                $('#login_username').sendKeys(vars.userName);
                $('#login_password').sendKeys(vars.password,protractor.Key.ENTER);
    
                // нет чекбокса внутреннего аккаунта
                expect(exist_checkboxFromCAccount()).toBe(false);
                // доступность кнопки
                expect(notLoginOuterButton.getAttribute('disabled')).toBe(null);
                // иду на шлюз/отправляю значения инпутов
                notLoginOuterButton.click();
                browser.getCurrentUrl().then(function (url) {
                    // url должен содержать адрес шлюза а не локальный
                    //  он должен содержать и адрес возврата
                    expect(/secure\.onpay\.ru/i.test(url) && !/localhost/i.test(url)).toBe(true);
                });
            });
        });
    Ответ написан
  • Как правильно валидировать токен при запросе шаблона?

    ozknemoy
    @ozknemoy
    яваскриптист
    похоже $state.go внутри confirmToken запускает новое событие $stateChangeStart и получается бесконечный цикл. надо либо в resolve каждого state логику городить, но это много писать коду. либо не делать event.preventDefault() и после провала confirmToken просто редиректить на главную/делать $state.go('logout'). можно еще попробовать возвращать event.preventDefault() в промисе но наверно состояние все равно успеет поменяться
    Ответ написан
  • Как работать с полями для ввода Angular2?

    ozknemoy
    @ozknemoy
    яваскриптист
    вы переназначаете #prix="ngModel" в цикле и что там у вас на выходе не понятно. один из вариантов достать значение f : f.value[nameOfSomeControl] надо пробросить саму форму и имя инпута в контроллер (nameOfSomeControl). а так как имя задается по индексу(name="{{i}}") то добавяем в инпут (ngModelChange)="onValueChange(f,i)

    <input *ngIf="i!==texts.length-1" type="text" name="{{i}}" ngModel  [id]="i" (ngModelChange)="onValueChange(f,i)">


    и обработчик в контроллере
    onValueChange(f.i) {
        this.valueChanged.emit(f[i]);
      }
    Ответ написан
    7 комментариев
  • Как в Angular 2 перебрать и отрендерить компоненты?

    ozknemoy
    @ozknemoy
    яваскриптист
    внутри ngFor ставить теги с условием ngIf
    <tr *ngFor="let row of table['1'] | paginate: { itemsPerPage: 5, currentPage: currentPage}">
                                    <td data-text="Номер карты" ngIf="row.ref_number">{{row.ref_number}}</td>
                                    <td data-text="Личный товарооборот в баллах">{{row.my_bonus}}</td>
                                    <td data-text="Товарооборот сети в баллах">{{row.ref_bonus}}</td>
                                    <td data-text="Статус">
                                        <label class="label" [ngClass]="{
                                                    'label-danger':row.status.id===0,
                                                    'label-success':row.status.id===1,
                                                    'label-info':row.status.id===2,
                                                    'label-warning':row.status.id===3}">{{row.status.name}}</label>
                                    </td>
                                </tr>

    в качестве бонуса показана работа с классом тега в зависимости от условия. если массив ооочень большой то я обычно делаю подготовительную работу в контроллере
    Ответ написан
    Комментировать
  • Как проще добавить компонент которого нет в DOM при событии на другом компоненте в Angular2?

    ozknemoy
    @ozknemoy
    яваскриптист
    либо модалку юзать либо toast(https://github.com/PointInside/ng2-toastr). я и то и то использую
    Ответ написан
    Комментировать
  • Как заставить отрендереться компонент в Angular 2, если автоматически проверка не перерендеривается?

    ozknemoy
    @ozknemoy
    яваскриптист
    чтобы компонент знал что в сервисе что то изменилось нужно подписаться(либо отнаследоваться). у меня есть сервис который создает подписчика на событие. аналог $on +$emit/$broadcast из первой версии. там есть просто пример(который закомментирован) и конструктор который может создавать любый подписчики

    import { Observable } from 'rxjs/Observable';
    import { Injectable } from '@angular/core';
    import { BehaviorSubject } from 'rxjs/BehaviorSubject';
    import {HttpService} from "../modules/transfer-http/transfer-http";
    
    @Injectable()
    export class SharedService {
    
        constructor(public httpService:HttpService) {}
    
        /* это просто для примера для удобства понимания что делать
        private emitMessageSource;
        public messageListener$;
        public emitMessage;
    
        makeMessageListener() {
            this.emitMessageSource = new Subject<any>();
            this.messageListener$ = this.emitMessageSource.asObservable();
            this.emitMessage = (newValue: any) => {
                this.emitMessageSource.next(newValue);
            }
        }
        killMessageListener() {
            this.emitMessageSource = undefined;
            this.messageListener$ = undefined;
            this.emitMessage = undefined
        }*/
    
        // 1)в родителе создать слушателя:
        // var name = 'Message'; this.sharedService.makeProxy(name);
        // 2)подписаться: this.message$ = this.sharedService[name + 'Listener$'].subscribe(text => {console.log(text);});
        // 3)в ребенке:  отослать данные this.sharedService['emit' + 'Message']('Data from child');
        // 4)в родителе не забыть убить слушателя: this.sharedService.killListener('Message')
    
        makeProxy(name:string,dataSubject={}) {
            /*
            * if you have a component that listens to the isLoggedIn Observable after we already
            * call the next method, with simple Observable or Subject the component will not
            * get any data. That’s why we need the BehaviorSubject
            *
            * Mark Pieszak comment
              use .share() when creating the Observable, so that your async pipes
              don’t create multiple subscriptions.
             isLoggedIn() : Observable<boolean> {
             return this.isLoginSubject.asObservable().share();
             }
            */
            this['emit' + name + 'Source'] = new BehaviorSubject<any>(dataSubject);
            // сюда подписываемся и ...
            this[name + 'Listener$'] = this['emit' + name + 'Source'].asObservable().share();
            // ... обновляем значение
            this['emit' + name] = (newValue: any) => {
                this['emit' + name + 'Source'].next(newValue);
            }
        }
    
        killListener(name) {
            this['emit' + name + 'Source'] = undefined;
            this[name + 'Listener$'] = undefined;
            this['emit' + name] = undefined
        }
    
    
    }
    Ответ написан
  • Какой минимальный комплекс проектов в портфолио по Angular?

    ozknemoy
    @ozknemoy
    яваскриптист
    для реального опыта нужны реальные проекты. там всплывут все нюансы, подводные камни. навскидку что пригодится : написание директив/компонент(это обязательно),перехватчики запросов, кеш и возможно $templateCache, роутинг, обязательно формы со встроенными валидациями(+маски), бутстраповская модалка(там довольно интересная lazy load реализация), авторизация, сохранения в базу записей и тд. ну и новый js с вебпаком. без этого уже никуда. хотя и встречаются другие бандлеры.
    по поводу бекэнда я вообще не парюсь и посылаю. пускай ищут дальше. просто ангуларщиков найти трудно(мне например в вк периодически прелагают работу хотя не ищу) а чтоб еще и с каким то языком бека совпало, годами будут искать. про верстку по разному, довольно много где есть свои верстаки, я искал именно такое, в силу того что растерял навыки верстки
    Ответ написан
    1 комментарий
  • Angular.js vs React.js в MEAN-стеке с прицелом на оффер?

    ozknemoy
    @ozknemoy
    яваскриптист
    не стоит обольщаться низким порогом у angular. это не так. redux можно и в ангулар сунуть. typescript можно почти не пользовать. ставь тип any и все. на небольших приложениях он нафиг не нужен. 2 версия уже не актуальна. есть 4. тем более она побыстрее. в основном сейчас востребован ангулар 1, через пару лет ситуация изменится и придется учить 2 фремворка. то что ангулар все необходимое несет в себе, ты установишь в реакт сторонними плагинами. ну и для соц сети одностраничник это спорный выбор
    Ответ написан
    Комментировать
  • Как грамотно построить взаимодействие между компонентами в Angular2?

    ozknemoy
    @ozknemoy
    яваскриптист
    имхо если надо использовать взаимодействие между соседними компонентами структуру страницы стоит еще раз обдумать. не стоит сликом увлекаться разбиением всего и вся на компоненты. потом это трудно будет поддерживать
    Ответ написан
    Комментировать