25 July 2014

Free sample chapter "Testing and Debugging AngularJS Applications" from my recently launched book "Learning AngularJS for .NET developers"

  My book Learning AngularJS for .NET Developers (announced here) was published today and it offers a free chapter called "Testing and Debugging AngularJS Applications" available here.
  This chapter showcases some of the first examples available of integrating Karma and Protractor test runners for AngularJS in Visual Studio through Node.js Tools for Visual Studio.
  Karma and Protractor are test runners that were built specifically for testing AngularJS applications. Both can be also be used to test non-AngularJS applications while they have AngularJS specific functionality that is explored in the chapter.
  Getting Karma and Protractor configured in Visual Studio was the essential step that allowed me to properly introduce AngularJS testing for the main sample application of the book. By using Node.js Tools for Visual Studio available at nodejstools.codeplex.com I was able to integrate the Node.js testing pipeline with the JavaScript files of my sample AngularJS ASP.NET MVC application. Of course all the tests can also be executed via the command line even if you don't have Node.js Tools for Visual Studio installed. 
  I was also able to use a Visual Studio extension VS Adapter for Google's Karma Test Runner that displayed Karma tests results in the Visual Studio Test Explorer which is another nice integration with the Node.js ecosystem.

  The second part of the chapter tackles testing ServiceStack web services via the xBehave.net test framework  and examples of unit testing classes using both xUnit.net and xBehave.net. As xBehave.net is built on top of xUnit.net you can switch between different styles of testing easily as showcased in the examples.

 The chapter ends with the topics of debugging AngularJS application and ensuring Internet Explorer 8 and 9 compatibility. The examples index for "Chapter 5: Testing and Debugging AngularJS Applications" can be found on the main sample application repository wiki at github.com/popalexandruvasile/rentthatbike/wiki.

You can find the list of headings for the free sample chapter below under "Chapter 5: Testing and Debugging AngularJS Applications". Here is the full table of contents of the book:

Chapter 1: Introducing AngularJS

  • Presenting AngularJS with examples
    • A jQuery example
    • An AngularJS example
    • Introducing the AngularJS controller
    • An overview of the AngularJS architecture
    • The Model-View-Controller pattern
    • The structure of an AngularJS application
      • Bootstrapping an AngularJS application
      • Defining module dependencies
  • The JavaScript patterns and practices used in AngularJS applications
    • Immediately-invoked Function Expression
    • The revealing module pattern
    • The strict mode of JavaScript
  • Dependency injection
  • Introducing AngularJS services
  • Directives
    • The ngRepeat directive
    • The ngInclude directive
    • Creating a custom directive
  • Filters
  • Summary

Chapter 2: Creating an AngularJS Client-side Application in Visual Studio

  • Using Visual Studio with NuGet to manage AngularJS and related libraries
    • Introducing NuGet
    • Using Visual Studio extensions for AngularJS
  • Prototyping client-side components
  • Organizing client-side code
  • Integrating AngularJS with JavaScript libraries
    • Native JavaScript libraries and AngularJS
    • Third-party user interface libraries and AngularJS
  • Routing
  • Creating a bicycle rental management application
    • Creating the application layout
    • Implementing the Bicycles views
      • The Bicycles index view
      • The Bicycles new view
      • The Bicycles edit view
    • Implementing the Customers views
    • Implementing the Rentals views
  • Summary

Chapter 3: Creating .NET Web Services for AngularJS

  • RESTful web services
  • Choosing a RESTful web services framework
  • Why ServiceStack is a great fit for AngularJS
  • ServiceStack overview
    • Setting up the ServiceStack starter project
    • Creating ServiceStack web services
    • Using the ServiceStack C# client
    • The ServiceStack infrastructure
      • Routing
      • Request and response filters
      • Dependency injection
      • Automatic validation
  • Creating web service methods for the sample application
    • ServiceStack project structure
    • Implementing Bicycles-related web services
      • The GET web service methods
      • The POST web service method
      • The PUT web service method
      • Merging PUT and POST request DTOs
  • Calling RESTful web services in AngularJS using the ngResource module
    • Using the $resource service
    • Resource class methods
    • Resource instance methods
    • Custom resource methods
  • Summary

Chapter 4: Creating an AngularJS, ASP.NET MVC, ServiceStack Application

  • Using ASP.NET MVC as the application backbone
    • Why you should use ASP.NET MVC
    • Adding ASP.NET MVC to the main sample application
    • Integrating ASP.NET MVC with ServiceStack
    • Routing considerations for ASP.NET MVC and AngularJS
    • Using ASP.NET bundling and minification features for AngularJS files
  • Securing the AngularJS application
    • Using the ServiceStack.Mvc library
    • The building blocks of the ServiceStack security infrastructure
    • Introducing the AuthFeature plugin
    • Implementing authentication for web services
    • Implementing authentication for ASP.NET MVC controllers
  • Pushing initial data from the server-side application to the AngularJS application
  • How to ensure that AngularJS works well with the backend
    • Handling the waiting time for long operations
    • Handling exceptions and implementing generic animations
      • Adding a $http interceptor
      • Implementing spinner animations for all web service calls
  • Adding database persistence
    • Adding database persistence to the AuthFeature plugin
    • Adding database persistence for web services
    • Persisting the Bicycle class
    • Changing BicycleRepository to use the OrmLite API
  • Summary

Chapter 5: Testing and Debugging AngularJS Applications

  • Overview of testing AngularJS applications
    • Introducing Node.js
    • Setting up the Node.js environment
  • Unit testing AngularJS components
    • Installing Karma
    • Configuring Karma
    • Creating AngularJS unit tests with Jasmine
      • Jasmine essentials
      • Using the ngMock module for the first test
      • Mocking remote server calls with $httpBackend
  • Testing an AngularJS application end to end
    • Installing Protractor
    • Configuring Protractor
    • Writing Protractor tests
  • Testing web service endpoints
    • Configuring self-hosted ServiceStack web services
    • Adding BDD tests with xBehave.net
  • Unit testing .NET code
  • Techniques to debug AngularJS applications
  • Support for HTML5 validation and older browsers such as Internet Explorer 8 and 9
  • Summary

Chapter 6: Advanced AngularJS Topics

  • Internationalization and localization
    • Using the ngLocale module
    • Using the angular-dynamic-locale module
    • Other internationalization-related topics
  • Using AngularJS animations
  • Working with remote web services
    • Using JSONP
    • Using CORS
  • Template caching
  • Summary


kdanylo said...

Hi Alex,
I am reading your book and like it so far. I got a problem though - provided examples 12 and 13 that use ng-include directive don't work. Any chance you know why?

Thank you.

kdanylo said...

I played a little with these examples (12 and 13). They work with VS built-in web server. They didn't work with Node's http-server module. I guess my Node configuration is off.


Etienne Bley said...

You are awesome. I have a suggestion (2nd paragraph). I loved the way you wrote the book. I read another one first so that when I got to his one - I could just get it done. I wasn't goign to use .net because it is so complicated. Ironically you ADDED to the complicatedness (Service Stack) and then made it VERY UNDERSTANDABLE. Your RentThatBike code is now my boilerplate.

I have started your other chapter that you forgot (lol) called "Publishing this whole mess onto a real website - without ripping your hair out".

Basically I was publishing it on a non-root so the nuances of that plus just plain publishing on IIS was a pain. Please feel free to plagiarize it and include it in your next edition. I HOPE AND REALLY HOPE you do a AngularJS 2.0 edition. I really like your writing style of "what is going on, try this, now lets use it, see it works".

Comment on the article below if it has errors and feel free to use it. You really helped me out more than you will ever know.


Alexandru Vasile Pop said...

Hi Danylo,
If you find any problem with the examples please feel free to open an issue on GitHub for it and I will investigate it further.

Alexandru Vasile Pop said...

Thanks Etienne for your post. I hope I will be able to look into it soon.
Regarding AngularJS 2.0 they need to release at least a beta version first and my publisher needs to be interested in a second edition.
The second edition should have at least one additional section on ASP.NET vNext and ideally one on NancyFX but this implies a lot of work :) . Potentially the size of the book would be at least double if not bigger(which might leave space for additional authors).