Introduction To Responsive Web Development With AngularJS And Bootstrap

loading..
(Course eligible for SATVs)

loading..

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.

 

HOT SEAT DEAL: Enrol in the 1-4 April Online Live course and save 50% + materials. Use Promo Code BIGDEAL and enrol for only $2,567. Offer ends 31 March or until sold out. 

  • 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
  • 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
  • Lifecycle 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
  • 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
  • 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
  • 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
  • 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
  • Summary

  • 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
  • Summary

  • 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
  • Summary

  • 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
  • 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
  • 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?
  • 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
  • Summary

  • 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 Feature Used in Media Queries
  • Combining Responsive Design Techniques
  • Testing Responsive Design
  • Summary

  • 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
  • The Simple Fluid Layout 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
  • Summary

  • 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
  • Sencha.io Src Diagram
  • How it works
  • Sencha.io Src API
  • Sencha.io Src API Details
  • Examples of Sencha.io Src API
  • Rolling out your own cloud image manipulation service
  • The picture element
  • Using Picturefill
  • Summary

  • What is Bootstrap
  • Keywords from bower.js
  • Bootstrap History
  • Responsive Web Development
  • Responsive 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
  • Summary

  • 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
  • Customising 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)
  • Customising Breakpoints
  • Responsive Grid Layout
  • Combining Column Styles
  • Other Column Operations
  • Navigation
  • Navigation (Desktop)
  • Navigation (Mobile)
  • Navigation Source
  • Navigation Explained
  • Navigation Elements and Styles
  • Glyphicons
  • Using
  • Glyphicons
  • Responsive Images
  • Styles for Image Shapes
  • Summary

After completing this module, students will be able to:

  • 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
  • Summary

  • 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)
  • Picking and Choosing Your Modules (2/2)
  • Basic UI Bootstrap HTML Page
  • Referencing Angular UI Bootstrap Modules
  • Adding Component Prefixes in Release 0.14.0
  • Summary

  • UI Bootstrap Directives
  • Directive Inter-dependencies
  • Where to Get Help
  • Plunker
  • The Alert Directive
  • Carousel
  • Datepicker
  • Dropdown
  • Pagination
  • The Pagination Code
  • Progress Bar
  • Tabs
  • Summary

  • Lab 1. Setting Up the Lab Environment
  • Lab 2. Objects in JavaScript
  • Lab 3. Getting Started with AngularJS
  • Lab 4. MVC with AngularJS
  • Lab 5. AngularJS Expressions
  • Lab 6. Working with Class and Style Directives
  • Lab 7. The ng-repeat Directive
  • Lab 8. Working with Form Inputs
  • Lab 9. Data Formatting with Filters
  • Lab 10. Using the $watch Function
  • Lab 11. Communicating with Web Servers
  • Lab 12. Reading Complex Data Sets From Web Servers
  • Lab 13. Custom Directives
  • Lab 14. Creating and Using Services
  • Lab 15. Intro to CSS3
  • Lab 16. Applying Basic Styles
  • Lab 17. Control Element Spacing with Box Properties
  • Lab 18. Media Queries and Responsive Design
  • Lab 19. Understanding Bootstrap’s Grid System
  • Lab 20. Understanding Bootstrap’s Navbar Component
  • Lab 21. Using jQuery in Bootstrap
  • Lab 22. Understanding UI Bootstrap Lab Files
  • Lab 23. Customizing UI Bootstrap Templates
  • Lab 24. Using UI Bootstrap Directives

Before attending this course, students must have:

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

After completing this course, students will be able to:

Register

Traditional Classroom   

    Show all

    Traditional Classroom   

      Show all

      Traditional Classroom   

        Show all

        Traditional Classroom   

          Show all

          OnlineLive   

            Show all

            Connected Classroom   

              Show all

              Flexible Mentored Learning   

                Show all

                Flexible Mentored Learning   

                  Show all

                  Flexible Mentored Learning   

                    Show all

                    Flexible Mentored Learning   

                      Show all

                      Not currently scheduled

                      Fast track the availability of this course.
                      Add to watch list or call 1300 794 006.

                      Need your team upskilled?
                      Request a Quote

                      blah is false
                      top