Making the switch to angular js

Making the switch to angular js

• 1.
  An Angular Directivefor KeyLines Issues faced when adapting an existing component as an Angular directive
• 2.
  What is Angular? Angular.jsis 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.
• 3.
  Some useful definitions… Directive Theseare 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). Watcher A feature of Angular that allows Angular to respond to scope changes.
• 4.
  Why do peoplelike Angular.js? It’s comprehensive complete solution for rapid front-end development. It’s like extended HTML A declarative model that works for dynamic web apps. Data binding is two-way MVW without splitting your app = no need to write syncing code. Testing is easier Test all of your components at once, not in isolation. It’s very ‘now’…
• 5.
  So… How doI convert my existing component to an Angular.js Directive? Answer: It’s not straightforward
• 6.
  Thing with complexstate 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.
• 7.
  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.
• 8.
  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
• 9.
  Questions to consider… Howto initialize state in the directive Hint: Look at $scope.state How to expose state within isolate scope involves duplicating existing JS API events within How to wrap an existing JavaScript API This involves duplicating existing JS API events within Angular
• 10.
  More questions toconsider… How to deal with direct calls to the JS API The best way we found is to expose small parts of the existing API. How to watch for scope changes Using the $watch, or $watchCollection for changes in a collection.
• 11.
  Challenges Understanding scope ‘Scope’ isa fairly abstract concept. Nested scopes are even more so. Angular naming conventions Some 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 generally Your favourite app debugging tools won’t work with Angular. Sorry.
• 12.
  More challenges State management ‘Duplicationbetween your internal component and directive is inevitable without completely rebuilding your application. Future support Angular is still new, we don’t know where future versions will take us or how it will develop long term. Inconsistent advice Ask two Angular developers for advice, you’ll most likely get two different views. For newcomers to Angular, unclear direction is worrying.
• 13.
  And after allthat… 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
• 14.
  Thanks! We hopeit helped… @key_lines KeyLines.com/contact