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