Angular JS Fundamentals

2 Days

Using AngularJS in your company and having trouble on-boarding new developers?

Jump to Sign-Up Form

This workshop teaches the fundamentals of the popular new Javascript MVC framework, AngularJS, in a way that you can use to build your own applications immediately. Covers modules, controllers, views, scopes, using directives, and basic directive development. We build a task manager application that uses local storage to store our data. You’ll write both Jasmine unit tests and end-to-end web tests to verify that the application functions properly.

Prerequisites:

  • Good HTML / CSS skills will help you write good-looking AngularJS applications.
  • Basic Javascript is required, understanding Douglas Crockford’s Javascript, The Good Parts, is even better.
  • Some experience with jQuery and/or Ajax will help your understanding of the more complex labs.

Topics

Key Topic Areas

In this two-day course, you will build an Angular application from the ground up.

01

The Fundamentals: Modules, Controllers, Scopes, Services, Directives, Testing

Take your front-end applications to the next level with AngularJS, a modern Javascript MVC application framework. AngularJS is a component-based MVC, and provides features such as dependency injection, unit-testable components, templates and view routing, easy access to REST-based resources, and much more. The course will focus on the fundamentals: modules, controllers, scopes, services, directives, and testing.

02

Hands-On: Building and Testing Our App

We’ll build a task manager application using Angular and the Twitter Bootstrap UI library. Testing will be performed using Jasmine and the Karma test runner. You’ll come to learn the power of Angular involves its use of two-way data binding and expressive HTML-based components called directives, and that there is a significant and growing developer community. Take our course and begin to program HTML applications in a whole new way using Angular.

 
What You’ll Learn

Course Outline

A chapter-by-chapter breakdown of all the concepts and tools we’ll be covering over the two-day course.

  • JavaScript Refresher
  • Basic language features
  • Creating variables with var
  • Functions and functional programming
  • Nesting functions
  • Nesting with function reference variables
  • Creating Objects with JavaScript literal syntax and constructor functions
  • Indexed property access
  • Typeof and objects
  • Special comparisons for objects
  • Scope and Context
  • JavaScript visibility rules
  • Global variables
  • Object functions and execution
  • The this keyword in JavaScript
  • By reference – vs – by value
  • JavaScript types: Number, String, Boolean, Date
  • JavaScript == and false conditions
  • Meet “Triple Equals” ===
  • Primitives and wrapper objects in JavaScript
  • Arrays – Ordered sequence of items
  • Key JavaScript built-in objects
  • Using Object.create
  • Prototype – key points
  • Metadata – built-in functions and objects
  • AngularJS and JavaScript’s good parts
  • Closure key points
  • JSON
  • Jasmine – the JavaScript testing API
  • Lab 1 – Functional JavaScript
  • SPAs and division of labor
  • History of AngularJS
  • AngularJS JavaScript API
  • Small applications
  • Expressions and bindings
  • Defining a module
  • Where to mount ng-app
  • Major Angular components
  • Models, scopes, views and templates
  • Dependency Injection
  • AngularJS and Scripts
  • Multi-module applications
  • Example Module Reference and extension
  • Testing modules with Jasmine
  • Lab 2 – Angular JS Modules
  • Templates and Views
  • Views on the main page with ng-app
  • The Routing mechanism
  • View Areas and View Routing
  • Configuring Routing
  • Brief Detour – Angular style guide
  • Unit Testing routes
  • Route Path Variables
  • Search Parameters
  • Route, search parameters are fetched with $location
  • Recap – Routing Steps
  • Best Practice – Externalize View templates
  • Testing routing and view templates
  • More comprehensive tests
  • ng-model
  • ng-hide and ng-show
  • ng-init and ng-repeat
  • Running Angular Applications in NodeJS, Java, etc.
  • Lab 3 – Angular JS Views and Templates
  • The relationship between M, V, and C – the $scope
  • Angular’s MVC – the M-V-VM Pattern
  • Controllers – set up your view
  • Controllers and $scope
  • The ng-controller directive
  • Event-triggering directives
  • Executing controllers from routes
  • Bindings, scope relationships and lifecycle
  • One-way data binding
  • Two-way data binding
  • Variables and scope
  • Scopes and nesting
  • How long do scopes live?
  • Visualizing scope
  • Models in the scope
  • Example – Editable content in repeater
  • Events in $scope with a function
  • Example – bind to a function
  • Better with objects…
  • Watching a variable in the scope
  • Break
  • Sorting and Filtering
  • Unit Testing controllers and scopes
  • Setting up stubbed controller data
  • Writing the test spec
  • Labs 4.1, 4.2 and 4.3 – Controllers and scope
  • Parameter variables and minification
  • Minification tips
  • Web Testing
  • ng0scenario and protractor
  • Lab 4.4 (a or b) – Scenario or Protractor tests (optional)
  • The role of services
  • Four ways to define a service
  • Using a service from a controller
  • Using closure to hide data in a service
  • Adding dependencies to a service
  • Testing Services
  • Dealing with service dependencies
  • Injecting a replacement stub into Angular
  • Lab 5 – Defining A Service
  • Using Jasmine’s Spy framework
  • Advanced Spies
  • Returning results from services
  • Async service – $http and callbacks
  • Promises and the then function
  • Sending a message to a message bus
  • Sample Message Bus
  • Problems with message busses
  • Form handlers in Angular
  • Placement rules
  • Forms workshop in plunker
  • Setting up form handlers on controllers
  • Properties of forms, fields
  • Form Processing
  • The ngMessages module
  • Forms and models
  • Nested Forms
  • Switching location
  • Data binding and forms with ng-form and input tags
  • Pre-1.3 Angular in-line form validation
  • Regular expression validations
  • Angular validators depend on field type
  • More validators
  • More HTML Fields
  • Key validator attributes
  • Select using ng-options and arrays
  • Select with object-based collections
  • Text Areas
  • Other form validation techniques in Angular
  • Submitting form data within the single-page application
  • Interacting with a service
  • Lab 6 – Forms
  • Forms notes for 1.3 and above
  • Enhancements for error handling
  • Directive capabilities
  • General Syntax
  • Using a directive
  • Directives and Scopes
  • Isolated Scope
  • Passing Parameters by Reference
  • Binding : two way data binding with =
  • Binding: Evaluation binding with @
  • Binding: Using & to expose events
  • Subscribing to a message in a directive
  • Manipulating the DOM via jQuery / jqLite
  • Problem with testing and templateUrl
  • Good example directives
  • Directives summary
  • Lab 7 – Writing and integrating a directive

Kind Words from Our Students

Just wanted to thank you for your excellent instruction these past few days. Your ability to explain such a complicated framework in an intuitive way has been immensely helpful in filling in my gaps of AngularJS knowledge.

Course Alumni

Angular Training
2018-12-26T18:03:21+00:00

Course Alumni

Just wanted to thank you for your excellent instruction these past few days. Your ability to explain such a complicated framework in an intuitive way has been immensely helpful in filling in my gaps of AngularJS knowledge.

I still use your materials to learn about AngularJS. One of my co-workers just found one of your blog articles on Jasmine testing and it worked perfectly. Thank you.

Course Alumni

Angular Training
2018-12-26T18:06:49+00:00

Course Alumni

I still use your materials to learn about AngularJS. One of my co-workers just found one of your blog articles on Jasmine testing and it worked perfectly. Thank you.

The instructional design and delivery were excellent.

Jason W., student of Fortune 100 Repeat Client

Angular Training
2018-12-26T18:07:15+00:00

Jason W., student of Fortune 100 Repeat Client

The instructional design and delivery were excellent.

Know that your efforts are greatly appreciated and have greatly impacted my daily work life.

Alex S.

Angular Training
2018-12-26T18:07:39+00:00

Alex S.

Know that your efforts are greatly appreciated and have greatly impacted my daily work life.

Get Started

Interested in training at Chariot?

Use the contact form below to get in touch with us, and a member of our team will reach back out shortly.


* These fields are required.