Blog

Writing better AngularJS promises

$q

I think that AngularJS promises are pretty easy to pick up… the documentation for $q is pretty good.

However, a lot of AngurlarJS beginners write promises like they see in the documentation. Here is some script that I wrote that uses Restangular to call a search API and return the results:

angular.module('myApp.search.service', ['restangular'])
.factory('SearchService', ['$q', 'Restangular',
    function ($q, restangular) {

        function mapEntity(entity) {
            // snip
        }
        
        var service = {
            search: function (term) {
                var deferred = $q.defer();

                restangular
                    .all("search")
                    .getList({ term: term })
                    .then(function (searchResults) {
                        var mappedResults = searchResults.map(mapEntity);
                        deferred.resolve(mappedResults);
                    });

                return deferred.promise;
            }
        };

        return service;
    }]);

Read more »

Using Protractor mocks for AngurlarJS tests without backend (pt. 2)

This is part 2 of a 3 part series: part 1, part 3

The Application

Before we look at the Protractor mocks, let’s have a look at the sample application we’re going to test:

  1. Clone my sample application at GitHub
  2. Open the solution In Visual Studio 2013 and press F5 to run the application.
  3. Once the web page appears, type w7 and click the search button. You should see a couple of restaurants listed:
    List of restaurants
  4. Change the search term to xxx and click the search button again. You should now see a “not found” message:
    Not found

Read more »

Using Protractor mocks for AngurlarJS tests without backend (pt. 1)

This is part 1 of a 3 part series: part 2, part 3

Protractor is now the recommended tool to test AngularJS applications in end-to-end scenarios.

If you go to the documentation for an AngularJS directive and you scroll down to the examples section, you will see a file called protractor.js showing you how to test the directive with Protractor. Here’s an example for ngRepeat.

You might say, “I can write unit tests in Jasmine that test my controllers, services, directives. Why do I want to write Protractor tests?”

Read more »

AngularJS animations + Animate.css = easier animations

Scenario

I’ve been working on a small web page recently (my online CV).

There is one section of the page where I use AngularJS. There are multiple checkboxes in this section and a message that changes depending on how many checkboxes are selected.

The markup for the message looks like this:

<ng-switch on="selectedCount">
    <div class="message" ng-switch-when="6">"Call me, call me any, anytime"</div>
    <div class="message" ng-switch-when="5">I'm tracing your IP address to locate your office.</div>
    <div class="message" ng-switch-when="4">You guys are awesome!</div>
    <div class="message" ng-switch-when="3">Sounds good - I'm in!</div>
    <div class="message" ng-switch-when="2">Interesting... tell me more.</div>
    <div class="message" ng-switch-when="1">OK... anything else?</div>
    <div class="message" ng-switch-when="0">&nbsp;</div>
</ng-switch>

I wanted an animation on text change to focus the user’s attention on the message.

AngularJS added native support for animations in version 1.2. I thought, “This should be easy.”

Read more »

Setting up Visual Studio Online Continuous Deployment

This is a followup post to Free source control, free continuous deployment, free hosting - oh my!

In this post I’m going to step you through Setting up Visual Studio Online Continuous Deployment.

Here’s how we’re going to accomplish that:

  1. Create a Visual Studio Online account
  2. Create a new project in that account
  3. Connect Visual Studio to the project
  4. Create a new web application
  5. Create an Azure web site
  6. Link Visual Studio Online to the web site
  7. Commit changes to your web site

Ready to go? Then grab your keyboard…

Read more »

Free source control, free continuous deployment, free hosting - oh my!

Scenario

You want to bang up a quick website and have it available on the web. Maybe its a demo, prototype… whatever.

Shameless plug: In my case I’m searching for a new job and I wanted to post my CV as a website.

Like any good software engineer, you instantly start thinking about the technology you’re going to use rather that the content you’re going to write… Just kidding, why aren’t you laughing?

  • Where are you going to host your site?
  • How are you going to build and deploy your site?
  • Where are you going to store the source code for the site?

The answer is just three words: Free, Easy, Azure.

Read more »

Deploying application and OWIN authorization server on separate machines

Scenario

Say you’ve created a web application with the single page application template in Visual Studio 2013. This template creates an authorization service that issues access tokens to secure the API.

Suppose you want to separate out the authorization service from the application. You might want to do this if you’re going to create another web application and you want both web applications to use the same authorization service.

two applications sharing same authentication system

Read more »