Live Chat
Monday - Friday 8am - 6pm EST Chat Now
Contact Us
Monday - Friday 8am - 8pm EST 1-800-268-7737 Other Contact Options

Cart () Loading...

    • Quantity:
    • Delivery:
    • Dates:
    • Location:


AngularJS Fundamentals

Learn everything about AngularJS from setting up the environment to testing and debugging apps.

GK# 7283

Course Overview


AngularJS is a JavaScript framework designed to simplify the task of building single-page Model, View, and Controller apps. It can be added to an HTML page with a script tag. In this learning path, you will learn everything about AngularJS from setting up the environment to testing and debugging apps.


  • Delivery Format:
  • Date:
  • Location:
  • Access Period:


What You'll Learn

  • Beginning AngularJS
  • Introduction to Directives
  • Controllers and Directives
  • Services and Routing
  • Testing AngularJS
  • Animation and Internationalization


Viewing outline for:

On-Demand Outline

Beginning AngularJS

  • Set up the AngularJS environment
  • Use scope functions
  • Execute scope methods in response to a user input or event
  • Use bracketed expressions to hold and evaluate expressions
  • Describe how dot notation affects scope hierarchies
  • Use controllers and variable scope
  • Share data between multiple controllers
  • Use the controller as syntax to create controllers
  • Use display filters to filter data
  • Create a custom display filter
  • Use the orderBy and limitTo filters
  • Use the number and json filters
  • Use the date filter
  • Work with user input
  • Perform basic client-side form validation
  • Use the CSS classes that are provided with AngularJS
  • Filter output based on content
  • Use the $interpolate service to change the default braces
  • Use the $scope.$watch functionality
  • Use the $q.all function to handle multiple promises
  • Use the angular.foreach function
  • Validate data types
  • Use different filters to control the display of the application

Introduction to Directives

  • Instantiate a template once per item from a collection
  • Use ng-include to include an external HTML fragment
  • Specify custom behavior when an element is clicked
  • Use ng-show and ng-hide to control the display of elements
  • Use nested variable scopes in AngularJS
  • Use the ngClick and ngDblClick directives in AngularJS
  • Specify custom behaviors based on mousedown and mouseup events
  • Specify custom behaviors based on mouseover and mousemove events
  • Specify custom behaviors based on mouseenter and mouseleave events
  • Compare the ngChange directive with the JavaScript onchange event
  • Replace elements using the ngBind and ngBindTemplate directives
  • Insert an HTML element using the ngBindHTML directive
  • Set CSS style on an HTML element conditionally using the ngStyle directive
  • Dynamically set CSS classes on an HTML element using the ngClass directive
  • Use the ngClassEven and ngClassOdd directives
  • Use the ngHref and ngSrc directives
  • Use the ngModel directive
  • Use the ngFocus and ngBlur directives
  • Use AngularJS directives in Internet Explorer
  • Use different bindings to create custom behaviors based on different mouse events

Controllers and Directives

  • Describe isolate scopes in directives
  • Use the equals sign to set up two-way binding
  • Use the ampersand sign to invoke outer scope functions
  • Use the at symbol to pass strings into the directives
  • Create a directive using shorthand notation
  • Replace directive elements in HTML markup
  • Add controllers to directives
  • Set up dynamic controllers for directives
  • Use the transclude property
  • Use the require property to set up communication between directives
  • Communicate between nested directives
  • Watch the attributes on a directive element for changes
  • Work with browser events in directives
  • Use the nglf directive
  • Use the ngList directive
  • Set up and communicate with both directives and nested directives

Services and Routing

  • Use the $anchorScroll service
  • Use the $locale service
  • Use the $timeout service
  • Use the $parse service
  • Use the $compile service
  • Use the $cacheFactory service
  • Use the $exceptionHandler service
  • Use the $cookieStore service
  • Create a simple custom service
  • Use the $http service to GET server data
  • Use the $http service to POST server data
  • Use the $resource service to request server data
  • Use the $http and $q services together
  • Set up routing
  • Use route parameters
  • Set up a default route
  • Use the $route service to read query strings
  • Use the $route service to reload pages
  • Set up a simple route using the templates property
  • Create custom properties on routes
  • Use the $location service to perform client site routing
  • Use the $location service to replace views without altering browser history
  • Use the $log service
  • Use the $filter function from markup and controller
  • Use the $rootScope service
  • Use the $window and $document services
  • Use the $q service
  • Use the $http service to GET and POST server data

Testing AngularJS

  • Set up a test environment
  • Install Node and Karma to test applications
  • Test a controller
  • Unit test a controller with dependencies
  • Test custom services
  • Test custom services with dependencies
  • Set up unit tests that involve AJAX calls
  • Test a custom filter
  • Test a custom filter with dependencies
  • Test simple directives
  • Test custom directives with external templates
  • Test directive bindings
  • Test events on directives
  • Set up unit tests that involve AJAX calls and controllers with dependencies

Animation and Internationalization

  • Add the ngAnimate module as a dependency in an AngularJS application
  • Create, enter, and leave transition animations for AngularJS directives such as, ngInclude, ngView, ngIf, ngSwitch
  • Ensure that transition animations for nested directives work as expected
  • Animate ngRepeat items entering and leaving the DOM
  • Create a move transition animation for the AngularJS directive ngRepeat
  • Create, add, and remove animations for AngularJS directive such as ng-show, ng-hide, and ng-class
  • Animate the ngHide and ngShow directives in AngularJS
  • Create animations that run when Angular performs form validation
  • Create animations for the AngularJS directive ngMessages
  • Use CSS keyframe animations in AngularJS
  • Use CSS animation libraries in AngularJS
  • Add support for AngularJS animation to a custom directive
  • Work with promises returned by the methods in the $animate service
  • Use JavaScript animations along with ngAnimate in AngularJS
  • Use JavaScript animation frameworks and libraries in AngularJS
  • Debug CSS and JavaScript animations
  • Define internationalization(i18n) and use the ngPluralize directive
  • Define localization(l1n) in the context of AngularJS and describe how to use prebundled rule sets or locale scripts with associated caveats to provide localization support for an AngularJS app
  • Use locale scripts to implement localization in AngularJS
  • Write localizable plural messages in AngularJS using messageFormat syntax extensions
  • Provide language translations based on locale keys in an AngularJS app
  • Use JavaScript animations, including JavaScript animations combined with CSS animations in AngularJS

Who Should Attend


Web developers looking to expand their skills with AngularJS.

Course Delivery

This course is available in the following formats:


Train at your own pace with 24/7 access to courses that help you acquire must-have technology skills.

Request this course in a different delivery format.