Seminar Developing Web Applications Using AngularJS (Canada) Seminar

Presented by Hands-On Technology Transfer

Hands On Technology Transfer Computer Training

Bring this seminar on-site to your facility for groups of 10 or more.

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.

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.

Course Prerequisites: Knowledge of HTML, CSS and JavaScript equivalent to attending the Web Site Development with HTML5/JavaScript course. Knowledge of jQuery is helpful, but not required.

What You Will Learn

  • Referencing AngularJS in a Web page
  • Building Single Page Applications using AngularJS
  • Integrating forms with Angular JS
  • Organizing code using modules
  • Injecting dependencies into a Module
  • Configuring routes with ngRoute and $routeProvider
  • Refactoring reusable code into factories and services
  • Defining business logic using controllers
  • Performing Ajax requests with the $http and $resource services
  • Communicating with RESTful web services
  • Reading data from remote servers using $http
  • Providing new behaviors to HTML using AngularJS directives
  • Enhancing the UI using animations and Bootstrap
  • Extending AngularJS with custom directives, filters and services

Workshop Agenda

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
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
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
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"
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
Using AngularJS Services
  • Built-In Services and Factories
  • Comparing Factories and Services
  • Using the $http and $resource Services
    • Connecting to RESTful Web Services
    • Performing CRUD Operations
    • Retrieving JSON data Asynchronously
  • Logging Errors with $log
  • Using the $location and $window Services
  • Deferred and Promise API
AngularJS Routing
  • Overview of Routing
  • Configuring Routes with $routeProvider
  • Defining Route Parameters
  • Designing a Shell Page with ngView
  • Defining Templates
  • Mapping Route URLs to Templates
Data Binding
  • Overview of Data Binding
  • The ngModel Directive
  • Displaying Sets of Data with ngRepeat
  • Applying Filters
    • currency
    • date
    • orderby
    • filter
  • AngularJS Expressions
Integrating Forms in AngularJS
  • Using the Form Controller
  • Binding to Input Fields
  • Toggling Control State Using Directives and Expressions
    • ng-checked
    • ng-show
    • ng-disabled
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
Extending AngularJS
  • Defining Custom Directives
    • Shared and Isolate Scope
    • Defining One- and Two-Way Data Bindings
    • Local Scope Properties (@, = and &)
  • Defining Custom Services
    • Refactoring Code into a Service
    • Defining Properties and Methods
    • Returning a Service
  • Defining Custom Factories
    • Refactoring Code into a Factory
    • Defining Properties and Methods
    • Returning a Factory Object
  • Defining Constants and Values
  • Defining Custom Filters
Animating AngularJS Applications
  • CSS3 Animations
    • CSS3 Transitions
    • CSS3 Animations
  • jQuery Animations
  • Adding Animations on Enter, Leave and Move Events
  • Injecting the ngAnimate Module
Integrating Third Party Frameworks
  • Creating a Responsive UI with the Bootstrap Grid System
  • Applying Bootstrap CSS Classes
  • Using Bootstrap Components
    • Progress bar
    • Modal
    • Tabs
    • Navbar
  • Using AngularStrap and AngularUI Components

 

More Seminar Information

Hands-On Technology Transfer
Hands On Technology Transfer Computer Training

Summary

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.

Delivery Method

Seminar Seminar

Also Available As

On-Site Training On-Site Training

Who Should Attend

Website Developers

 
Search similar training
Email this page
Print this document
 

Dates and Locations

Quebec City, QC
4/20/2020 - 4/23/2020
Tuition: $2075

Montreal, QC
4/20/2020 - 4/23/2020
Tuition: $2075

Toronto, ON
4/20/2020 - 4/23/2020
Tuition: $2075

Ottawa, ON
4/20/2020 - 4/23/2020
Tuition: $2075

Mississauga, ON
4/20/2020 - 4/23/2020
Tuition: $2075

see all dates/locations

 

Frequently Asked
Questions

Payment Options
Bill Me/Invoice
Credit Card

Register
Online
Fax Form

Availability
Select a date from the list at the bottom of the page for specific information about that class.

Other Information
Seminar

All Date/Location Information

Alberta (Find training in Alberta)
5/4/2020-5/7/2020 in Calgary, AB         Find a seminar in Calgary AB
5/4/2020-5/7/2020 in Edmonton, AB         Find a seminar in Edmonton AB

British Columbia (Find training in British Columbia)
5/4/2020-5/7/2020 in Vancouver, BC         Find a seminar in Vancouver BC

Manitoba (Find training in Manitoba)
5/4/2020-5/7/2020 in Winnipeg, MB         Find a seminar in Winnipeg MB

Ontario (Find training in Ontario)
4/20/2020-4/23/2020 in Kingston, ON         Find a seminar in Kingston ON
4/20/2020-4/23/2020 in Mississauga, ON         Find a seminar in Mississauga ON
4/20/2020-4/23/2020 in Ottawa, ON         Find a seminar in Ottawa ON
4/20/2020-4/23/2020 in Toronto, ON         Find a seminar in Toronto ON

Quebec (Find training in Quebec)
4/20/2020-4/23/2020 in Montreal, QC         Find a seminar in Montreal QC
4/20/2020-4/23/2020 in Quebec City, QC         Find a seminar in Quebec City QC

Saskatchewan (Find training in Saskatchewan)
5/4/2020-5/7/2020 in Regina, SK         Find a seminar in Regina SK