-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
306 lines (207 loc) · 20.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Jacek Dargiel - Frontend developer and enthusiast</title>
<meta name="description" content="A Front-end development blog by Jacek Dargiel. HTML5, JS Web APIs, AngularJS, and the future of the Web. I write about my work, and the technologies I use as a front-end developer.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="alternate" href="/atom.xml" title="Jacek Dargiel - Frontend developer and enthusiast" type="application/atom+xml">
<link rel="stylesheet" href="//cdn.jsdelivr.net/pure/0.5.0/base-min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/4.1.0/css/font-awesome.min.css">
<link href='//fonts.googleapis.com/css?family=Source+Sans+Pro&subset=latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/css/main.css" type="text/css">
<link rel="stylesheet" href="/css/highlight.css" type="text/css">
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="layout" class="">
<div id="content" class="">
<article id="post-how-to-open-a-modal-from-any-state-using-ui-router" class="article-entry" itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h2><a href="/how-to-open-a-modal-from-any-state-using-ui-router/">How to open a modal from any state using UI-Router</a></h2>
<aside>
<div class="header-meta">
<time datetime="2014-10-09T20:30:00.000Z" itemprop="datePublished">October 9, 2014</time>
<!-- |
<a href="#" class="button button-xsmall">
<i class="fa fa-github"></i>
Edit on Github
</a> -->
</div>
<ul class="header-tags">
<li><a href="/tags/AngularJS/">AngularJS</a></li>
<li><a href="/tags/JavaScript/">JavaScript</a></li>
</ul>
</aside>
</header>
<p>This post is a follow-up to a question that was asked on the <a href="https://www.facebook.com/groups/angularjs.polska/" target="_blank" rel="external">AngularJS Poland</a> Facebook group. One of the members wanted to open a modal window from anywhere in the app using <a href="https://github.com/angular-ui/ui-router" target="_blank" rel="external">UI-Router</a>. At first this seemed simple enough. This is a common problem – so common that it has a section in the <a href="https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state" target="_blank" rel="external">UI-Router FAQ</a>. </p>
<h3 id="Using-a-modal-child-state"><a href="#Using-a-modal-child-state" class="headerlink" title="Using a modal child state"></a>Using a modal child state</h3><p>The most simplified example goes like this:</p>
<iframe src="http://embed.plnkr.co/yqcT6DY6KD5A94fSvGX9/app.js" width="100%" height="300" frameborder="0" allowfullscreen></iframe>
<p>In the above plunker we have two states defined – a parent state for the view (<code>index</code>) and a child state for the modal (<code>index.terms</code>). The child state doesn’t have a template nor controller as this isn’t an actually usable state. The magic happens because UI-Router executes the <code>onEnter</code> callback. This callback has the dependency injection system build in, and can open the modal dialog using the <code>$modal</code> service.</p>
<p>This works fine, unfortunately, this didn’t solve the initial problem – opening the modal window from anywhere in the app. In the above example, the modal state is a child of the <code>index</code> state, and opening it from any state other than <code>index</code> will cause UI-Router to switch to <code>index</code>. To solve this problem we need to take a different approach.</p>
<h3 id="Using-the-stateChangeStart-event"><a href="#Using-the-stateChangeStart-event" class="headerlink" title="Using the $stateChangeStart event"></a>Using the <code>$stateChangeStart</code> event</h3><iframe src="http://embed.plnkr.co/6dZfgb/app.js" width="100%" height="300" frameborder="0" allowfullscreen></iframe>
<p>This approach involves defining a placeholder state for the modal (<code>terms</code> in the above plunker) which is a top-level state. Next we need to listen to the <code>$stateChangeStart</code> event. UI-Router broadcasts this event from the <code>$rootScope</code> using <a href="https://docs.angularjs.org/guide/scope#scope-events-propagation" target="_blank" rel="external">Angulars event system</a> every time a state is about to change. Among the arguments passed to the event listeners this event passes the <code>toState</code> object. We can use this to check which state is to be displayed, display the modal dialog using the <code>$modal</code> service, and cancel the state transition using <code>event.preventDefault()</code>. I would recommend listening to <code>$stateChangeStart</code> in the <code>run</code> block of the module – this is far more elegant than using an application-wide controller encapsulating the entire app.</p>
<p>The above example solves the problem of displaying the modal from anywhere in the application. Some users expressed that this solution has some down sides, like unnaturally separating the modal display logic from the router configuration block. I couldn’t think of an elegant solution to this problem. If you see one, drop a line in the comments.</p>
</article>
<article id="post-restmod-ng-resource-alternative" class="article-entry" itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h2><a href="/restmod-ng-resource-alternative/">Angular Restmod: the better alternative to ng-resource</a></h2>
<aside>
<div class="header-meta">
<time datetime="2014-09-19T20:00:00.000Z" itemprop="datePublished">September 19, 2014</time>
<!-- |
<a href="#" class="button button-xsmall">
<i class="fa fa-github"></i>
Edit on Github
</a> -->
</div>
<ul class="header-tags">
<li><a href="/tags/AngularJS/">AngularJS</a></li>
<li><a href="/tags/JavaScript/">JavaScript</a></li>
</ul>
</aside>
</header>
<p>When building enterprise web apps it’s important to make some good design choices right in the beginning of the development process. One of those things is designing how your client application will communicate with your backend server. <code>$http</code> calls are simple to use, but when your application gets bigger, you will find it unwieldy. This is where <a href="https://en.wikipedia.org/wiki/Representational_state_transfer">REST APIs</a> come in. </p>
<p>In AngularJS, <a href="https://docs.angularjs.org/api/ngResource/service/$resource">ng-resource</a> is the build-in way to communicate with REST APIs. If you haven’t tried it yet, I suggest you give it a shot. Working with RESTfull resources requires a different approach, but it’s well worth getting used to. The AngularJS Tutorial has <a href="https://docs.angularjs.org/tutorial/step_11">a step on how to use ng-resource</a>. This however is not the only module out there that lets you interact with your REST API. I have worked with these:</p>
<ul>
<li><a href="https://docs.angularjs.org/api/ngResource/service/$resource">ng-resource</a></li>
<li><a href="https://github.com/mgonto/restangular">Restangular</a></li>
<li><a href="https://github.com/FineLinePrototyping/angularjs-rails-resource">Angular Rails Resource</a></li>
</ul>
<p>Recently however, I’ve found a new player - <a href="https://github.com/platanus/angular-restmod">Angular Restmod</a>. They’ve reached a stable 1.0 release number just a few days ago, and I’ve started using it in a project I’m working on for one of our clients.</p>
<p>Restmod tries to reach maximum compatibility with the <a href="http://jsonapi.org/">JSON API standard</a>, so it can extract your resources from specific JSON roots, read metadata from the <code>meta</code> root and use linked resources. This approach is working quite well for me thus far. </p>
<p class="article-more-link">
<a href="/restmod-ng-resource-alternative/#more">
<i class="fa fa-angle-double-right"></i>
Read more...
</a>
</p>
</article>
<article id="post-warsaw-js-1" class="article-entry" itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h2><a href="/warsaw-js-1/">WarsawJS #1</a></h2>
<aside>
<div class="header-meta">
<time datetime="2014-09-17T14:00:00.000Z" itemprop="datePublished">September 17, 2014</time>
<!-- |
<a href="#" class="button button-xsmall">
<i class="fa fa-github"></i>
Edit on Github
</a> -->
</div>
<ul class="header-tags">
<li><a href="/tags/Conferences/">Conferences</a></li>
</ul>
</aside>
</header>
<p>Today meet.js Warsaw posted info on <a href="http://www.meetup.com/WarsawJS/events/202280942/" target="_blank" rel="external">WarsawJS</a> on their Facebook page. I never heard about it before, so I got excited. Their first meetup was today so, right after work I went to <a href="http://panstwomiasto.pl/" target="_blank" rel="external">państwomiast</a> where it was held. I was a few minutes late, and the room was almost full so I sat in one of the last rows and saw only the upper half of the screen. So after 15 minutes of sponsors, thank-yous, and bravos, the first presentation rolled out.</p>
<!-- more:false -->
<h3 id="The-future-of-JavaScript-ES6"><a href="#The-future-of-JavaScript-ES6" class="headerlink" title="The future of JavaScript - ES6"></a>The future of JavaScript - ES6</h3><p>First off was Adam Babik with his talk about the new features in ECMAScript 6. ES6 is a broad subject, enough to talk for hours. No wonder Adam only mentioned the powerful class’ syntax, or the native promises, or modules. He focused more on generators and iterators, unfortunately he failed to clearly explain these new features, but he did supply some interesting links to <a href="http://davidwalsh.name/es6-generators/" target="_blank" rel="external">Kyle Simpson’s series of posts on generators</a>.</p>
<h3 id="Ember-for-Multi-Page-applications"><a href="#Ember-for-Multi-Page-applications" class="headerlink" title="Ember for Multi Page applications"></a>Ember for Multi Page applications</h3><p>Krzysztof Modras showed an unorthodox approach to Ember.js development. He proposed to use Ember in regular webapps living in the standard request-response, client-server cycle. Krzysztof explained that Ember isn’t as opinionated as some other frameworks, you’re not required to use all of its components, and you can use models, controllers and have the benefit of the testable approach promoted by Ember.</p>
<p>Too bad his presentation ended before I noticed it begun - after literally 5 minutes. I think he could have dived in a bit deeper.</p>
<h3 id="Commercial-OpenStreetMap-implementation"><a href="#Commercial-OpenStreetMap-implementation" class="headerlink" title="Commercial OpenStreetMap implementation"></a>Commercial OpenStreetMap implementation</h3><p>Marcin Cimaszewski had a very interesting talk on how he and his team implemented <a href="https://www.openstreetmap.org/about" target="_blank" rel="external">OpenStreetMap</a>. If you never implemented any maps on a high traffic website, map services like Google Maps or Bing Maps are expensive. That’s relative of course, and you may find it cost-effective, or not.</p>
<p>Marcin’s company found it to be <strong>not</strong>, so they wanted an alternative, and they went for OpenStreetMap, a self-hosted solution without any day-to-day cost or licensing fees. This poses some new and exciting challanges, like map tile caching and map accuracy.</p>
<p>I found his presentation to be the most interesting, even though it was more focused on the business aspect, not the developer side of the implementation.</p>
<h3 id="Our-first-Samsung-Smart-TV-app"><a href="#Our-first-Samsung-Smart-TV-app" class="headerlink" title="Our first Samsung Smart TV app"></a>Our first Samsung Smart TV app</h3><p>Piotr Kowalski showed how his company builds applications for Samsung’s Smart TVs, and what are the cool things you can do there, and what are the quirks of such development. This process is very different from regular web app development. TVs are not computers, there is no mouse/keyboard, there’s a remote controller, your processing power is limited, and don’t forget about fragmentation.</p>
<h3 id="Wrap-up"><a href="#Wrap-up" class="headerlink" title="Wrap up"></a>Wrap up</h3><p>All things considered, I had a feeling I was on one of the polish news portals - bloated with ads that scream, jump, and hide the close button as much as they can. I think you can make a meetup without promoting 5+ sponsors, as meet.js Warsaw, or <a href="/ng-poznan-4">ng-poznan</a> have shown. You don’t have to give every person in the room a free beer to force them to come to your conference :) These guys definitely should join forces with <a href="http://meetjs.pl" target="_blank" rel="external">meet.js</a>.</p>
</article>
<article id="post-ng-poznan-4" class="article-entry" itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h2><a href="/ng-poznan-4/">ng-poznan #4</a></h2>
<aside>
<div class="header-meta">
<time datetime="2014-09-12T14:00:00.000Z" itemprop="datePublished">September 12, 2014</time>
<!-- |
<a href="#" class="button button-xsmall">
<i class="fa fa-github"></i>
Edit on Github
</a> -->
</div>
<ul class="header-tags">
<li><a href="/tags/AngularJS/">AngularJS</a></li>
<li><a href="/tags/Conferences/">Conferences</a></li>
</ul>
</aside>
</header>
<p>So I’ve arrived in Poznań for the fourth <a href="http://www.meetup.com/ng-poznan-meetup/events/186497732/" target="_blank" rel="external">ng-poznan AngularJS meetup</a>. After grabbing a coffee in <a href="https://www.facebook.com/BigfootCoffeeShop" target="_blank" rel="external">Bigfoot Coffee Shop</a> I found my way to the venue - <a href="https://www.facebook.com/kunacicha" target="_blank" rel="external">Cicha Kuna</a>. I’ve arrived at 17:55 and found 50+ people there, so I took one of the last seats, right next to the bar. The meetup promptly started with a 15 minute slip.</p>
<p>The first talk was “Automation in the ng-world” by <a href="http://marcin-wosinek.github.io/blog/" target="_blank" rel="external">Marcin Wosinek</a>. Marcin talked about Karma, Grunt and Yeoman - all cool stuff to learn if you don’t know about them. Too bad all of this was really basic. I don’t know how to do unit tests to be honest. I tried numerous tutorials, and still can’t get the hang of it when it comes to writing <em>real code</em>, so I’m always hoping for someone to show me inside-out how to do it. Well, maybe next time. Marcin also mentioned another interesting product - <a href="http://www.sonarqube.org/" target="_blank" rel="external">SonarQube</a> - a <a href="https://en.wikipedia.org/wiki/Technical_debt" target="_blank" rel="external">technical debt</a> analyzer. I need to have closer look at that.</p>
<p>The second talk was by <a href="https://twitter.com/marsanla" target="_blank" rel="external">Marcos Sanz Latorre</a> from Spain. His team developed <a href="https://github.com/Elefrant/elefrant" target="_blank" rel="external">Elefrant</a> - a JS framework for building APIs. Marcos showed some really cool stuff. If you’re building something non-trivial, give it a look. The framework is specialized for APIs, so it’s certainly a valid alternative to building your API in Express or Django or Symfony.</p>
<p>Finally an anonymous guy (sorry friend, I didn’t catch your name) did his lightning talk about mocking websockets using <a href="https://github.com/UsabilityTools/websocket-mock" target="_blank" rel="external">websocket-mocks</a>. The service has the same interface as the Websocket API implemented in browsers, though it’s not unit tested… yet ;)</p>
<p>Finally the ng-poznan team drew (using <code>~~(Math.random()*110)</code> ;) ) one ticket for <a href="http://summit.meetjs.pl/2014/" target="_blank" rel="external">meet.js summit</a>. Thankfully, I already have my ticket. :)</p>
<p>Overall I’m happy with the meetup, the talks were quite interesting, though I would like to hear a bit more. I always enjoy visiting Poznań, so I’ll probably find myself there again, next month. </p>
</article>
<article id="post-about-me" class="article-entry" itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h2><a href="/about-me/">About me</a></h2>
<aside>
<div class="header-meta">
<time datetime="2014-08-27T00:00:00.000Z" itemprop="datePublished">August 27, 2014</time>
<!-- |
<a href="#" class="button button-xsmall">
<i class="fa fa-github"></i>
Edit on Github
</a> -->
</div>
<ul class="header-tags">
<li><a href="/tags/Meta/">Meta</a></li>
</ul>
</aside>
</header>
<p>Hi there!</p>
<p>My name is Jacek Dargiel. I’m a Front-end Developer from the ever exciting capital city of Poland. I work for <a href="http://biarchitects.co.uk" title="Business Intelligence Architects is an innovative IT company" target="_blank" rel="external">BI Architects</a> - a growing software house focused on web development in an agile fashion. I have two years of commercial FE Development experience, with some non-commercial projects earlier. <em>I will not pretend to be an expert in anything.</em> I do however <strong>love to learn and consume knowledge</strong>. I’m an enthusiast of shiny new technologies. Sometimes an evangelist even. I work with HTML5, CSS3, JS Web APIs, AngularJS etc.</p>
<p>This blog is my playground. You can read my thoughts on the technical aspects of the projects I work on at the moment, technologies I choose, and why. I hope some of this will come in handy to someone. If you like what you read here, please subscribe to my <a href="/atom.xml" title="The blog's Atom feed">feed</a> and share links with your friends and co-workers. All the content you’ll find here is licensed under a <a href="http://creativecommons.org/licenses/by-sa/4.0/" title="Creative Commons By - Share alike license" target="_blank" rel="external">Creative Commons license</a>. </p>
<p>Oh, and find me on Front-end conferences in Warsaw and around Poland.</p>
<p>Have a splendid day!</p>
</article>
</div>
<nav id="sidebar" class="">
<div id="info">
<div id="avatar">
<a href="/"><img src="/images/avatar.jpg" alt="Jacek Dargiel" class="pure-img"></a>
<div id="avatar-logo">
<a href="/"><img src="/images/logo.svg" alt="" class="pure-img"></a>
</div>
</div>
<p id="me"><a href="/">Jacek Dargiel</a></p>
<div id="about">
<p>Front-end developer @ <a href="http://biarchitects.co.uk">BI Architects</a></p>
<p>JavaScript & HTML5 engineer</p>
<p><a href="/about-me/">About me</a></p>
</div>
</div>
<footer>
<ul id="icons" class="clearfix">
<li>
<a class="icon rss" href="/atom.xml" title="The blogs Atom feed"></a>
</li>
<li>
<a class="icon github" href="https://github.com/jacek-dargiel" title="My GitHub profile"></a>
</li>
<li>
<a class="icon stack" href="http://stackoverflow.com/users/3707398/jacek-dargiel" title="My Stack Overflow profile"></a>
</li>
<li>
<a class="icon twitter" href="https://twitter.com/JacekDargiel" title="My Twitter"></a>
</li>
<li>
<a class="icon linkedin" href="http://linkedin.com/pub/jacek-dargiel/a2/1b1/84/" title="My LinkedIn profile"></a>
</li>
</ul>
<p><a href="http://creativecommons.org/licenses/by-sa/4.0/">Feel free to share</a>. Made with ❤</p>
<p id="powered">Powered by <a href="http://hexo.io/" title="A fast, simple & powerful blog framework, powered by Node.js."><img src="/images/hexo.svg" alt="">Hexo</a></p>
</footer>
</nav>
</div>
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-54898988-1');ga('send','pageview');
</script>
</body>
</html>