Exploring OPE with Angular and React

37 Pages·2017·1.67 MB·English

by  Marcus Jonsson

Exploring OPE with Angular and React
On-Page Edit ♥ Client-Side Rendering
Episerver Ascend
Stockholm, Sweden
2018-05-15
Episerver
John-Philip “JP” Johansson
Team Lead
CMS UI – we make the editor UI
[email protected]
Episerver
CMS UI team blog
http://world.episerver.com/blogs/?type=cmsblog
We want to blog more.
Encourage us.
Short story
Episerver
2013 – AngularJS site
2013 – AngularJS site
2013 – AngularJS site
Time constraint: Solutions will swoosh by ☺
common scenarios
7
Episerver
1. Using JS framework for rendering properties
<div @Html.EditAttributes(m => m.Image)>
<img ng-src="{{$ctrl.image.url}}" />
<em>{{$ctrl.image.text}}</em>
</div>
Step 1/2: Owning the rendering
<div @Html.EditAttributes(m => m.Image)>
<img ng-src="{{$ctrl.image.url}}" />
<em>{{$ctrl.image.text}}</em>
</div>