Introduction to Responsive Web Development with AngularJS and Bootstrap Training

AngularJS has become a popular JavaScript framework for the development of "single page" Rich Internet Applications.  The AngularJS framework augments applications with the popular "model-view-controller" pattern which helps make applications easier to develop and test because there is a separation of responsibilities within the code.  Although there are many benefits to using the AngularJS framework it is fairly different than the way "typical" web applications involving JavaScript have been designed.  This training course will provide an introduction to the benefits of AngularJS so course participants can start to develop responsive applications quickly using the framework.

• 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

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

ADVANCED OBJECTS AND FUNCTIONALITY IN JAVASCRIPT

• Basic Objects
• Constructor Function
• Object Properties
• Constructor and Instance Objects
• Constructor Level Properties
• Namespace
• Functions are First-Class Objects
• Closures
• Closure Examples
• Private Variables with Closures
• Prototype
• Prototype Property Hierarchy
• Prototype Chain
• Inheritance Using Prototype
• Extending Inherited Behavior
• Enhancing Constructors
• Improving Constructor Performance

INTRODUCTION TO ANGULARJS

• Concepts
• Invoking Angular
• Client-Side Templates
• Directives

MODEL-VIEW-CONTROLLER

• Data Binding
• MVC Explained

WORKING WITH TEXT AND FORM INPUTS

• Displaying Text
• The ng-bind and ng-model Directives
• Form Inputs
• The ng-click and ng-submit Directives

WORKING WITH REPEATED ELEMENTS

• Working with Lists in Web Pages
• The ng-repeat Directive
• Understanding the $index, $first,  $middle and $last Variables

APPLYING STYLES

• Hiding and Showing Elements
• Working with CSS Classes and Styles
• Understanding the ng-style and ng-class  Directives

EXPRESSIONS

• Expressions Explained
• Supported Math, Logical and Bitwise Operations
• Limitations of Expressions

APPLICATION MODULES AND DEPENDENCY INJECTION

• Partitioning Responsibilities with Controllers
• Publishing Model Data with Scopes
• Organizing Dependencies with Modules

MISCELLANEOUS ANGULAR TOPICS

• Observing Model Changes with $watch
• Formatting Data with Filters
• The currency, date, orderBy and Other Filters

CUSTOM DIRECTIVES

• Directive API
• Directive Definition Object
• Templates
• Transclusion
• Compile and Link Functions
• Manipulating DOM Elements
• Injecting Controllers

TALKING TO WEB SERVERS

• The $http Service Explained
• Implementing the success and error Call-back Functions
• Processing Received Data
• $http Configuration Options
• Setting Request Headers

TESTING

• Unit testing using Jasmine
• End-to-End testing with Protractor

INTRODUCTION TO CSS3

• What is a Style?
• What are Cascading Style Sheets?
• CSS and the Evolution of Web Development
• 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

CSS 3 AND RESPONSIVE WEB DESIGN

• What is Responsive Web Design?
• Elements of Responsive Design
• Example of Responsive Design
• Alternatives to Responsive 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

BOOTSTRAP OVERVIEW

• Bootstrap History
• Current Status
• Responsive Web Development
• Responsiveness
• Why it Matters
• Download Bootstrap
• Contents
• How it works
• Bootstrap Content Development Network
• Using Bootstrap
• Mobile First
• Features
• LESS
• Responsive Grid Layout
• Reusable GUI Components
• JavaScript

USING BOOTSTRAP

• Including Bootstrap CSS Files
• Including Bootstrap JavaScript Files
• Viewport Meta Tags
• Example
• Layouts
• Grid
• Grid Source
• Grid Explained
• Navigation
• Navigation (Desktop)
• Navigation (Mobile)
• Navigation Source
• Navigation Explained
• Navigation Elements and Styles
• Glyphicons