Привет всем! Есть ли знатоки karma-тестирования под ангуляр 1.x?

/warn

Anton has been warned (1/3)

Тут вроде были бедняги кроме меня у кого lazy loading не работал, собирал все в один бандл. Обратите внимание на https://github.com/angular/angular-cli/issues/2496#issuecomment-252155012 , у меня как оказалось в этом была проблема

https://ng-bootstrap.github.io/#/home

Это я уже видел. Интересно, пробовал ли кто-то на практике использовать. Совсем сыро еще?

решается "scripts": [ "../node_modules/moment/moment.js" ] в angular-cli.json

я тут выше задавал вопрос про стили и про то, что пришлось часть их выносить во внешний CSS, оказывается надо просто документацию читать (RTFM). в общем в CSS стилях можно писать вот так .switcher-wrapper-1 >>> .form-inline .form-group { ... } и при обработке ко всему, что идет после >>> не будет добавляться кракозябра типа [_ngcontent-puq-3]

я тут выше задавал вопрос про стили и про то, что пришлось часть их выносить во внешний CSS, оказывается надо просто документацию читать (RTFM). в общем в CSS стилях можно писать вот так .switcher-wrapper-1 >>> .form-inline .form-group { ... } и при обработке ко всему, что идет после >>> не будет добавляться кракозябра типа [_ngcontent-puq-3]

А зачем если у компонента можно выключить ViewEncopsulation ?

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

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

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

хотя большой минус этой хрени с >>> или /deep/ - что это не CSS, стандартные студийный редактор, например, ругается

хотя большой минус этой хрени с >>> или /deep/ - что это не CSS, стандартные студийный редактор, например, ругается

Нет я вообще пытаюсь понять когда нужно выключать CSS инкапсуляцию? я пока ни 1 реальной необходимости не видел

ааа. понял. я написал компонент, который является контейнером типа ng-switch. и вот хочется, чтобы формы при помещении в этот контейнер отображались чуть иначе. для той штуки с >>> генерируется такой селектор: .switcher-wrapper-1[_ngcontent-puq-3] .form-inline .form-group

если убрать >>> то будет так: .switcher-wrapper-1[_ngcontent-nnj-3] .form-inline[_ngcontent-nnj-3] .form-group[_ngcontent-nnj-3]

и стиль уже не применяется

Тут на помощь могут придти BEM и OOCSS - просто вешаем дополнительный CSS класс на форму внутри ng-switch и все

А как вы тогда делаете интерфейсы? Есть какие-то рабочие инструменты UI?

А как вы тогда делаете интерфейсы? Есть какие-то рабочие инструменты UI?

Учим CSS, Визуальные паттерны, CSS Дизайн Паттерны, CSS методологии и не нужно никаких инструментов https://youtu.be/4KkqfjII2eQ

ну это путь к глобальному CSS получается (пока не нашел текущее решение, то так и сделал). в общем я тут не готов рассуждать как правильней: верстальщик из меня так себе, но если вдруг проблема возникнет - решение есть

ну это путь к глобальному CSS получается (пока не нашел текущее решение, то так и сделал). в общем я тут не готов рассуждать как правильней: верстальщик из меня так себе, но если вдруг проблема возникнет - решение есть

Нет. Зачем? В компоненте создаете класс который меняет внешний вид формы - и применяетет его внутри компонента в форме

.this-component-modefier { color: red } <div ngIf=""> <form class="this-component-modefier"></div>

ну вот тут и нюанс же: <switcher><vehicle-editor *editMode></vehicle-editor>.... вот примерно так выглядит разметка. ставить модификатор в vehicle-editor тут не совсем правильно, т.к. он использовать может и вне контекста switcher-а

а значит мы либо пишем в CSS глобальный .switcher .editor { color: red} или пишем в локальный свитчера .switcher >>> .editor { color: red }

ну вот тут и нюанс же: <switcher><vehicle-editor *editMode></vehicle-editor>.... вот примерно так выглядит разметка. ставить модификатор в vehicle-editor тут не совсем правильно, т.к. он использовать может и вне контекста switcher-а

Вам срочно нужно порыть BEM или OOCSS - в общем и целом мысль о том что ставить CSS класс на компонент "не правильно" а лучше составить двух этажный селектор - вот что не правильно. вы везде где используете switcher ставите на vehicle-editor дополнительны CSS класс и получаете вот это — tempaltes — <switcher><vehicle-editor class="in-switcher" *editMode></vehicle-editor></switcher> <vehicle-editor *editMode></vehicle-editor> —- css - только в venchicle-editor — .editor { color: blue; } .in-switcher { color: red; }

Учим CSS, Визуальные паттерны, CSS Дизайн Паттерны, CSS методологии и не нужно никаких инструментов https://youtu.be/4KkqfjII2eQ

Алексей. Верстка, свои контролы и все такое - это понятно все. Но делать велосипеды, тот же typeahead или грид - это как-то странно. Тем более, если ты не сильно крут в JS

мой вопрос уплыл :) сейчас просто мой переопределенный компонент не может найти другие компоненты из базового модуля, пишет, что нужно добавить USTOM_ELEMENTS_SCHEMA в @NgModule.schemas но мне не помогло (или я что-то не верно сделал)

всем привет, понадобилось переопределить один компонент из стороннего модуля (primeng/datatable), в базовом модуле есть еще три компонента, которые используются в шаблоне целевого компонента, как мне их правильно заимпортить в отнаследованный компонент?

Вам срочно нужно порыть BEM или OOCSS - в общем и целом мысль о том что ставить CSS класс на компонент "не правильно" а лучше составить двух этажный селектор - вот что не правильно. вы везде где используете switcher ставите на vehicle-editor дополнительны CSS класс и получаете вот это — tempaltes — <switcher><vehicle-editor class="in-switcher" *editMode></vehicle-editor></switcher> <vehicle-editor *editMode></vehicle-editor> —- css - только в venchicle-editor — .editor { color: blue; } .in-switcher { color: red; }

мысль понял, спасибо. почитаю сейчас по BEM и OOCSS

Алексей. Верстка, свои контролы и все такое - это понятно все. Но делать велосипеды, тот же typeahead или грид - это как-то странно. Тем более, если ты не сильно крут в JS

Если вы про компонеты - то https://github.com/AngularClass/awesome-angular2#components-1

мысль понял, спасибо. почитаю сейчас по BEM и OOCSS

https://youtu.be/4KkqfjII2eQ - посмотрите видео - оно не иделаьно но может помочь

@carwiz как можно заниматься фронтендом, если не знаешь цсс?)

или нанимайте отдельного верстальщика, или вникайте :)

Если вы про компонеты - то https://github.com/AngularClass/awesome-angular2#components-1

О, отличный набор. Спасибо :)

всем привет, понадобилось переопределить один компонент из стороннего модуля (primeng/datatable), в базовом модуле есть еще три компонента, которые используются в шаблоне целевого компонента, как мне их правильно заимпортить в отнаследованный компонент?

Через ngModule переопределяешь provider для данного компоента, а сам компонент либо с нуля либо наследуешь (в зависимости от того что нужно)

@carwiz как можно заниматься фронтендом, если не знаешь цсс?)

Anton, CSS тут в последнюю очередь имеет значение ) Мне нужен Грид, который хотя бы 10к записей поддерживает нормально, например.

на одной странице? тогда наймите спеца по ui/ux :D а если серьезно, то тут нужно искать решение которое по скроллу выгружает невидимые данные, иначе браузер будет играть в пошаговую стратегию)

по наследованию никто не подскажет, куда копать? я уже два часа ковыряюсь

Anton, CSS тут в последнюю очередь имеет значение ) Мне нужен Грид, который хотя бы 10к записей поддерживает нормально, например.

http://swimlane.github.io/angular2-data-table/#something

@Ai_boy не очень гибкое решение - мне, например сейчас нужны кастомные фильтры на каждое поле (инпаты, селекты, мультиселекты, датарэйнджпикеры), и сюда их так просто не вкрячишь, я для этих целей нашел http://www.primefaces.org/primeng/#/datatable

http://swimlane.github.io/angular2-data-table/#something

О, круто! Похоже на то, что нужно ) Вот теперь моя вера в NG2 подросла )))

Почему может теряться родительское меню с роутер линками?

В чем разница между @angular и anguar2? В разных уроках по-разному

В чем разница между @angular и anguar2? В разных уроках по-разному

Это новый и старый репозиторий в npm соответственно

Это новый и старый репозиторий в npm соответственно

Спасибо

Если видишь angular2 - это значит проект сделан на beta еще

У меня такая вложенность: Меню1 - router-outlet - Меню2 - router-outlet - Меню3 - router-outlet. Когда выбираю что-то из Меню3, пропадает Меню2

C именованными router-outlet вообще все сыпется

Почему-то модули из Меню3 подставляются на место модулей из Меню2(

Компоненты то есть

C именованными router-outlet вообще все сыпется

Нужно запомнить, что именованные роутеры только когда у тебя на одном уровне (читай вложенности) есть несколько независимых путей. У тебя скорее всего не так, поэтому они не нужны тут.

Да, у меня на разных, но выбирается почему-то на уровень выше, чем надо

Да, у меня на разных, но выбирается почему-то на уровень выше, чем надо

Может что-то с линками

А какой верный подход чтобы обратиться к элементу в доме?

Какой-то аналог, как например ref в реакте

Пример из документации import {Http, HTTP_PROVIDERS} from '@angular/http'; import 'rxjs/add/operator/map' @Component({ selector: 'http-app', viewProviders: [HTTP_PROVIDERS], templateUrl: 'people.html' }) class PeopleComponent { constructor(http: Http) { http.get('people.json') // Call map on the response observable to get the parsed people object .map(res => res.json()) // Subscribe to the observable to get the parsed people object and attach it to the // component .subscribe(people => this.people = people); } }

Выдет ошибку (index):16 Error: (SystemJS) Invalid viewProviders for "SearchComponent" - only instances of Provider and Type are allowed, got: [?undefined?]

Компонент переименовал, само-собой

Почему так, кто подскажет?

Хз, но тебе видимо поможет это: http://blog.thoughtram.io/angular/2015/08/20/host-and-visibility-in-angular-2-dependency-injection.html

А какой верный подход чтобы обратиться к элементу в доме?

https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html

А какой верный подход чтобы обратиться к элементу в доме?

https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html

@ViewChild('template-variable') component-variable: ElementRef; ... let element = this.component-variable.nativeElement;

Error:Initialization error (typescript). Cannot find tsserverlibrary.js or tsserver.js file - подскажите в WebStorm такую ошибку как побороть в окне Typescript?

Был компонент в одном модуле. Он понадобился в дочернем к первому модуле. Вынес этот компонент в свой модуль и импортировал его в первых двух. Теперь его никто не видит, а проект при этом билдится. Как так?

по-моему zip оператор. но лучше проверь

И если компонент в declarations у дочернего модуля, который импортируется в первом модуле, то в шаблонах компонента первого модуля не находит этот компонент...

я может не совсем понимаю ситуацию, но в exports модуля ты добавлял компонент?

посмотри тут https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module

Combine latest если я правильно понял что надо

Спасибо, Стас. Все время путаюсь.

http://blog.thoughtram.io/

ну я пишу angular 2 [моя проблема], чаще всего получается найти, что хотел

а не знаете, можно ли сделать так, чтобы одна директива добавляла к элементу еще какую-то директиву. типа как это сделано для host

@Ai_boy подскажи, вроде как в TS 2.1 впилили spread оператор. Я уже час не могу заставить его работать

Ребят, есть такой кейс: Есть компонент home, root path ведёт на него. Нужно, чтобы [routerLinkActive] был активен для обоих путей: / и /home Как это сделать?

Документацию по этой теме не нашёл ?

а может редиреск с / на /home

Ребят, а с https://deploybot.com/ кто работал? Много мороки с конфигами под второй ангуляр?

а может редиреск с / на /home

Хорошая идея, спасибо

теоретически можно еще вот так: const routes: Routes = [ { path: '/', component: HomeComponent, canActivate: [AuthGuard] }, { path: '/home', component: HomeComponent, canActivate: [AuthGuard] }, ];

Как правильно детектить изменение конкретного инпута в директивах?

Пробовал повесить сеттер @Input('tooltipEnable') set updateEnableTooltip(enable) {} но не работает

Пробовал повесить сеттер @Input('tooltipEnable') set updateEnableTooltip(enable) {} но не работает

ngOnChanges

Если кто может помочь или подсказать, скажу спаибо. https://toster.ru/q/375838

Если кто может помочь или подсказать, скажу спаибо. https://toster.ru/q/375838

можно через injector резолвить

как ioc

но тогда injecctor в конструкторе будет

А можно маленький пример? Просто странно, не ожидал что а Ангуляре это на автомате делается, за ширмой