We're offering 20% off September Live Online classes! See which courses are applicable.   |   Details >

  
AccountIcon BigDataIcon BlogIcon default_resource_icon CartIcon checkmark_icon cloud_devops_icon computer_network_admin_icon cyber_security_icon gsa_schedule_icon human_resources_icon location_icon phone_icon plus_icon programming_software_icon project_management_icon redhat_linux_icon search_icon sonography_icon sql_database_icon webinar_icon

Search UMBC Training Centers

Programming

Comprehensive AngularJS Programming

+ View more dates & times
    
    
    
    
                     
  • Overview

    AngularJS training introduces the AngularJS framework, which has become a popular JavaScript framework for the development of “single page” Rich Internet Applications.  The AngularJS framework augments applications with the “model-view-controller” pattern which makes applications easier to develop and test because there is a separation of responsibilities within the code.  Although there are many benefits to using the AngularJS framework it is fairly different than the way “typical” web applications involving JavaScript have been designed.

    The Comprehensive AngularJS Programming Training course will provide an introduction to AngularJS and commonly related topics including the Bootstrap responsive framework and popular build tools. Once they’ve completing the course participants can begin developing AngularJS applications with responsive features quickly and easily.

    OBJECTIVES

    Topics covered include:

    • Create single page web applications using the MVC pattern of AngularJS
    • Understand the programming model provided by the AngularJS framework
    • Define Angular controllers and directives
    • Control Angular data bindings
    • Implement Responsive Web Applications with AngularJS
    • Use popular build tools to speed development.
  • Who Should Take This Course

    PREREQUISITES

    Attendees should have some prior understanding of web development, HTML, AJAX, and JavaScript.

  • Schedule
  • Course Outline

    CHAPTER 1. ADVANCED OBJECTS AND FUNCTIONALITY IN JAVASCRIPT

    • Basic Objects
    • Constructor Function
    • More on the Constructor Function
    • Object Properties
    • Deleting a Property
    • Object Properties
    • Constructor and Instance Objects
    • Constructor Level Properties
    • Namespace
    • 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
    • Summary

    CHAPTER 2. 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

    CHAPTER 3. ANGULARJS MODULE

    • 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

    CHAPTER 4. ANGULARJS CONTROLLERS

    • 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

    CHAPTER 5. ANGULARJS EXPRESSIONS

    • 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

    CHAPTER 6. BASIC VIEW DIRECTIVES

    • 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

    CHAPTER 7. ADVANCED VIEW DIRECTIVES

    • 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

    CHAPTER 8. WORKING WITH FORMS

    • 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

    CHAPTER 9. FORMATTING DATA WITH FILTERS IN ANGULARJS

    • What are AngularJS Filters?
    • The Filter Syntax
    • 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
    • The ‘filter’ Filter
    • Filter Performance Considerations
    • Summary

    CHAPTER 10. ANGULARJS $WATCH SCOPE FUNCTION

    • The $watch Function
    • The $watch Function Signature
    • The $watch Function Details
    • Canceling the Watch Action
    • Example of Using $watch
    • Things to be Aware Of
    • More Things to Be Aware Of
    • Performance Considerations
    • Summary

    CHAPTER 11. COMMUNICATING WITH WEB SERVERS

    • The $http AngularJS Service
    • The Promise Interface
    • The $http Service
    • Using $http Service
    • Shortcut Functions
    • Complete List of Shortcut Functions
    • Using $http.get()
    • Using $http.post()
    • Combining $http POST Request Data with URL Parameters
    • Direct $http Function Invocation
    • Request Configuration Properties
    • Setting Up HTTP Request Headers
    • Caching Responses
    • Disabling Caching in IE9
    • Setting the Request Timeout
    • The then() Function of the Promise Object
    • The Response Object
    • Working with JSON Response
    • Using success() and error() For Callbacks
    • Making Parallel Web Service Calls
    • Combining Multiple Promises into One
    • Wait for the Combined Promise
    • Summary

    CHAPTER 12. CUSTOM DIRECTIVES

    • What are Directives?
    • Directive Usage Types
    • Directive Naming Convention
    • Defining a Custom Directive
    • Using the Directive
    • Scope of a Directive
    • Isolating Scope
    • Creating a Scope for the Directive
    • Copying Data to a Directive’s Scope
    • Using External Template File
    • Manipulating a DOM Element
    • The Link Function
    • Event Handling from a Link Function
    • Wrapping Other Elements
    • Accepting a Callback Function
    • Supplying Callback Function
    • Supplying Argument to Callback
    • Summary

    CHAPTER 13. ANGULARJS SERVICES

    • Introduction to Services
    • Defining a Service
    • The factory() Method Approach
    • The service() Method Approach
    • Using a Service
    • The provider() Method Approach
    • Configuring a Service using its Provider
    • Summary

    CHAPTER 14. TESTING JAVASCRIPT WITH JASMINE

    • What is Jasmine
    • Supported Integrations
    • Jasmine in Standalone Mode
    • Jasmine Folder Structure
    • The Spec Runner Page
    • Viewing Test Results
    • Test Suites
    • Specs (Unit Tests)
    • Expectations (Assertions)
    • Matchers
    • More on Matchers
    • Examples of Using Matchers
    • Using the not Property
    • Test Failures
    • Setup and Teardown in Unit Test Suites
    • Example of beforeEach and afterEach Functions
    • Disabling Test Suites and Specs
    • Method Stubbing and Call Tracking with Spies
    • A Spy Example
    • spyOn Setup Variations
    • Simulating Exceptions
    • Asynchronous Calls
    • Summary

    CHAPTER 15. UNIT TESTING ANGULARJS CODE

    • Introduction
    • The ngMock Module
    • Creating the Spec Runner HTML
    • Testing a Service
    • Unit Test Specification for a Service
    • Better Injected Variable Names
    • Testing a Controller
    • Unit Test Specification for a Controller
    • Testing a “this” Based Controller
    • End-to-End Testing with Protractor
    • Installing Protractor
    • Testing a Web Page
    • How the Page Works
    • Write a Simple Test Specification
    • Create a Configuration File
    • Run the Test
    • Locating Elements by AngularJS Model
    • Locating Elements by Binding
    • Sending User Input
    • Summary

    CHAPTER 16. INTRODUCTION TO SINGLE PAGE APPLICATION

    • What is a Single Page Application (SPA)?
    • How is it Any Different?
    • Why Create SPA?
    • It’s Not All or Nothing
    • Challenges to SPA
    • Implementing SPA Using AngularJS
    • Simple SPA Using Visibility Control
    • Dynamic Templates Using ng-include
    • Example of Dynamic Template
    • SPA Using the $route Service
    • Summary

    CHAPTER 17. THE ROUTE SERVICE

    • 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

    CHAPTER 18. ADVANCED FORM HANDLING

    • Introduction to Form Validation
    • Validation and Model Binding
    • Input Type Validation
    • Validation Directives
    • A Note About “required”
    • Detecting Validation State
    • Showing Error Message
    • Other Status Variables
    • Styling Input Fields
    • Styling Other Areas
    • Summary

    CHAPTER 19. THE PROMISE API

    • Introduction
    • The Core API
    • Waiting for Multiple Ajax Calls
    • Changing Result Data
    • Promise Chaining
    • Caching Ajax Calls in Memory
    • Cache Ajax Calls on Disk
    • Caveat
    • Summary

    CHAPTER 20. ANGULAR 2 PREVIEW

    • Two Versions of Angular
    • Shared Features
    • In Angular JS but not in Angular 2
    • Changed in Angular 2
    • New in Angular 2
    • Directive Types
    • Built-In Directives – Differences
    • Data and Event Binding Differences
    • What is TypeScript
    • Other TypeScript Features
    • TypeScript Advantages / Disadvantages
    • TypeScript Compilation
    • Programming Editor TypeScript Support
    • Angular 2 Development Setup
    • Basic Application Architecture
    • Files
    • Components
    • Services
    • Moving from Angular JS to Angular 2
    • Summary

    LAB EXERCISES

    Lab 1. Setting Up the Lab Environment
    Lab 2. Objects in JavaScript
    Lab 3. Getting Started with AngularJS
    Lab 4. MVC with AngularJS
    Lab 5. AngularJS Expressions
    Lab 6. Working with Class and Style Directives
    Lab 7. The ng-repeat Directive
    Lab 8. Working with Form Inputs
    Lab 9. Data Formatting with Filters
    Lab 10. Using the $watch Function
    Lab 11. Communicating with Web Servers
    Lab 12. Reading Complex Data Sets From Web Servers
    Lab 13. Custom Directives
    Lab 14. Creating and Using Services
    Lab 15. Testing
    Lab 16. Basic Single Page Application (SPA)
    Lab 17. Using the Route Service
    Lab 18. Form Validation
    Lab 19. Server Side Input Validation
    Lab 20. Ajax Caching

  • FAQs
    Is there a discount available for current students?

    UMBC students and alumni, as well as students who have previously taken a public training course with UMBC Training Centers are eligible for a 10% discount, capped at $250. Please provide a copy of your UMBC student ID or an unofficial transcript or the name of the UMBC Training Centers course you have completed. Online courses are excluded from this offer.

    What is the cancellation and refund policy?

    Student will receive a refund of paid registration fees only if UMBC Training Centers receives a notice of cancellation at least 10 business days prior to the class start date for classes or the exam date for exams.

Contact Us