Angular JS Services

Welcome to Part 4 of this review of the Pluralsight course
Angular JS: Get Started by Scott Allen.scott-allen

Scott has over 25 years of commercial software development experience across a wide range of technologies. He has successfully delivered software products for embedded, Windows, and web platforms.

To learn more about him, see my career strategies interview with him and other successful developers on Outlier Developer.

Angular JS: Get Started is the first course in the Angular JS Learning Path.

Also in this series:

Part 1: Introduction
Part 2: Controllers
Part 3: Views and Directives
Part 4: Services
Part 5: Routing

Angular JS Services

The aim of this module is to give you a quick overview of Services in Angular JS. If you need a more in depth guide, see the Creating and Using Angular JS Services of the Angular JS Fundamentals course.

The Venn of Services

We’ve seen and used the $http service earlier on in this course. We’ve also seen the $scope service, and have had a module on directives.

Directives serve as an intermediary between the model and the view and helps them to work together.

Scott describes Services as a grab bag where everything goes which doesn’t fit in a model, view or directive.

Services can be used be either controllers, models or directives.

In this module we look at the timeout and interval services.

Gamification

To make our app more interesting, we’ll be adding a countdown.

The user will have 5 seconds to search, and if the timer reaches zero it will automatically search for whatever is in the textbox at that moment.

Firstly, we initialize a countdown variable to the value 5. We then see how to decrement it once a second.

JavaScript has two native functions setTimeout and setInterval which Scott explains.

Angular provides services that wrap each of these: $timeout and $interval. Scott says these are much easier to unit test than the native functions, and are optimized for the Angular two-way data binding system.

We see how to use the $interval service in this lesson, and how to resolve the error

TypeError: undefined is not a function

Scott explains that we need to remember to include $interval as a parameter in our controller declaration.

Service Roles

Scott explains that Angular Services help keep the logic inside our controllers simple and easily testable.

Using $log

Scott says the log service is useful for debugging and diagnostics whenever we run into trouble with Angular.

It has the following methods on it:

  • warn
  • info
  • error
  • log
  • debug

We see a demonstration of using this.

UI Services

Scott says we generally want to keep Services away from directly interacting with UI pieces, but there are some exceptions.

As an example if we need to read or write the location in the browser’s address bar, we may want $location to talk directly to our view because it presents a simplified API for the component.

In this lesson we use two services: $location and $anchorScroll

Custom Services

Scott describes three reasons why we might want to create our own custom service:

  • Create reusable logic
  • Create shared data
  • Manage complexity

A GitHub Service

We revisit the revealing module pattern here as well as the $http.get method.

Scott explains a bit more about promises in Angular and how we can use them to simplify our main script.js file.

He warns that there’s about 24 different ways to register and configure a service with Angular, and recommends the simple approach of using the factory method on our angular module.

One particularly useful service is the routing service. We look at this in the final module of this course.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s