Welcome to this Part 2 of this review of the Pluralsight course Angular JS Fundamentals by Joe Eames and Jim Cooper. This module is presented by Joe Eames.

Joe has worked both full and part time as a technical teacher for over ten years.

He is a frequent blogger and speaker, organizer of ng-conf, the AngularJS conference, and a panelist on the JavaScript Jabber podcast.

Angular Controllers & Markup

Angular v1.5 introduced Components, and Scott Allen says components are the best way to program with Angular. I am currently watching Building Components with Angular 1.5 course, so that I will be able to point out any demos which may not be the best way to program anymore.

Introduction

The code from this course is available at https://github.com/joeeames/AngularFundamentalsFiles.

In this lesson Joe opens up the code in WebStorm and talks us through it.

The app uses Bootstrap 2 but if you want to learn the latest version check out my Bootstrap 3 review.

At the end of this lesson we see the answers to this quiz:

• Can modules depend on other modules?
• Should a small application use multiple modules?
• Does Pluralsight have a course on Twitter Bootstrap that you should watch?

Demo: Creating the Node Server

In this lesson we install Express JS. If you’ve downloaded the starter project just type npm install

To install manually type:

npm install express@4.13.0 body-parser@1.13.1

Jim shows us how to write a simple web server in Express JS, and how to run it. We see the Angular JS logo displayed in our web browser.

For further information on Node JS and Express see Building Web Applications with Node JS and Express by Jonathan Mills.

Demo: Creating the ASP.NET Server

No coding required in this demo. Joe shows us how to setup a basic website in IIS.

Angular Controllers & Scope

If you’ve seen my review of Scott Allen’s Angular JS: Get Started course, or watched it yourself, you’ll already know that Controllers are heavily related with scope.

Joe explains that a controller’s primary responsibility is to create a scope object, and the scope object is how we communicate with the view.

The Quiz asks:

• What is the primary responsibility of the controller?
• Is the scope the model?
• Can the view bind to functions on the scope?

Demo: Controllers

Joe creates a EventDetails.html page for showing the detailed information of a single event. This includes script tags for

• jquery
• underscore
• bootstrap
• angular.js
• app.js

Next up is EventController.js, and we create an event object on the scope. The event object has properties for name, date and time.

We hardcode the values here and add the binding expressions in the HTML.

To make it look better we add a navigation bar, and styling to our  event information.

We also extend our event object to include location information, and display the address for the event onscreen.

Finally we add an image URL to show the Angular logo onscreen.

Demo: Displaying Repeating Information

We extend the event object to include an array of sessions.

Each session has properties for:

• name
• creatorName
• duration
• level
• abstract

Demo Handling Events

We add an upVoteCount property to each event session.

The in the HTML we add a votingWidget with the ability of voting a session up or down.

The Quiz questions are:

• Can you use basic JavaScript objects as your model in Angular?
• What is the markup indicator for binding data to a view?
• Which directive do you use to bind an image’s src?

Built-in Directives

We’ve already used a few built-in directives. Directives give HTML new functionality.

Angular parses our HTML and identifies any specified directives.

There are four ways to specify directives in Angular:

1. As a tag
2. As an attribute of a tag
3. As a CSS class
4. Inside of an HTML comment

Not all directives can be specified in all four of these ways, so check the official documentation for details.

The quiz questions are:

• In how many ways can an angular directive be written?
• Can all directives be written all four ways?
• Can Angular dig down into your model?

Event Directives

There are nine such directives in Angular:

• ngClick (this is deprecated as of v1.5)
• ngDblClick
• ngMousedown
• ngMouseenter
• ngMouseleave
• ngMousemove
• ngMouseover
• ngMouseup
• ngChange

We see an example of using ngChange.

The two quiz questions are:

• True or False: The ngChange directove requires the ngModel directive to also be present.
• True or False: Angular includes a ngRightMouseClick directive

Other Directives – Part 1

• ngApp
• ngBind
• ngBindTemplate (like ngBind but we can bind to multiple items)
• ngBindHtml
• ngBindHtmlUnsafe (no longer part of Angular)
• ngHide
• ngShow
• ngCloak
• ngStyle
• ngClass
• ngClassEven
• ngClassOdd

This last one is gone from Angular and Joe says it’s been deprecated.

See StackOverflow for how to replicate this functionality if you really need it, but be aware of the risks as well.

We see demonstrations that showcase all of these directives.

We conclude this lesson with this quiz:

• What is the purpose of the ngCloak directive?
• True or False: ngBind supports multiple bindings?
• The ngClass directive has two companion directives. What are they?

Other Directives – Part 2

These directives deal with funny parts of the HTML spec which often work differently in different browsers:

• ngChecked
• ngDisabled
• ngMultiple (support removed as of v1.2)
• ngReadonly
• ngSelected
• ngForm
• ngSubmit
• ngHref
• ngSrc
• ngNonBindable

Joe demonstrates most of these and then asks us these quiz questions:

• What does ngForm allow us to do?
• Which directive delays fetching an image until after binding has occurred?
• Why do we need the ngDisabled directive?

IE Restrictions with Angular

Joe says “older versions of IE” so it’s not clear what that means today. He lists two hoops that need to be jumped to get the dinosaur playing nicely with Angular JS.

The quiz questions are:

• What do you need to do to support older versions of IE with Angular?
• What are the three ways that directives can be written?

Expressions

Earlier in this course we’ve seen some examples of expressions in {{ double curly braces }}

We can also do calculations in these expressions such as {{ amount * 100 }}

Joe demonstrates arithmetic, string concatenation, and accessing a single element in an array. We see that we can’t use built-in JavaScript objects such as Math.

Filters

Filters are for modifying an output. Some uses are formatting, sorting datasets and filtering datasets. We use filters with syntax of this structure:

{{ expression | filter }}

Built-in Filters

Some example of filters are:

• currency
• date
• filter
• json
• limitTo
• lowercase
• uppercase
• number
• orderBy

See the filter page of the official documentation for the index, or click on a specify link above.

Joe demonstrates how to use each of these filters in this lesson. The questions are:

• How do you indicate a parameter to a filter?
• Can you limit to only search in a specific field?
• Can you specify custom date formats with the date filter?

Writing Custom Filters

Joe says writing custom filters is easy. We declare a new filter with module.filter supplying the name of the filter, and a function describing the filter.

Joe shows us how to create a filter than takes an integer instead of a string to describe the duration of an event session.

Two Way Binding

The ng-model directive works with three types of HTML elements:

• input
• select
• textarea

Joe shows some examples of using ng-model here.

Demo: Two Way Binding

Joe creates an Edit Event button and puts it on the navigation bar. Clicking this takes us to a new page. When this is finished, we will be able to create new events and edit the event details of existing events.

Joe shows us that the Save and Cancel buttons do not do anything yet, and how to add the click handlers.

He says two-way binding is one of the most beautiful parts of Angular because it can save us a lot of coding.

Quiz:

• True or False: Two way Binding will update on every key stroke?
• Which HTML elements work with Two way binding?
• What will happen if you reference a property that doesn’t exist in a ngModel directive?

Validation

Joe says we only cover the basics of validation here because it’s a big topic.

We look at the following types of validation:

• required attribute
• ngPattern directive
• Form properties
• CSS classes

As part of the demonstration, we disable the save button with the ng-disabled directive, unless the form is valid.

We also code it to set the background of the event date text box to pink when an invalid date is entered, and back to white again when the date is valid.

The Quiz questions are:

• In Form Validation, what is the opposite property of dirty?
• Which directive lets you create a regex for validation?
• What property does a form require in order to check validity?

Part 3 – Creating and Using Angular Services is coming soon.

In the meantime why not read Angular JS Services?