Tuesday, December 3, 2013

NDC London–Day 2

Yes, we survived day 2 of NDC London. With our heads filled with AngularJs, SignalR and Web API knowledge we spent the evening shopping in the Westfield mall after enjoying a delicious meal at one of Jamie Oliver’s Italian restaurant.  I’m still digesting the great food and all the new things we learned. 

You can find my sample code here: https://github.com/wullemsb/NDC-London---Angular-Day-2

And here are my notes of day 2 of the workshop.

Overriding Services

  • You can overwrite any service bij creating a new factory registration
  • Last registration wins…

Decorating Services

  • Add pre- and post processing logic
  • Use $provide.decorator()

Service Providers

  • Different way to create services(there are multiple, remember)
  • Use $provide
  • Configure the service during the configuration phase(2 phases as you should know; configuration and run phase)

Service Constants

  • Inject primitives as a service

Service Values

  • Similar to Constants, can also inject a value
  • The only difference is that constants are available in the config phase, values are only available during the run phase

Service factories

  • Another way to create a service and service provider

Service operator

  • Another(yes indeed) way to create a service and provider
  • Difference is that with a service you need to attach the service to the this object
  • Scott says "don't use it"

HTTP Interceptors

  • Request and response interceptors

HTTP Transforms

  • Transform the request and response itself

Resources

  • Gives you a very simple GET,PUT, POST, DELETE interface to your Web API

Extending HTML

  • Give you custom HTML elements through the use of directives
  • Most directives work in multiple ways
    • As an element <accordion>
    • As an attribute <div accordion>
    • As a class <div class=accordion> --> Avoid this one, it's confusing to find out if its a CSS class or directive

Event Directives

  • Multiple events are available out-of-the-box

Custom Directives

  • Build your own directives through a Directive Definition Object
  • Can become quit complex
  • With the restrict option you can specify how the directive can be used(as an element,…)

clip_image001

  • Note that you should call it as otc-greeting

clip_image002

  • Transclude option
    • Take the content from your custom directive and merge it with the template
  • Scope option
    • Allows you to create an isolated scope(by default the scope of the parent controller is used)
      • Useful for re-usable widgets
    • You can also create a new inherited scope
  • Compile function
    • Is called once for every directive
    • Can be used to manipulate the template
    • Most of the time you don't need this
  • Link function
    • Is called

Angular.element

  • Uses jQuery Lite; "the 20% jQuery you used all the time"

Testing

  • One of the core concepts of Angular is that it should be testable
  • Helps avoid global state and singletons through dependency injection
  • Helps separation of concerns by splitting out responsabilities over controllers, templates, services, etc…
  • Framework options
    • Qunit
    • Jasmine
    • Mocha
  • Test runner options
    • Karma
    • Grunt
    • Chutzpah

Mocking

  • Through angular-mock.js(part of the NuGet package)
  • Use $httpBackend to test HTTP interaction

Routing

  • Very important part of Angular
  • Use ngView
  • RouteProvider used during configuration phase
  • Is available as a separate NuGet package
  • Include the module

clip_image003

  • Multiple Routing Events are available
  • You can also use HTML 5 routing if you don't like the # sign in your URL's

ngAnimate

  • Separate module(angular-animate.js)
  • Supports CSS transitions and animations
  • Contains a list of built in animations

UI Bootstrap

clip_image004

Annoyances(again) :-(

  • Kind of confusing combination of service constants and service values
  • Custom directives can be quit complex
    • Especially if you start to play with the scope

No comments: