Introduction to AngularJS 1.x  with the iFLeX Delivery Method

iFLeX is Instructor Facilitated eLearning.  It combines Self-paced video education with hands on labs,

Facilitator support, end of course assessment/recommendations for on-going training and flexible schedule.

Why iFLeX?

·         Get it done!   Only 10% of eLearning actually happens.  Our program structure offers FLeXibility for the learner but ensures completion of eLearning with defined start and end dates.

·         Get the quality!  Consistent quality and knowledge that maps to our in-house developed content.

·         Get it scheduled!  Easily fits into your project schedules, deadlines and deliverables

·         Get Support!  Live facilitator support, access to 24 x 7 hands on labs, collaboration environment for quick answer to your questions.

·         Get it validated!  Our end of course assessment validates knowledge transfer, indicates where additional review is needed and offers that opportunity to go back to grasp the knowledge.

Program Overview: FLX1001 – Introduction to AngularJS 1.x – iFLeX Version
·         Start date August 1st  – End Date August 25th
·         Minimum overall time commitment: 17 hours
·         Student Fee: $895/student
·         Fee includes access to our current library of self-paced eLearning content for 3 months

OUTLINE AND AGENDA

MORE INFORMATION ON IFLEX CAN BE FOUND HERE!!

  • Facilitator Session #1: Course Introduction -4 hours

Course Kickoff: Ensure all students are able to access all resources for the training and understand how to use the tools available to make the most out of the session (collaboration site, remote labs, soft copy materials etc)

    • M01-P01: Presentation – Course Introduction –  Presented by Course Facilitator
      • What is Angular JS
      • Course Format
        • Lectures
        • Lab Modules
        • Final Test
    • Lab 1 – Setting up the Lab Environment
    • The Facilitator will present the material that’s in Module 2 – The video is there for review after the course.
    • The Facilitator will supervise and review the Lab 2 as well.
  • Module 2: Advanced JavaScript – Objects and Functions – Presented by Course Facilitator
  • For self-study review Allow 1.5 hrs with lab time
    • Video Presentation (for review)– Advanced JavaScript – Objects and Functions (17:52)
      • Basic Objects
      • Constructor Function
      • More on the Constructor Function
      • Object Properties
      • Deleting a Property
      • The instanceof Operator
      • Object Properties
      • Constructor and Instance Objects
      • Constructor Level Properties
      • Functions are First-Class Objects
      • Closures
      • Closure Examples
      • Private Variables with Closures
      • Immediately Invoked Function Expression (IIFE)
      • Prototype
      • Inheritance in JavaScript
      • The Prototype Chain
      • Traversing Prototype Property Hierarchy
      • Prototype Chain
      • Inheritance Using Prototype
      • Extending Inherited Behavior
      • Enhancing Constructors
      • Improving Constructor Performance
      • Inheritance with Object.create
      • The hasOwnProperty Method
      • Summary
    • Lab 2 – Objects in JavaScript

Self-Paced Student Work: Must be completed by Tuesday June 14th

Students must complete Modules 3 through 6 and associated labs. This portion must be completed by Tuesday June 14th. Total time commitment estimated at less than 3 hours and 30 minutes.

  • Module 3: Introduction to Angular JS – Self-Study – Allow 1 hour with lab time.-
    • Video Presentation – Introduction to AngularJS
      • What is AngularJS?
      • Why AngularJS?
      • Scope and Goal of AngularJS
      • Using AngularJS
      • A Very Simple AngularJS Application
      • Building Blocks of an AngularJS Application
      • Use of Model View Controller (MVC) Pattern
      • A Simple MVC Application
      • The View
      • The Controller
      • Data Binding
      • Basics of Dependency Injection (DI)
      • Other Client Side MVC Frameworks
      • Summary
    • Lab 3 – Getting Started with AngularJS
  • Module 4 – Angular JS Modules – No lab –Self- Study – Allow 30 minutes to watch video and review
    • Video Presentation – AngularJS Modules (8:03)
      • What is a Module?
      • Benefits of Having Modules
      • Life Cycle of a Module
      • The Configuration Phase
      • The Run Phase
      • Module Wide Data Using Value
      • Module Wide Data Using Constant
      • Module Dependency
      • Using Multiple Modules in a Page
      • Summary
  • Module 5 – AngularJS Controllers – Self-Study – Allow 1 hour with lab
    • Video  Presentation – AngularJS Controllers (10:04)
      • Controller Main Responsibilities
      • About Constructor and Factory Functions
      • Defining a Controller
      • Using the Controller
      • Controller Constructor Function
      • More About Scope
      • Example Scope Hierarchy
      • Using Scope Hierarchy
      • Modifying Objects in Parent Scope
      • Modified Parent Scope in DOM
      • Handling Events
      • Another Example for Event Handling
      • Storing Model in Instance Property
      • Summary
    • Lab 4 – MVC with AngularJS
  • Module 6 – AngularJS Expressions – Self-Study – Allow 45 minutes with lab.
    • Video Presentation – AngularJS Directives (4:54)
  • Expressions
  • Operations Supported in Expressions
  • AngularJS Expressions vs JavaScript Expressions
  • AngularJS Expressions are Safe to Use!
  • What is Missing in Expressions
  • Considerations for Using src and href Attributes in Angular
  • Examples of ng-src and ng-href Directives
  • Summary
    • Lab 5 – AngularJS Expressions
  • Checkpoint quiz 1
    • 10 multiple-choice assessment questions
  • Facilitator Session #2 – 4 hours

 Review multiple choice assessment questions

    • Review and present solutions for Labs 3, 4, and 5
    • Answer questions.
    • Present modules 7 and 8, and supervise lab 6 and 7.
  • Module 7 – Basic View Directives – For self-study review –Allow 45 minutes with lab
    • Video Presentation – Basic View Directives (5:41)
  • Introduction to AngularJS Directives
  • Controlling Element Visibility
  • Adding and Removing an Element
  • Dynamically Changing Style Class
  • The ng-class Directive
  • Example Use of ng-class
  • Setting Image Source
  • Setting Hyperlink Dynamically
  • Preventing Initial Flash
  • Summary
    • Lab 6 – Working with Class and Style Directives
  • Module 8: Advanced View Directives – For self-study review- Allow 45 minutes with lab
    • Video Presentation – Advanced View Directives (5:56)
      • The ng-repeat Directive
      • Example Use of ng-repeat
      • Dynamically Adding Items
      • Special Properties
      • Example: Using the $index Property
      • Scope and Iteration
      • Event Handling in Iterated Elements
      • The ng-switch Directive
      • Example Use of ng-switch
      • Inserting External Template using ng-include
      • Summary
    • Lab 7 – The ng-repeat Directive

Self-Paced Student Work: Must be completed by June 21st

Students must complete modules 9 through 10 and associated labs. This portion must be completed by Tuesday June 21st. Total time commitment estimated at less than 2 hours.

  • Module 9 – Working with Forms – self-study  –Allow 45 minutes with lab
    • Video Presentation – Working with Forms (6:18)
  • Forms and AngularJS
  • Scope and Data Binding
  • Role of a Form
  • Using Input Text Box
  • Using Radio Buttons
  • Using Checkbox
  • Using Checkbox – Advanced
  • Using Select
  • Using Select – Advanced
  • Disabling an Input
  • Reacting to Model Changes in a Declarative Way
  • Example of Using the ng-change Directive
  • Summary
    • Lab 8 – Working with Form Inputs
  • Module 10: Data Formatting with Filters – self-study – Allow 45 minutes with lab
    • Video Presentation – Data Formatting with Filters (6:40)
      • What are AngularJS Filters?
      • The Filter Syntax
      • Angular Filters
      • More Angular Filters
      • Using Filters in JavaScript
      • Using Filters
      • A More Complex Example
      • The date Filter
      • The date’s format Parameter
      • Examples of Using the date Filter
      • The limitTo Filter
      • Using limitTo Filter
      • Filter Performance Considerations
      • Summary
    • Lab 9 – Data Formatting with Filters
  • Checkpoint Quiz 2
    • 10 multiple-choice assessment questions
  • Facilitator Session #3 – 4 hours
    • Review multiple choice assessment questions
    • Review and present solutions to labs 8 and 9
    • Present Module 11
    • Supervise Lab 10
    • Present Module 12
    • Supervise Lab 11
    • Review and Wrap-up
  • Module 11 – AngularJS Services – For self-study review -Allow 45 minutes with lab
    • Video Presentation – AngularJS Services (7:38)
      • Introduction to Services
      • Defining a Service
      • The factory() Method Approach
      • The service() Method Approach
      • The provider() Method Approach
      • Using a Service
      • Configuring a Service using its Provider
      • Summary
    • Lab 10 – Creating and Using Services
  • Module 12 – The Route Service – For self-study review  -Allow 1 hour 30 minutes with lab
    • Video Presentation – The Route Service (11:33)
  • Introduction to the Route Service
  • Downloading the Route Service Code
  • Using the Route Service
  • Setting up the Route Table
  • URL Fragment Identifier
  • Showing the Views
  • Navigation
  • The $location Service
  • Programmatic Navigation
  • Controllers for the Views
  • Example Controllers for Views
  • Passing URL Parameters
  • Accessing Query Parameters
  • Configuring Route Parameters
  • Accessing Route Parameters
  • HTML5 Mode
  • Using the HTML5 Mode
  • Bookmarking HTML5 Mode URL
  • Summary
    • Lab 17 – Using the Route Service
  • Module 13 Review
    • M20-P01: Presentation – Course Review

During this timeframe students would review as needed to ensure they gained solid understanding and working knowledge of the key concepts to prepare for the final assessment. During this phase the Facilitator will monitor the collaboration site and answer any open questions as needed

  • Final Exam:
    • 25 question multiple choice assessment.