making the switch to angular js
Post on 14-May-2015
1.724 Views
Preview:
DESCRIPTION
TRANSCRIPT
An Angular Directive for KeyLinesIssues faced when adapting an existing component as an Angular directive
What is Angular?
Angular.js is a lightweight framework for building rich single-page web applications without the complexity normally associated with them.
The framework is built and maintained by Google.
Some useful definitions…
Directive These are the logic & behavior for your UI. Think of directives as the layer between the DOM and the angular framework.
Scope The connector between the view and the application controller: in effect – the model in MVC / MVW (W=whatever).
WatcherA feature of Angular that allows Angular to respond to scope changes.
Why do people like Angular.js?
It’s comprehensivecomplete solution for rapid front-end development.
It’s like extended HTMLA declarative model that works for dynamic web apps.
Data binding is two-wayMVW without splitting your app = no need to write syncing code.
Testing is easierTest all of your components at once, not in isolation.
It’s very ‘now’…
So… How do I convert my existing component to an
Angular.js Directive?
Answer: It’s not straightforward
Thing with complex state
User Actions
Developer Actions
Events API
Before
This is how the current, non-Angular KeyLines works.
A user interacts with a component, raising events (e.g. a click) which calls the API, changing the state of the component.
Angular Directive
Parent Scope, Parent Controller (Angular Developer Actions)
Isolate Scope, Controller, Watchers
DOM interactions
Event Wrapping
Thing with complex state
User Actions
Developer Actions
Events API
After
This is how KeyLines works within Angular.
Angular Directive
Parent Scope, Parent Controller (Angular Developer Actions)
Isolate Scope, Controller, Watchers
DOM interactions
Event Wrapping
Thing with complex state
User Actions
Developer Actions
Events API
Needed to replicate API events in an
‘Angular way’
Be mindful of the scopes – nested in a prototypal
chain
We isolate the scope to maintain granular
control of which parts of the directive are
exposed
After
Note: it’s a lot more complicated
Questions to consider…
How to initialize state in the directiveHint: Look at $scope.state
How to expose state within isolate scopeinvolves duplicating existing JS API events within
How to wrap an existing JavaScript APIThis involves duplicating existing JS API events within Angular
More questions to consider…
How to deal with direct calls to the JS APIThe best way we found is to expose small parts of the existing API.
How to watch for scope changesUsing the $watch, or $watchCollection for changes in a collection.
Challenges
Understanding scope‘Scope’ is a fairly abstract concept. Nested scopes are even more so.
Angular naming conventionsSome naming conventions are best practice. Others must be followed otherwise your code won’t work – e.g. name-with-dashes for attributes, camelCase for corresponding directive names.
Debugging generallyYour favourite app debugging tools won’t work with Angular. Sorry.
More challenges
State management‘Duplication between your internal component and directive is inevitable without completely rebuilding your application.
Future supportAngular is still new, we don’t know where future versions will take us or how it will develop long term.
Inconsistent adviceAsk two Angular developers for advice, you’ll most likely get two different views. For newcomers to Angular, unclear direction is worrying.
And after all that…
Here’s a sample of the KeyLines Angular Directive
<kl-chart width='744'
height='430'
kl-base-path='/lib/keylines/'
kl-click='onClick(id,x,y)'
kl-ready='ready(chart)'
kl-selected='selected'
kl-options='options'>
</kl-chart>
Functions on parent scope
Attributes on parent scope
Thanks! We hope it helped…
@key_linesKeyLines.com/contact
top related