Workshops


Sign up to our DC technology workshops
Register this online workshop for $290
USA & Canada: +1 240-200-6131
International Call: +1 240-391-8360
9am-6pm DC time or 1pm-10pm GMT

Develop responsive and feature-rich websites using AngularJS 1

Our workshops are offered in partnership with High School Technology Services (HSTS) - a non-profit subsidiary of WEG2G Group.

Workshop Code: hsts-w28

You will learn:


Workshop Description

This hands-on programming workshop 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 workshop introduces AngularJS 1.x. Students interested in Angular 2 should take the Developing Web Applications Using Angular 2 workshop instead.

Workshop Prerequisites

Knowledge of HTML, CSS and JavaScript equivalent to attending the HTML5 & HTML Intro with CSS or Responsive Site Design with Bootstrap and jQuery Programming for Beginners or JavaScript and jQuery Introduction Programming classes. Knowledge of jQuery is helpful, but not required.

Related Training and Certification Courses

Intro to Dreamweaver with Website Development Training
SQL Programming and DB Management
Cross-platform Native App Development Using HTML5, CSS3 and JavaScript
Object Oriented Programming with UML

Workshop Info

Highlights

Enrollment Fee

In-person in DC or Online: $290 per 6 hour workshop

Workshop Session Dates

Our workshops are offered all year around. Upon registration we enroll you to the earliest available class but you can reschedule it free of charge.

Location

Time

Register this online workshop for $290
Workshop Outline

1- Overview of AngularJS

  • Features and Benefits of AngularJS
  • MV* Design Pattern Overview
  • Downloading AngularJS
  • Referencing AngularJS Using a CDN
  • The AngularJS Digest Cycle
    • $watch
    • $apply
  • Overview of jqLite
  • Architecting an Application with AngularJS

2- Creating Single Page Applications (SPAs)

  • Single Page Application Model
  • AngularJS Programming Model for SPAs
  • Building the Shell HTML
    • Designing a Common UI
    • Defining Navigation
  • Managing Feature Containers
    • Designing Partial Views
    • Organizing Business Logic in Controllers
    • Programming the Data Model
  • Marrying Views, Controllers and URLs

3- Building Modules in AngularJS

  • Overview of Modules
  • Organizing Code Using Modules
  • Defining an Application with angular.module()
  • Bootstrapping an Application with ngApp
  • Managing Dependencies with Dependency Injection
  • Dealing with Minification Issues

4- Creating Controllers

  • Defining a Controller with module.controller()
  • Creating Properties and Methods in a Controller
  • Using the ngController Directive
  • Defining $scope in a Controller
  • Avoiding Scope Conflicts Using "Controller As"

5- Using Built-In AngularJS Directives

  • AngularJS Directive Overview
  • Behavior-Driven Directives
    • ngChange
    • ngClick
    • ngSubmit
  • DOM-Driven Directives
    • ngShow/ngHide
    • ngIf/ngSwitch
    • ngSrc/ngHref
  • Data-Driven Directives
    • ngBind
    • ngInit
    • ngModel
    • ngClass/ngStyle

6- Data Binding

  • Overview of Data Binding
  • The ngModel Directive
  • Displaying Sets of Data with ngRepeat
  • Applying Filters
    • currency
    • date
    • orderby
    • filter
  • AngularJS Expressions

7- Integrating Forms in AngularJS

  • Using the Form Controller
  • Binding to Input Fields
  • Toggling Control State Using Directives and Expressions
    • ngChecked
    • ngShow
    • ngDisabled

8- Validating Forms in AngularJS

  • Setting HTML5 Validation Attributes
    • required
    • pattern
    • min/max
  • Using AngularJS Properties in Expressions
    • $error
    • $dirty
    • $invalid
  • Styling the Form with Angular CSS classes
    • ng-valid
    • ng-invalid
    • ng-dirty
    • ng-pristine