25,000+ Courses Nationwide
0345 4506120

AngularJS Web Application Development

What is AngularJS?  AngularJS is a modern JavaScript framework for building web-based functionality in desktop and mobile browsers. In this training course, you gain the skills to integrate AngularJS directives and expressions into HTML5 markup, write AngularJS controllers and services, build feature-rich Single Page Applications (SPAs), and harness AngularJS services and animating applications to construct an interactive UI.

In this AngularJS Training, attendees will build a complete AngularJS Single Page Application (SPA). They will craft the User Interface with templates, directives and filters, code controllers with JavaScript and bind data to templates. They will learn how to develop data-bound forms to perform CRUD access and harness built-in services to perform REST data access.

Key Features of this AngularJS Training:

  • Learn AngularJS
  • After-course instructor coaching benefit
  • Learning Tree end-of-course exam included
  • After-course computing sandbox included

Select specific date to see price, venue and full details.

Learning Objectives

  • Build a complete AngularJS Single Page Application (SPA)
  • Craft the User Interface (UI) with templates, directives, and filters
  • Code controllers with JavaScript and bind data to templates
  • Develop data-bound forms to perform CRUD access
  • Harness built-in services to perform REST data access

Pre-Requisites

Experience developing web pages with JavaScript, HTML, and CSS at the level of:

  • JavaScript for Modern Web Development course

Course Content

Introduction and Overview

  • Features and benefits of AngularJS
  • Extending HTML for web applications
  • Separating concerns and testability

Architecting AngularJS

Assembling the application

  • Bootstrapping the application with ng–app
  • Modularising functionality with angular.module()
  • Managing dependencies with dependency injection
  • Annotating modules for minification

Coding AngularJS controllers

  • Attaching the controller with ng–controller
  • Connecting the $scope to the controller
  • Implementing controller properties and methods
  • Employing the controller as syntax

Demystifying Angular internals

  • Dissecting the digest cycle
  • Observing expressions with $scope.$watch()
  • Integrating external libraries with $scope.$apply()

Constructing an Interactive User Interface

Applying directives to templates

  • Binding to HTML with ng–model
  • Interleaving AngularJS expressions with HTML
  • Displaying sets of data with ng–repeat
  • Piping data into AngularJS filters
  • date
  • currency
  • filter
  • orderby

Integrating forms with AngularJS

  • Manipulating forms and inputs with the form controller
  • Binding to input fields
  • text
  • date
  • radio
  • checkbox
  • select
  • Toggling form control state with ng–show and ng–disabled

Validating form input

  • Exploiting HTML5 attributes: required, min, max, pattern
  • Harnessing $error, $dirty, and $invalid in expressions
  • Styling with Angular CSS classes: ng–valid, ng–invalid, ng–pristine, ng–dirty

Designing a Polished User Interface

Working with images and links

  • Binding image source URLs with ng–src
  • Incorporating bound links with ng–href

Supporting internationalization and accessibility

  • Providing local rules
  • Applying localization with ngPluralize and ngMessageFormat
  • Leveraging the ngAria module

Harnessing AngularJS Services

Navigating with the routing service

  • Dividing application functionality across multiple views
  • Specifying the ng–view and page layout
  • Configuring the $routeProvider service
  • Mapping route URLs to templates

Connecting to external REST API data

  • Performing CRUD operations with the $http service
  • get()
  • post()
  • delete()
  • put()
  • Retrieving JSON data asynchronously
  • Mapping JSON data into JavaScript objects

Testing AngularJS functionality

  • Unit testing controllers with Jasmine
  • Mocking HTTP with $httpbackend

Extending AngularJS

Developing custom components

  • Selecting the appropriate provider
  • constant
  • value
  • factory
  • service
  • Coding a custom filter

Creating custom directives

  • Implementing restrictions for elements or attributes
  • Specifying template markup or templateUrl
  • Isolating directive scope
  • Producing one– and two–way data bindings

Animating AngularJS Applications

  • Including the ngAnimate module
  • Hooking into AngularJS animation triggers
  • Writing CSS transitions and animations
  • Incorporating drag and drop

AngularJS Training FAQs

What is AngularJS

AngularJS is a modern JavaScript framework for building web-based functionality in desktop and mobile browsers.

Why should I use AngularJS?

With an AngularJS application, you have a clean separation of HTML templates or views that display data from JavaScript controllers that retrieve or manipulate data. This design principle makes AngularJS applications easier to test and maintain.

Will I learn how to create a webpage using AngularJS?

AngularJS provides a comprehensive framework that allows you to develop modern Single Page Applications (SPA) using your existing HTML and JavaScript skills. In this course you learn how to integrate AngularJS directives and expressions into HTML5 markup and to write JavaScript controllers and services to build a complete, feature-rich Single Page Web Application.

Related Training

CSS3 Responsive Web Design Training

jQuery Best Practices for Legacy and Today

Learn HTML5: Platform-Independent Web Development with CSS3 and JavaScript

WCF, Web API and SignalR Services for .NET

Related Courses

Privacy Notice

In order to provide you with the service requested we will need to retain and use your contact information in accordance with our Privacy Notice. If you choose to provide us with this information you explicitly consent to us using the information as necessary to provide the requested service to you. If you do not agree please do not proceed to request the service from us.

Marketing Permissions

Would you like to receive our newsletter and other information on products and services which we think will be of interest to you by email. We will always treat your information with care and in accordance with our Privacy Notice. You are free to withdraw this permission at any time.

 

We work with the best