Ответы пользователя по тегу Angular
  • Выбор фреймворка для нового проекта - Angular? React? Vue?

    @xom9lk
    У вас большая команда. Выбрать стоит тот инструмент, который дает все необходимое для работы, т.е. Angular2, или Ember.
    Angular2 сейчас предполагает тотальное использование RxJS и это хорошо. Rx пользуется популярностью у разработчиков мобильных приложений и вы можете переиспользовать практики.

    По поводу Vue и React, да, они похожи если к React добавить MobX и перестать использовать this.state, и да, Vue - это View из Angular + computed;
    Проблемы использования Vue и React в командах очевидны: один хочет использовать такое хранилище/роутер/библиотеку, другой - другое, через неделю - третье. Нет нормальных CLI инструментов. Этот мир изменчив и нестабилен, хотя, в последнее время устаканивается.
    Вот простейшие компоненты на React и Vue:

    Vue (typescript):
    import * as Vue from 'vue';
    import Component from 'vue-class-component';
    
    @Component({
      template: '<div><div>{{message}}</div><button @click="onClick">Click!</button></div>'
    })
    export class MyComponent extends Vue {
      static message: string = 'Hello!';
      protected showMessage: boolean = false;
    
      onClick (): void {
          this.showMessage = !this.showMessage;
      }
      
      get message(): string {
          return this.showMessage ? MyComponent.message : '';
      }
    }


    React + MobX (typescript):
    import * as React from "react";
    import {observable, action, computed} from "mobx";
    import {observer} from "mobx-react";
    
    @observer
    export class MyComponent extends React.Component<{}, {}> {
        static message: string = 'Hello!';
    
        @observable
        protected showMessage: boolean = false;
    
        @action
        onClick = (): void => {
            this.showMessage = !this.showMessage;
        };
    
        @computed
        get message(): string {
            return this.showMessage ? MyComponent.message : '';
        };
    
        render() {
            return (
                <div>
                    <div>{this.message}</div>
                    <button onClick={this.onClick}>Click!</button>
                </div>
            );
        }
    }


    Как видите, не сильно много различий если брать во внимание главную их задачу - отображать данные.
    Ответ написан
  • Как перекрасить Label?

    @xom9lk
    Самый простой и "топорный вариант":
    <span ng-init="result = (product.data | dateMark : product.termin)" ng-class="result.class" >Дата изготовления: {{result.text}} </span>

    productApp.filter('dateMark', function(){
      return function(srok, TERMIN){
        var nowDate = new Date;
        console.log(srok);
        if (Date.parse(nowDate) < ( Date.parse(srok) + ((86400000 * TERMIN)))){
             return {text:'Свежий товар', class: 'label label-success'};
        }
         else if (Date.parse(nowDate) > ( Date.parse(srok) + ((86400000 * TERMIN)))){
             return {text:'Термин хранения кончается', class: 'label label-error'};
        }
          else return 'Ошибка';
      }
    })


    Вот демо:
    jsfiddle
    Ответ написан
  • Как получить нужное значение?

    @xom9lk
    <p>Дата изготовления: {{product.data | dateMark : product.termin}} </p>

    productApp.filter('dateMark', function(){
      return function(srok, TERMIN){
        var nowDate = new Date;
        if (nowDate < ( Date.parse(srok)* (86400 * TERMIN) ){
          return 'Круто';
        } else if (nowDate > Date.parse(srok))
          return 'НЕ круто';
          else return 'Ошибка';
      }
    });
    Ответ написан
    Комментировать