Ответы пользователя по тегу Angular
  • Какая версия NgRx Effects совместима с Angular 5.2?

    @bromzh
    Drugs-driven development
    У меня в проекте:
    "@angular/core": "^5.2.0",
    ...
    "@ngrx/effects": "^5.2.0",

    И всё работает.
    Ответ написан
    Комментировать
  • Angular 2 вложеные директивы?

    @bromzh
    Drugs-driven development
    Про модули (NgModule): https://angular.io/docs/ts/latest/guide/ngmodule.html

    module.id - это немного другое. Оно используется SystemJS при сборке и нужно оно для того, чтобы пути к шаблонам и стилям были относительно текущего файла: schwarty.com/2015/12/22/angular2-relative-paths-fo...

    Начинать учить ng2 самое время, так как релиз уже вышел.

    можно ли настроить компилятор ts что бы он ложил все js файли в отдельную папку, а не возлу ts файлов?


    Конечно, для этого есть опция outDir. https://www.typescriptlang.org/docs/handbook/compi...
    Ответ написан
    Комментировать
  • Angular2. Как сделать "ленивую загрузку"?

    @bromzh
    Drugs-driven development
    Чтобы такое сделать, понадобится какой-нибудь лоадер модулей, например SystemJS или Webpack. Пример использования вебпака есть тут https://github.com/AngularClass/angular2-webpack-s...
    Ответ написан
  • Как лучше хранить html щаблоны?

    @bromzh
    Drugs-driven development
    Если первый ангуляр, то надо хранить в строках.
    https://docs.angularjs.org/api/ng/service/$templat...

    И есть всякие плагины для автоконвертации из html в js-файл с этим кэшем:
    https://www.npmjs.com/package/grunt-angular-templates
    https://www.npmjs.com/package/gulp-angular-templat...
    Ответ написан
    Комментировать
  • Как авторизироваться с Google с помощью Angular?

    @bromzh
    Drugs-driven development
    Можно скинуть состояние в localstorage, а после возвращения со страницы гугла его восстановить.
    Ответ написан
    Комментировать
  • Актуален ли еще Angular 1.x?

    @bromzh
    Drugs-driven development
    Актуален, но в основном в рамках поддержки старого кода. Новые проекты начинать на первом не стоит. Зато, если начать учить второй сейчас, то к моменту релиза, и можно будет легче устроиться на соответствующие вакансии.
    Ответ написан
    Комментировать
  • Как внедрить зависимость в сервис Angular 2?

    @bromzh
    Drugs-driven development
    Обычно такая ошибка возникает, когда нарушен порядок импортов/экспортов, либо что-то не проимпортировалось. Если тип внедряемой в конструктор зависимости по какой-то причине ещё не был загружен, то возникает такая ошибка. Причём, с точки зрения typescript всё нормально, ведь компилятор прежде всего смотрит на .d.ts-файлы.
    В этой ситуации скорее всего в проект не правильно подключается http-модуль из ангуляра. Т.е. сами .d.ts-файлы подключаются нормально, а вот непосредстенно js-код в итоговую сборку не включается (или включается, но в неверной последовательности).

    Но нужно видеть весь проект, чтобы сказать точнее.
    Ответ написан
    Комментировать
  • Как запаковать существующее angular2 приложение в nativescript?

    @bromzh
    Drugs-driven development
    Комментировать
  • Какой каркас angular приложения?

    @bromzh
    Drugs-driven development
    Ответ написан
    Комментировать
  • Как подсветить синтаксис html в файле typescript в PHPStorm?

    @bromzh
    Drugs-driven development
    Потому что подсветка работает только для поля с именем template, а не templateUrl.

    Ещё бывает, что IDE тупит. У меня такое периодически случается: шторм перестаёт распознавать встроенный шаблон и показывает его как строку. Перезагрузка IDE должна помочь.
    Ответ написан
    Комментировать
  • Как подключить typings?

    @bromzh
    Drugs-driven development
    Если tsconfig составлен верно, то больше ничего не требуется. По-умолчанию, компилятор будет подключать и компилить все .ts и .d.ts-файлы в проект рекурсивно, начиная с той папки, в которой лежит tsconfig.json, обычно это корень проекта. Единственный важный момент: чтобы компилятор не начал искать и компилировать всё из папки node_modules, её нужно добавить в список исключаемых директорий.
    Вот пример конфига:
    {
      "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true
      },
      "exclude": [
        "node_modules"
      ],
      "compileOnSave": false,
      "buildOnSave": false
    }
    Ответ написан
    Комментировать
  • Почему ругается компилятор typescript?

    @bromzh
    Drugs-driven development
    Немного поправлю Евгения, достаточно объявить нужное поле в классе, тип можно не ставить:
    export class AppComponent {
        sommm; // Можно и без типа, зависит от настройки компилятора
        title = 'hero';
        hero: Hero = {
          id: 1,
          name: 'Wind'
        }
        constructor (){
          this.sommm = 'from this some'
        }    
     }


    Или ещё можно добавить модификатор в аргумент конструктора:
    export class AppComponent {
        // В Angular 2 так можно делать в классах, 
        // которые не являются компонентами/директивами/сервисами/пайпами и т.п.
        constructor (public sommm: string = 'from this some') {}   
     }
    // Это аналогично такому:
    export class AppComponent {
        sommm: string;
        constructor (sommm: string = 'from this some') {
            this.sommm = sommm;
        }    
     }

    Но типы всё-таки лучше указывать.

    UPD 0. В TypeScript обычно, если переменная имеет тип, отличный от any, то динамически добавлять поля в неё нельзя. Когда создаётся экземпляр класса (оператор new), вызывается специальный метод с именем 'constructor'. Ты пытаешься в конструкторе записать в поле sommm. Компилятор TypeScript работает до рантайма и типы определяет исходя из объявления класса. В данном случае, тип AppComponent имеет 2 поля (title, hero). Так что с его точки зрения, у типа AppComponent нет поля sommm, потому-то он и ругается.
    Иногда, видимо из-за особенностей лайв-серверов, бывает, что хоть компилятор и ругается на несоответствие типов, но код запускается и работает, ведь с точки зрения JS, всё выглядит верно.

    UPD 1. Хоть я и привёл пример, где не указывал типы переменных, но так делать не стоит (почти) никогда. Чтобы оградить себя от написания такого кода, можно добавить опцию компилятора "noImplicitAny". Без неё следующий код скомпилируется без ошибок:
    let a;
    function foo(bar) {}
    class Bar {
      foo;
      private bar;
    }

    Со включённой опцией компилятор выдаст ошибки там, где переменные, аргументы функций и методов или поля классов объявлены без типов.
    Нужно всегда стараться указывать тип у переменных. Если один тип не подходит, можно попробовать сделать функцию/метод/класс дженериками. Если тип неизвестен - то можно поставить any. Но обычно такое бывает редко, ведь обычно ты знаешь, что за тип ожидается (у меня в проектах практически нет переменных с типом any).

    UPD 2. Я привёл пример, где в конструкторе указывается модификатор. Это специальный синтаксис в Typescript, который позволяет уменьшить количество повторяющегося кода.
    Однако, есть важный момент: внедрение зависимостей в компоненты/директивы/сервисы/и т.п. во втором ангуляре идёт через конструктор. Причём, в typescript-версии, фреймворк по-умолчанию извлекает информацию о типе аргумента конструктора и пытается внедрить по этому типу нужную зависимость. Поэтому в конструкторах должны быть только внедряемые зависимости.

    UPD 3. Если пишешь на ангуляре, то стоит изучить styleguide и стараться следовать ему. Плюс, хорошо ещё прикрутить к проекту tslint.
    Ответ написан
    4 комментария
  • Как поисковые системы относятся к Angular.js?

    @bromzh
    Drugs-driven development
    Первый ангуляр индексируется плохо. Нужно городить костыли.

    Второй ангуляр умеет выполняться на сервере, таким образом можно получить начальные данные и отдать на клиент уже предварительно отрендереный html с ними. Так что второй ангуляр индексируется нормально (если правильно готовить).
    Ответ написан
    Комментировать
  • Стоит ли сейчас изучать Angular 1x?

    @bromzh
    Drugs-driven development
    Всё зависит от целей.

    Если есть желание поддерживать старые проекты, то да, изучать стоит. Первую версию пару лет разработчики ещё будут поддерживать. Вакансии пока есть, и их больше, чем по второму. Но со временем эти проекты либо перейдут на 2-ку, либо станут легаси-кодом, пилить который то ещё удовольствие. Ну а новые проекты нет причин начинать писать на 1-й ветке.
    Да, вакансий по второму ангуляру пока мало, но и сам фреймворк в стадии RC. Через полгода-год их заметно поприбавится.
    Ответ написан
  • Где посмотреть пример роута для сабмодулей для Angular2?

    @bromzh
    Drugs-driven development
    На текущий момент роутер в ангуляре меняют со старого на новый. В rc1 есть обе версии. Доков по новому роутеру пока практически нет (разрабы говорят, что пишут её прямо сейчас), а некоторые фичи ещё не реализованы. Доки по старому возможно устареют. Так что лучше подождать.
    Ответ написан
  • Как открыть разные шаблоны в зависимости от параметра angular?

    @bromzh
    Drugs-driven development
    https://docs.angularjs.org/api/ng/directive/ngInclude

    Но это попахивает г-нокодом. Делай директиву, в неё передавай catid.
    Ответ написан
    Комментировать
  • Как начать писать на Angular?

    @bromzh
    Drugs-driven development
    Ответ написан
    Комментировать
  • Что на счёт SEO в Angular 2?

    @bromzh
    Drugs-driven development
    Во втором ангуляре теперь можно (пре)рендерить на стороне сервера. Вот пример минимального приложения.
    Ответ написан
    Комментировать
  • Angular2. Как добавить класс блоку при mousehover?

    @bromzh
    Drugs-driven development
    А повестить обработчик можно только на весь компонент целиком? Хотелось бы на отедльный dom-элемент


    Ну так тоже просто: plnkr.co/edit/WaVyVLBI0B3zEo8vOnRL?p=preview
    @Component({
      selector: 'my-app',
      styles: [`
        .highlight { background: yellow; }
      `],
      template: `
        <h1 [class.highlight]="highlighted">My First Angular 2 App</h1>
        <div
          (mouseover)="onMouseOver()"
          (mouseout)="onMouseOut()">Hover me</div>
      `
    })
    export class AppComponent {
      highlighted: boolean;
      
      onMouseOver() {
        this.highlighted = true;
      }
      onMouseOut() {
        this.highlighted = false;
      }
    }
    Ответ написан
    Комментировать