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

NDC London–Day 1

Day 1 at NDC London is over. Learned a lot about Angular.js and looking forward for the next day.

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

If you are interested, I added all my notes during the workshop. You’ll see that we learned a lot

Introduction

• More like MVVM & Silverlight building experience
• Very extensible framework
• Forward looking
  • Takes into account future evolutions in JavaScript & HTML

Getting started

• Use Nuget

• Multiple modules available
• Angular.core is the only one required
• Angular does not have any dependencies(!)
• 'ng-app' : bootstrap element

Other starting points

• Yeoman: does scaffolding(more designed for MAC, Linux)

• Angular-Seed: gives you an example of how to structure your app

https://github.com/angular/angular-seed

Ng-directives

• Default directive syntax is not HTML compliant
  • Will not pass through an Html validator
  • Alternative syntaxes available

Templates and Views

• Representation of the model
• Uses a combination of {{ }} and directives

Change detection

• Not done through observables but through snapshot change detection
  • Is a little more expensive than what Knockout etc… does
• In EcmaScript 6 this will be fixed, it will have an object.observe function

ng-cloak directive

• It's annoying to see the raw html before the template is applied
• To fix this, you can use the ng-cloak element in combination with a css rule

Browser support

• Angular officially supports IE8 and up
  • Most things should also work on IE6 and up

Expressions

• Uses a subset of JavaScript in {{ }}

ng-show

• Hides an element when the expression evaluates 'falsy'

Batarang

• Great chrome extension to simplify angular development

Modules

• Default module that we are using is the 'ng'-module
• Always a good idea to split up your application into modules
• Use 'angular.module'
• Specify the root module through ng-app=""

Controllers

• My first modularized controller:

Services

• Multiple ways to create services(at least 5 :-))
• Easiest way is through the factory
• Angular has its own IOC container
  • Makes it easy to mock dependencies
• By default every service is a singleton by default

Bootstrap phase

• 2 parts
  • config phase: app.configure()
  • Run phase: app.run()
• During the config phase NO services are available, but you can use serviceProviders
• During the run phase NO serviceProviders are available, but you can use services
• Example:

Injector

• The DI container that is used behind the scenes
• Be careful when using a minifier!
  • 2 ways to fix this:
    • One way is to use a minifier that knows angular
    • Another way is to use a specific annotation syntax
      • Specify all dependencies as a string array

• Or specify the $inject property --> Use this one, it's cleaner…

Code Organization

• Not everyone has the same opinion
• Most people use a different file per abstraction(e.g. Angular-Seed)
• Possible structure(folder per abstraction):
  • Apps
    • reportApp
    • adminApp
    • patientApp
    • common
      • common.js
      • custom directives
      • controllers
      • Services
• Alternative structure(folder per feature)
  • Apps
    • reportApp
      • search
        • SearchDirective.js
        • SearchController.js
      • saveReport
    • …

Core Angular API

• equals: does a 'deep' equal check on 2 objects
• copy: create a copy of the movie
• Has an embedded jqLite library(=20% of jQuery that you use all the time)

$scope inheritance

• Uses prototypical inheritance
• Use objects on your scope if you want to point multiple scopes to the same object

Digest loop

• To detect changes Angular goes through a digest loop
• After a change a second digest loop is triggered
• Be careful to not create an infinite loop of digest loop updates
  • Angular will throw an error after 10 $digest() iterations

$apply

• Don't call an $apply inside an $apply

$watch

• Allows you to listen for changes

Working with forms

• FormController can attach to named forms
• Angular understands HTML5 validation attributes

Filters

• Format and modify model data
• Filters can be piped together

ngInclude

• Includes other templates or views

Services

• Services can be anything in Angular
  • Doesn't have to be fancy objects
  • Anything that is not a filter, controller, directive
• Services are singletons
• There is a long list of built-in services

Annoyances

• Most typo's will not result in exceptions, makes it sometimes hard to find out why you don't see your data
• Strange way to resolve promises(should be fixed in AngularJs 1.2)
• Minification in combination with injector
• Angular only updates it's view when it thinks something has changed
  • It only knows this if something happens inside the angular context(otherwise Angular has no clue)
  • The so called '$digest loop'
    • You can trigger a digest by calling $scope.$apply();
• Beware of browser versions <IE 8

NDC London: Here we come!

Next week I will not be blogging about my day-to-day development problems. Instead I will share my experiences from NDC London.

Together with 11 other colleagues from Ordina, we will spend 6 days in London with the hope to go home a lot smarter, with new knowledge and maybe some new friends(and certainly a list of great pubs ).

Web Essentials Browser Link Integration

Last week I discovered a new feature of the Web Essentials:

When you start debugging your web application, you get an extra toolbar by hitting ctrl:

This toolbar gives you the following options:

• Design: Click on any element and edit its text directly in the browser, the results of the edit are reflected in source code
• Inspect: Click on any element to jump to the corresponding source code in Visual Studio
• Save F12 changes: Saves the changes that you did in the IE Developer tools back to the source code
• F12 auto-sync: Any change to CSS properties in the browser dev tools is reflected in your CSS files in Visual Studio
• Unused CSS detector: Audit your CSS selectors and see which ones don’t match anything in the page

All these features are based on the new Browser Link feature in Visual Studio 2013.

Enterprise Library 6 development guide

A few months after the release of Enterprise Library 6, Microsoft announced the second edition of the Enterprise Library development guide. The guide explains the concepts that drove development of the blocks, the kinds of tasks they can accomplish, and how they help you implement many well-known design patterns. And, it explains — by way of code extracts and sample programs — how you can actually use the blocks in your applications.

Download the free PDF version.

ADFS error: The Federation Service could not fulfill the token-issuance request.

After configuring an ASP.NET MVC application to use WIF and ADFS, authentication failed with the following error message:

The Federation Service could not fulfill the token-issuance request because the relying party 'https://localhost/ADFSSampleApp' is missing a WS-Federation Passive endpoint address.

Relying party: https://localhost/ADFSSampleApp

The problem was that I forgot to configure an endpoint address for the relying party configuration in ADFS. To do this, execute the following steps:

• Open the ADFS Management snap-in
• Go to the list of Relying Parties
• Click on the application you want to configure.
• Go to the properties and open the Endpoints tab
• Add the URL of your web app

That should fix the problem…

EmbeddedSTS

Since the release of Windows Identity Foundation, Microsoft always provided us with a development STS that was easy to setup and configure.

However with the release of Visual Studio 2013, the development STS(provided through the Identity and Access Control extension) is gone. A good alternative is the EmbeddedSTS provided by Thinktecture:

EmbeddedSts is intended to be used from an ASP.NET application that is using .NET 4.5 and the Federated Authentication Module (FAM) from WIF. It allows for a simple and easy to use STS instead of a production STS that might require installation and configuration. It does this by embedding itself a proper WS-Federation security token service within the application itself. When the ASP.NET application would normally redirect to the production STS, it will instead redirect to the EmbeddedSts. The EmbeddedSts will provide a list of users that can login and will then issue a SAML token back to the application that contains the selcted user's claims. This list of users and their associated claims is configurable in a JSON file (which can also be checked into your project, which is useful for testing).