Overview
3 Days $3,300
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.
- Functions Defined
- Declaring Functions
- Function Arguments
- More on Function Arguments
- Return Values
- Multiple Return Values in ECMAScript 6
- Optional Default Parameter Values
- Emulating Optional Default Parameter Values
- Anonymous Function Expressions
- Functions as a Way to Create Private Scope
- Linking Functions to Page Elements
- Local and Global Variables
- Declaring Object Methods
- The arguments Parameter
- Example of Using arguments Parameter
- Summary
- Basic Objects
- Constructor Function
- More on the Constructor Function
- Object Properties
- Deleting a Property
- The instanceof Operator
- 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
- Inheritance Using Prototype
- Extending Inherited Behavior
- Enhancing Constructors
- Improving Constructor Performance
- Inheritance with Object.create
- The hasOwnProperty Method
- Summary
- 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
- Summary
- What is a Module?
- Benefits of Having Modules
- Life Cycle of a Module
- The Configuration Phase
- The Run Phase
- Module Wide Data Using Value
- Module Wide Data Using Constant
- Module Dependency
- Using Multiple Modules in a Page
- Summary
- 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
- Another Example for Event Handling
- Storing Model in Instance Property
- Summary
- 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
- Summary
- 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
- Summary
- 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
- Summary
- 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
- Summary
- What are AngularJS Filters?
- The Filter Syntax
- Angular Filters
- More 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
- Filter Performance Considerations
- Summary
- 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
- Speeding Things Up
- Summary
- The $http AngularJS Service
- The Promise Interface
- The $http Service
- $http Function Invocation
- Callback Parameters
- Request Configuration Properties
- Shortcut Methods
- Complete List of Shortcut Methods
- Using $http.get()
- Working with JSON Response
- Using $http.post()
- Combining $http POST Request Data with URL Parameters
- The then() Method of the Promise Object
- The Response Object
- Making Parallel Web Service Calls
- Combining Multiple Promises into One
- Wait for the Combined Promise
- Setting Up HTTP Request Headers
- Caching Responses
- Disabling Caching in IE9
- Setting the Request Timeout
- Unit Testing with ngMock
- Writing Unit Tests
- Summary
- What are Directives?
- Directive Usage Types
- Directive Naming Convention
- Defining a Custom Directive
- Using the Directive
- Scope of a Directive
- Isolating Scope
- Example Scope Isolation
- 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
- Summary
- Introduction to Services
- Defining a Service
- The factory() Method Approach
- The service() Method Approach
- The provider() Method Approach
- Using a Service
- Configuring a Service using its Provider
- Summary
- Introduction to Node.js
- What is Jasmine?
- Running Jasmine
- Jasmine Folder Structure
- Running Tests
- Example Explained
- End-to-End Testing with Protractor
- Writing E2E Test with Protractor
- Summary
- 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
- Summary
- 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
- Summary
- 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
- Summary
- 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
- Using HTML5Shiv for Older IE Versions
- Optional HTML5Shiv Configuration
- 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
- Summary
- 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
- Summary
- 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
- Summary
Before attending this course, students must have:
- Attendees should have some prior understanding of web development, HTML, AJAX, and JavaScript.
