Angular JS: Get Started

Welcome to 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 2 – Angular JS Controllers
Part 3 – Angular JS Views and Directives
Part 4 – Angular JS Services
Part 5 – Angular JS Routing

Angular JS: An Introduction

Hello!

Scott says he assumes we’ve never worked with Angular JS before and know a bit about HTML, CSS and JavaScript.

The idea behind this course is to follow along with the code that Scott shows us.

This first module gets us started with AngularJS on a web page, shows us the development environment we’ll be working in and covers some JavaScript coding styles.

AngularJS

The home for Angular JS version 1.x is https://angularjs.org/ and Scott aso recommends built with angularjs, which has now moved to madewithangular.com

On particular example that Scott highlights is the online development environment Plunker.

Scott likes this tool so much he uses it for working with Angular in this course.

An Angular Application

Scott explains there’s two things we need to get started:

  1. A script tag pointing to angular.js
  2. An ng-app attribute in our HTML

We are briefly introduced to Angular directives here, and see a “Hello Plunker!” example.

Scott introduces us to the Angular “handlebars” – for doing binding expressions such as finding out what is 843 divided by 42?

Plunker Tips

In this lesson Scott demonstrates the following features in Plunker:

  • Saving
  • Using URLs of saved plunks
  • Downloading plunks
  • Signing in with Github
  • Deleting files
  • Preview window
  • Finding external libraries
  • Code linting
  • Editor options

Developer Tool Tips

Scott explains the Chrome developer tools and how they can help us track down problems.

He demonstrates creating an error. We can’t see this without the developer tools window being open. On windows we can open it by pressing F12.

We learn to watch out for the error indicator, and go to the Console tab to see the error.

Scott shows us how to find the JavaScript file we’re interested in and set breakpoints.

JavaScript Patterns

In the next few lessons Scott walks as through these common JavaScript patterns:

  • Functions as abstractions
  • Functions to build modules
  • Functions to avoid global variables

We start with functions as abstractions. The demo does not use Angular JS here, rather this is JavaScript fundamentals which are needed to work effectively with Angular JS.

Modules

We see an example of the Revealing Module pattern. To explore this topic in further depth see Structuring JavaScript Code by Dan Wahlin.

More advanced JavaScript developers may want to check out the Advanced JavaScript Closure Module by Kyle Simpson.

The IIFE

We want to avoid creating a lot of global variables. Scott describes them as “downright evil”.

We are already declaring variables inside of functions which is good. Scott first shows us that by wrapping our code inside a program function, we get down to one global variable (program).

We can do better than this and get down to zero global variables by using an IIFE, which stands for immediately invoked function expression.

This covers all of the JavaScript essentials we need. Future modules of the course will be 100% Angular JS.

Continue to Part 2: Controllers

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