Angular 2 CLI

Rick HerrmannOne of the good things about Angular 1 was that it was easy to add the AngularJS library to your application and start using it without a lot of setup ceremony.  Add a <script> tag to pull in angular.js, stick an ng-app attribute on the body or html tag, and you were ready to go.  Of course, in a more complex application you would end up using additional libraries and probably setup a build process, but the barrier to getting started was low.

With Angular 2, getting started from scratch is not nearly as simple.  While there are multiple “starter-packs” that have been created to help with generating a ready-to-go project, the thing that has most caught my attention is the Angular CLI (command-line-interface).  Although the Angular CLI has not been officially released (it is in beta as of this writing), it already has a number of features that not only get you up and running quickly, they also help with adding other pieces of your application as it is developed.

Continue reading “Angular 2 CLI”

Angular 2 TemplateRef Usage

Mike BerrymanAngular 2 is the hot new thing, but like any other new technology out there, documentation and examples are really sparse and there’s a lot of head scratching trying to figure out why things that seem like they should work…aren’t.

I spent some time recently working with TemplateRefs in Angular 2, trying to access templates defined via a <template> tag in my HTML from the component code.

Continue reading “Angular 2 TemplateRef Usage”

Angular JS Routing Interception and Redirection Failure

Mike BerrymanRecently I had built an Angular JS application that would prompt the user for some information in a popup whenever they tried to navigate to a specific route, before that route’s page actually shows to the user.  If the user provided some invalid data or they cancelled/closed the popup I needed the app to either a) take the user back to the route they were on or b) redirect to the home page of the app if they weren’t coming from a route within the app.

Continue reading “Angular JS Routing Interception and Redirection Failure”

Testing Angular Services

Rick HerrmannUntil recently, the front-end testing I’d done had not directly tested any Angular services. In almost every case, the $http calls in the services were just returning data from an API back to a controller. However, on a recent project I had a scenario where the data from the API had to have some filtering and permission logic applied before passing on the data. This was a case where unit testing the service made sense.

As it turns out, testing a service is very similar to testing a controller in terms of setting up the test, injecting dependencies, and making assertions. The only real difference is the need to mock the $http call in the service. To do this the angular-mocks library provides the $httpBackend tool. Let’s walk through an example of testing a service.

Continue reading “Testing Angular Services”

Mocking Time with sinon.js

Rick HerrmannI was writing some tests for an Angular app and ran into a scenario where I needed a page to behave differently if the time of day was before or after 6AM.  The logic is simple enough to capture in my controller:

vm.date = moment().subtract(6, 'hours').toDate();

Basically, if it is before 6AM, display the prior day, otherwise display today. However, as I was trying to write a test for this controller the problem came up: how do I take control of the current time to test both scenarios?

Continue reading “Mocking Time with sinon.js”