Welcome to 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 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:
- A script tag pointing to angular.js
- 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.