cheatsheet – Stepan Suvorov Blog https://stepansuvorov.com/blog Release 2.0 Sat, 07 Jan 2017 20:36:07 +0000 en-US hourly 1 https://wordpress.org/?v=6.3.1 Шпаргалка по синтаксису шаблонов Angular2 https://stepansuvorov.com/blog/2017/01/%d1%88%d0%bf%d0%b0%d1%80%d0%b3%d0%b0%d0%bb%d0%ba%d0%b0-%d0%bf%d0%be-%d1%81%d0%b8%d0%bd%d1%82%d0%b0%d0%ba%d1%81%d0%b8%d1%81%d1%83-%d1%88%d0%b0%d0%b1%d0%bb%d0%be%d0%bd%d0%be%d0%b2-angular2/ https://stepansuvorov.com/blog/2017/01/%d1%88%d0%bf%d0%b0%d1%80%d0%b3%d0%b0%d0%bb%d0%ba%d0%b0-%d0%bf%d0%be-%d1%81%d0%b8%d0%bd%d1%82%d0%b0%d0%ba%d1%81%d0%b8%d1%81%d1%83-%d1%88%d0%b0%d0%b1%d0%bb%d0%be%d0%bd%d0%be%d0%b2-angular2/#respond Sat, 07 Jan 2017 20:26:30 +0000 http://stepansuvorov.com/blog/?p=3197 Continue reading ]]> взято с официальной документации, переведено/переработано.

<input [value]=”firstName”> задание свойства value
<div [attr.role]=”myAriaRole”> задание атрибута role.
<div [class.extra-sparkle]=”isDelightful”> Выставляет класс extra-sparkle по условию isDelightful
<div [style.width.px]=”mySize”> задает значение width в пикселях.
<button (click)=”readRainbow($event)”> Привязывает обраобтчик клика readRainbow
<p>Hello {{ponyName}}</p>
<div title=”Hello {{ponyName}}“>
Подставляет значение выражения
<my-cmp [(title)]=”name”> Двойное связывание, альтернатива: <my-cmp [title]=”name” (titleChange)=”name=$event”>
<video #movieplayer …>
<button (click)=”movieplayer.play()”>
</video>
Создает локальную переменную movieplayer, которая является ссылкой на элемент video
<p *myUnless=”myExpression”>…</p> Символ * превращает текущий элмент во втроенный шаблон: :<template [myUnless]=”myExpression”><p>…</p></template>
<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p> Применение myCardNumberFormatter пайпа.
<p>Employer: {{employer?.companyName}}</p> Указание не обязательного поля с помощью оператора “?
]]>
https://stepansuvorov.com/blog/2017/01/%d1%88%d0%bf%d0%b0%d1%80%d0%b3%d0%b0%d0%bb%d0%ba%d0%b0-%d0%bf%d0%be-%d1%81%d0%b8%d0%bd%d1%82%d0%b0%d0%ba%d1%81%d0%b8%d1%81%d1%83-%d1%88%d0%b0%d0%b1%d0%bb%d0%be%d0%bd%d0%be%d0%b2-angular2/feed/ 0
Angular one-time binding cheat sheet https://stepansuvorov.com/blog/2015/08/angular-one-time-binding-cheat-sheet/ https://stepansuvorov.com/blog/2015/08/angular-one-time-binding-cheat-sheet/#comments Thu, 06 Aug 2015 19:14:04 +0000 http://stepansuvorov.com/blog/?p=2810 Continue reading ]]> ng-bind:

[javascript gutter=”0″]
{{ ::user.name }}
[/javascript]

with filters

[javascript gutter=”0″]
{{ ::item.price|number }}
[/javascript]

ng-class:

[javascript gutter=”0″]
<div ng-class="::{ ‘active’: item.active }"></div>
[/javascript]

ng-if:

[javascript gutter=”0″]
<div ng-if="::user.isOnline"></div>
[/javascript]

with several conditions:

[javascript gutter=”0″]
<div ng-if="::(user.isOnline && users.length)"></div>
[/javascript]

ng-repeat:

[javascript gutter=”0″]
<div ng-repeat="item in ::user.items"></div>
[/javascript]

ng-options:

[javascript gutter=”0″]
<select ng-options="n.title for n in ::list"></select>
[/javascript]

directive attributes:

[javascript gutter=”0″]
<user-card user="::currentUser"></user-card>
[/javascript]
it will work even if you have two-way binging inside your directive

 

]]>
https://stepansuvorov.com/blog/2015/08/angular-one-time-binding-cheat-sheet/feed/ 1
AngularJS $watch options Cheat Sheet https://stepansuvorov.com/blog/2015/07/angularjs-watch-options-cheat-sheet/ https://stepansuvorov.com/blog/2015/07/angularjs-watch-options-cheat-sheet/#respond Thu, 23 Jul 2015 17:58:48 +0000 http://stepansuvorov.com/blog/?p=2757 quite a nice illustration from ng ofdoc

concepts-scope-watch-strategies

]]>
https://stepansuvorov.com/blog/2015/07/angularjs-watch-options-cheat-sheet/feed/ 0