Animation and Internationalization

Web developers looking to expand their skills with AngularJS


Expected Duration
117 minutes

Animation and internationalization features can be used to enhance web applications and widen audience scope. This course covers how to implement CSS-based and JavaScript-based animation in AngularJS. You will learn how to use animation libraries such as animate.css within your applications, and how to internationalize and localize your AngularJS applications with features such as the ngPluralize directive, localization rule sets, and locale scripts.


Getting Started with CSS-based Animations

  • start the course
  • 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

CSS Class-based Animations

  • 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

CSS Keyframe Animations and Libraries

  • use CSS keyframe animations in AngularJS
  • use CSS animation libraries in AngularJS

Custom Directives and $animate Promises

  • add support for AngularJS animation to a custom directive
  • work with promises returned by the methods in the $animate service

JavaScript Animations and Debugging

  • use JavaScript animations along with ngAnimate in AngularJS
  • use JavaScript animation frameworks and libraries in AngularJS
  • debug CSS and JavaScript animations

Internationalization and Localization

  • define internationalization(i18n) and use the ngPluralize directive
  • define localization(l10n) 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

Practice: Animation

  • use JavaScript animations, including JavaScript animations combined with CSS animations in AngularJS





Multi-license discounts available for Annual and Monthly subscriptions.