Introduction to Responsive Web Development with AngularJS and Bootstrap
CLASS DATE(s):
7/20/2020 - 7/23/2020
9/21/2020 - 9/24/2020

COURSE LENGTH: 4 Days

COURSE COST: $1995

COURSE TIMES: 9:00am - 4:30pm

Printable version of this course
print
Register for this course
register

COURSE OVERVIEW

This training course introduces the student to the AngularJS framework, and to modern concepts of the Responsive Design using CSS, media queries and the Bootstrap framework.

AngularJS makes applications easier to develop and test, but students often find that AngularJS is quite different from traditional web applications. The training course boils down the differences and provides a quick and efficient introduction to the AngularJS framework. Starting with an overview of the advanced JavaScript underpinnings of AngularJS, we use labs and examples to train the student to use AngularJS in modern responsive web applications.

AUDIENCE AND PREREQUISITES

Attendees should have some prior understanding of web development, HTML, AJAX, and JavaScript.

  

Course Cost doesn't include cost of courseware/student manual. Course to run is subject to a minimum enrollment Course may run as a virtual instructor led course if a minimum enrollment is not met. For more information, please feel free to contact: 207.775.0244 or email: learn@vtec.org.

COURSE TOPICS:


In this AngularJS training course, attendees will learn how to:
Create single page web applications using the MVC pattern of AngularJS
Understand the programming model provided by the AngularJS framework
Define Angular controllers and directives
Control Angular data bindings
Implement Responsive Web Applications with AngularJS and Bootstrap

Advanced Objects and Functionality in JavaScript
Basic Objects, Constructor Function, More on the Constructor Function
Object Properties, Deleting a Property, Object Properties
Constructor and Instance Objects, Constructor Level Properties
Namespace, Functions are First-Class Objects,
Closures, Closure Examples, Private Variables with Closures
Immediately Invoked Function Expression (IIFE)
Prototype, Inheritance in JavaScript
The Prototype Chain, Traversing Prototype Property Hierarchy
Prototype Chain

Introduction to AngularJS
What is AngularJS?
Why AngularJS?
Scope and Goal of AngularJS, Using AngularJS
A Very Simple AngularJS Application
Building Blocks of an AngularJS Application
Use of Model View Controller (MVC) Pattern
A Simple MVC Application
The View, The Controller, Data Binding
Basics of Dependency Injection (DI)
Other Client Side MVC Frameworks

AngularJS Module
What is a Module?
Benefits of Having Modules
Life Cycle of a ModuleThe Configuration Phase
The Configuration Phase
The Run Phase
Module Wide Data Using Value
Module Wide Data Using Constant
Module Dependency
Using Multiple Modules in a Page

AngularJS Controllers
Controller Main Responsibilities
About Constructor and Factory Functions
Defining a Controller, Using the Controller
Controller Constructor Function
More About Scope, Example Scope Hierarchy
Using Scope Hierarchy, Modifying Objects in Parent Scope
Modified Parent Scope in DOM, Handling Events
Handling Events, Another Example for Event Handling
Storing Model in Instance Property

AngularJS Expressions
Expressions
Operations Supported in Expressions
AngularJS Expressions vs JavaScript Expressions
AngularJS Expressions are Safe to Use!
What is Missing in Expressions
Considerations for Using src and href Attributes in Angular
Examples of ng-src and ng-href Directives

Basic View Directives
Introduction to AngularJS Directives
Controlling Element Visibility
Adding and Removing an Element
Dynamically Changing Style Class
The ng-class Directive
Example Use of ng-class
Setting Image Source
Setting Hyperlink Dynamically
Preventing Initial Flash

Advanced View Directives
The ng-repeat Directive
Example Use of ng-repeat
Dynamically Adding Items, Special Properties
Example: Using the $index Property
Scope and Iteration, Event Handling in Iterated Elements
The ng-switch Directive
Example Use of ng-switch
Inserting External Template using ng-include

Working with Forms
Forms and AngularJS, Scope and Data Binding
Role of a Form, Using Input Text Box
Using Radio Buttons
Using Checkbox, Using Checkbox - Advanced
Using Select, Using Select Advanced
Disabling an Input
Reacting to Model Changes in a Declarative Way
Example of Using the ng-change Directive

Formatting Data with Filters in AngularJS
What are AngularJS Filters?
The Filter Syntax, Angular Filters
Using Filters in JavaScript, Using Filters
A More Complex Example,
The date Filter, The date's format Parameter
Examples of Using the date Filter
The limitTo Filter, Using limitTo Filter
The 'filter' Filter
Filter Performance Considerations

AngularJS $watch Scope Function
The $watch Function, The $watch Function Signature
The $watch Function Details
Canceling the Watch Action
Example of Using $watch
Things to be Aware Of
More Things to Be Aware Of
Performance Considerations

Communicating with Web Servers
The $http AngularJS Service, The Promise Interface
The $http Service, Using $http Service
Shortcut Functions, Complete List of Shortcut Functions
Using $http.get(), Using $http.post()
Combining $http POST Request Data with URL Parameters
Direct $http Function Invocation, Request Configuration Properties
Setting Up HTTP Request Headers
Caching Responses, Disabling Caching in IE9
Setting the Request Timeout, The then() Function of the Promise Object
The Response Object, Working with JSON Response
Using success() and error() For Callbacks, Making Parallel Web Service Calls
Combining Multiple Promises into One, Wait for the Combined Promise

Custom Directives
What are Directives? Directive Usage Types
Directive Naming Convention, Defining a Custom Directive
Using the Directive, Scope of a Directive
Isolating Scope, Creating a Scope for the Directive
Copying Data to a Directive's Scope, Using External Template File
Manipulating a DOM Element, The Link Function
Event Handling from a Link Function
Wrapping Other Elements
Accepting a Callback Function, Supplying Callback Function
Supplying Argument to Callback

AngularJS Services
Introduction to Services
Defining a Service
The factory() Method Approach
The service() Method Approach
Using a Service
The provider() Method Approach
Configuring a Service using its Provider

Introduction to CSS3
What is a Style?
What are Cascading Style Sheets?
CSS and the Evolution of Web Development
The CSS Standardization Process
CSS and HTML
CSS Compatibility
CSS Rules
New in CSS3

Applying CSS Styles
Inline Styles, Embedded Styles
External Styles, Selectors,
Combinator Selectors, Universal Selector
Style Classes, Pseudo-Classes
Inheriting From a Parent
Declaring !important Styles
CSS Cascade Order

Box Model and Effects
Element Box Model, Parts of the Box Model, Setting Width and Height
IE Box Size Bug, Controlling Flow in Position, Hiding Content
Overflowing Content, Floating Elements
Using Float for Multiple Columns
Margins, Padding, Border, Outline
CSS 3 - Rounding Border Corners
CSS 3 - Using a Border Image
Border Image Example

Introduction to Responsive Web Design
What is Responsive Web Design?
Mobile Browsers Quirks, Other Mobile Web Considerations
Primary Responsive Design Techniques
Elements of Responsive Design
Example of Responsive Design
Responsive Page Design Schematic
Alternatives to Responsive Design

CSS 3 and Responsive Web Design
Progressive Enhancement
Implementing Progressive Enhancement
Media Types, CSS Style "Reset"
Conditional Styles for Internet Explorer
What is the Viewport?, Adapting the Viewport,
Specifying the Viewport, Media Queries
Media Features Used in Media Queries
Combining Responsive Design Techniques
Testing Responsive Design

Responsive Web Page Layout
The Main Layout Types, Responsive Layouts
Popular Layout Patterns, The 'Mostly Fluid' Layout Pattern
The 'Column Drop' Layout Pattern, The 'Layout Shifter' Pattern
Other Layout Techniques, Getting Content Fillers
The Float CSS Property, Combining CSS Styles
The Simple Fluid Layout Example and Technique
The Results, Font Size Units, Pixel-Sized vs Em-Sized
Font Size Unit Relationships
Pixels to Em Conversion Formula
Other Considerations
Looking into the Future

Responsive Images
Responsive Images, Performance Considerations
Shrinking Images, Traditional Image Handling Techniques
Media Queries Don't Always Help With Performance
A "Fluid" Pixel, The Device Viewports,CSS Pixels
The Power of Simplicity
Sencha.io Src Images Cloud Service and Diagram
How it Works
Sencha.io Src API, and API Details
Examples of Sencha.io Src API
Rolling Out Your Own Cloud Image Manipulation Service
The Picture Element, The srcset Attribute
More on the srcset Attribute, Examples of the srcset Attribute, What is Picturefill? and Using

Bootstrap Overview
What is Bootstrap
Keywords from bower.js, Bootstrap History,
Responsive Web Development and Grid Layout
Reusable GUI Components, JavaScript
The Mobile First Philosophy, Why RWD Matters
Responsive Page Views, Less, Getting Bootstrap
Bootstrap Content Delivery Network, Other Setup Options
The Bootstrap Core Files, To Min or Not to Min

Getting Started with Bootstrap
Bootstrap Basic Page Template
The Viewport Meta Tag, The user-scalable Property
Including Bootstrap JavaScript Files, Plugin Dependencies
Checking the Needed Version of jQuery, Resetting Styles
Customizing the CSS Global Settings, A Fragment of the scaffolding.less File
Bootstrap Components, Containers, Using Containers, Device Sizes, The Grid System
The Column Arithmetic, A Grid Example,
CSS Media Queries (1 / 2), CSS Media Queries (2 / 2)
Customizing Breakpoints, Responsive Grid Layout,
Combining Column Styles, Other Column Operations
Navigation, (Desktop), (Mobile), Source, Explained, Elements and Styles
Glyphicons, Using, Responsive Images, Styles for Image Shapes

Bootstrap Miscellaneous Topics
Integrating Bootstrap Components with jQuery
Identifying the Required Version of jQuery
Minimizing Bootstrap's Download Size
Using the Customizer
Customizer Page Fragment
Compiling and Downloading Customized Bootstrap
Customizing Bootstrap Components
Light Customization Steps

UI Bootstrap Overview
What is UI Bootstrap?
UI Bootstrap Directives, Project Philosophy
The Angular UI Bootstrap Modules
Getting UI Bootstrap, The Direct Download,
What are the -tpls- Files? Understanding Templates
Picking and Choosing Your Modules (1/2) and (2/2)
Basic UI Bootstrap HTML Page
Referencing Angular UI Bootstrap Modules
Adding Component Prefixes in Release 0.14.0