Developing Web Applications Using AngularJS

Duration: 4 Days | Price: £1,695 + VAT

Course Description: This hands on programming course provides a thorough introduction to the
AngularJS JavaScript Framework. Attendees will learn the fundamental skills necessary to build Web
Applications using AngularJS and the MV* (Model View Whatever) design pattern. Topics include
creating controllers, using scope to manage data, designing views/templates, routing, data binding and
filters, applying directives, as well as form integration and validation. Students will also use AngularJS'
built-in services to communicate with RESTful web services and provide CRUD database operations.

Students will learn how to use CSS animations and Bootstrap to enhance the UI as well as learn to
employ third-party components such as modal dialogs (“modals”), progress bars and navbars. In
addition, students will learn to extend AngularJS with custom directives, services and filters.

Comprehensive hands on exercises are integrated throughout to reinforce learning and develop real
competency.

This course introduces AngularJS 1.x. Students interested in Angular should take the Developing
Web Applications Using Angular course instead.

Course Prerequisites: Knowledge of HTML, CSS and JavaScript equivalent to attending the Website
Development with HTML5, CSS and Bootstrap and JavaScript Programming courses. Knowledge of
jQuery is helpful, but not required.

Overview of AngularJS Creating Single Page Applications (SPAs)

Features and Benefits of AngularJS Single Page Application Model

MV* Design Pattern Overview AngularJS Programming Model for SPAs
Downloading AngularJS Building the Shell HTML
Referencing AngularJS Using a CDN Designing a Common UI
The AngularJS Digest Cycle Defining Navigation
$watch Managing Feature Containers
$apply Designing Partial Views
Overview of jqLite Organizing Business Logic in
Architecting an Application with AngularJS Controllers
Programming the Data Model
Marrying Views, Controllers and URLs

Building Modules in AngularJS Creating Controllers

Overview of Modules Defining a Controller with

Organizing Code Using Modules
Defining an Application with
angular.module()
Bootstrapping an Application with ngApp
Managing Dependencies with Dependency
Injection
module.controller()
Creating Properties and Methods in a
Controller
Using the ngController Directive
Defining $scope in a Controller
Avoiding Scope Conflicts Using
 Dealing with Minification Issues "Controller As"

Using Built-In AngularJS Directives Using AngularJS Services

AngularJS Directive Overview Built-In Services and Factories

Behavior-Driven Directives Comparing Factories and Services
ngChange Using the $http and $resource Services
ngClick Connecting to RESTful Web Services
ngSubmit Performing CRUD Operations
DOM-Driven Directives Retrieving JSON data
ngShow/ngHide Asynchronously
ngIf/ngSwitch Logging Errors with $log
ngSrc/ngHref Using the $location and $window
Data-Driven Directives Services
Deferred and Promise API
ngBind
ngInit
ngModel
ngClass/ngStyle

AngularJS Routing Data Binding

Overview of Routing Overview of Data Binding

Configuring Routes with $routeProvider The ngModel Directive
Defining Route Parameters Displaying Sets of Data with ngRepeat
Designing a Shell Page with ngView Applying Filters
Defining Templates currency
Mapping Route URLs to Templates date
orderby
filter
AngularJS Expressions

Integrating Forms in AngularJS Extending AngularJS

Using the Form Controller Defining Custom Directives

Binding to Input Fields Shared and Isolate Scope
Toggling Control State Using Directives and Defining One- and Two-Way Data
Expressions Bindings
ngChecked Local Scope Properties (@, = and &)
ngShow Defining Custom Services
ngDisabled Refactoring Code into a Service
Defining Properties and Methods
Validating Forms in AngularJS
Returning a Service
Defining Custom Factories
Setting HTML5 Validation Attributes
Refactoring Code into a Factory
required Defining Properties and Methods
pattern Returning a Factory Object
min/max Defining Constants and Values
Using AngularJS Properties in Expressions Defining Custom Filters
$error
$dirty
$invalid
Styling the Form with Angular CSS classes
ng-valid
ng-invalid
 ng-dirty
ng-pristine

Animating AngularJS Applications Integrating Third Party Frameworks

CSS3 Animations Creating a Responsive UI with the

CSS3 Transitions Bootstrap Grid System
CSS3 Animations Applying Bootstrap CSS Classes
Using the $animate Service Using Bootstrap Components
Adding Animations on Enter, Leave and Progress bar
Move Events Modal
Injecting the ngAnimate Module Tabs
Navbar
Using AngularStrap and AngularUI
Components

The instructor bent over backwards to ensure that the students were satisfied. I was

“ very impressed with his technical expertise. His introduction and review of the objectives
of each module were thorough and complete. He made himself available after hours,
before hours, and during lunch breaks to spend time with students that needed more
help. Great job!
— R.T., General Physics

Hands down the best class and learning experience I have ever had.

“ — J.I., National Oilwell Varco

Hands On Technology Transfer, Inc.

The Old Post House
91 Heath Road
Weybridge
Surrey
KT13 8TS
01780 483931
customer-service@traininghott.co.uk