Welcome to Part 2 of this review of the Pluralsight course
Angular JS: Get Started by 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: Controller
Part 3: Views and Directives
Part 4: Services
Part 5: Routing

Angular JS Controllers

Controller Basics

The job of a controller is to control the information we put onto our web page, or save the information the user enters into our web page.

Angular controllers use the ng-controller directive and we see how to declare a controller called “MainController” in HTML.

Scott explains that controllers take $scope parameters.

In Plunker, Scott demonstrates creating a controller and assigns a message value to $scope.message inside the function. We use the data binding expression {{message}} in our HTML for rendering this message.

As of Angular JS v1.3, it will not look in the global scope for controllers. For more information see StackOverflow.

The Capabilities

Scott says compared to jQuery we write a lot less code which is also better factored. He explains the following capabilities which Angular JS powers controller with:

• Ability to have multiple controllers on the same page
• Complex objects (e.g. Stock object)
• Nest controllers inside of each other (an advanced technique)

We see an example of using a controller with a person model to create a biography page.

Although this appears to work, in the console we see some 404 errors. Scott explains why and introduces us to the ng-source directive.

We also see something which in my opinion is one of the downsides of Angular JS: instead of failing explicitly when there is a typo in a binding expression, it fails silently and keeps everything else running.

Calling HTTP

Angular has a $http service and this encapsulates HTTP communication.

We see an example of using $http inside of an HTTP controller.

This service gives us access to methods such as .get, .post and .delete for communicating with a web server.

Scott warns that all communication is asynchronous, so we won’t fetch our data immediately. $http uses a promise, and this basically means it promises to return a result in the future (promises are also sometimes known as futures for this reason).

ES6 has a native implementation of the promise design pattern. For more information see Exploring ES6 chapter 25

Using $http

In this lesson Scott uses the GitHub API as a source of data.

We learn that the $http service automatically converts JSON responses into JavaScript objects for us.

We do a GET request to access https://api.github.com/users/robconery and see how to handle both successful and unsuccessful response messages.

Controllers and Modules

In the Introductory module we saw an example that won’t work by default in Angular v1.3+ because it’s a poor practice that the Angular team wanted to dissuade you from using.

A better approach is to use modules. Angular has it’s own module system, this is slightly different to the revealing module pattern we saw earlier, and as of ES6 JavaScript has its own module system that it also slightly different.

However they all have the same basic idea which is isolating an area of code away from global access.

Scott introduces how we work with modules in Angular and this is essential three simple steps:

1. Create a module with a name
2. Register your controllers in the module
3. Tell Angular to use our module with ng-app

Creating a Module

Scott tries to isolate code with an IIFE but we see this doesn’t work well with Angular JS: we get errors and our app no longer functions 😦

Fortunately this is easy to get working by creating a module, and here we create one called “githubViewer”.

Scott explains that most production apps use minification, and we need to be careful that use of minification does not break our app. One technique that we see is supplying parameter names that we require to the angular controller.

Continue to Part 3 – Directives and Views