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,…)

• Note that you should call it as otc-greeting

• 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

• 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

• Combine Angular with Bootstrap
• Nice thing is that the dependency on jQuery got removed
• Available at http://angular-ui.github.io/bootstrap/

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