AngularJS Training: Introduction to Responsive Web Development with AngularJS and Bootstrap BSP-2406 Length: 4 days Price: $ 2,395.

Transcription

1 Course Page - Page 1 of 11 AngularJS Training: Introduction to Responsive Web Development with AngularJS and Bootstrap BSP-2406 Length: 4 days Price: $ 2, Course Description 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. Course Audience Attendees should have some prior understanding of web development, HTML, AJAX, and JavaScript. Course Outline CHAPTER 1. ADVANCED OBJECTS AND FUNCTIONALITY IN JAVASCRIPT Basic Objects Constructor Function More on the Constructor Function Object Properties Deleting a Property The instance of Operator Object Properties Constructor and Instance Objects Constructor Level Properties Namespace Functions are First-Class Objects

2 Course Page - Page 2 of 11 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 has Own Property Method CHAPTER 2. 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 CHAPTER 3. ANGULARJS MODULE 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

3 Course Page - Page 3 of 11 CHAPTER 4. 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 Another Example for Event Handling Storing Model in Instance Property CHAPTER 5. 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 CHAPTER 6. 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 CHAPTER 7. ADVANCED VIEW DIRECTIVES The ng-repeat Directive Example Use of ng-repeat Dynamically Adding Items

4 Course Page - Page 4 of 11 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 CHAPTER 8. 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 CHAPTER 9. FORMATTING DATA WITH FILTERS IN ANGULARJS 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 CHAPTER 10. ANGULARJS $WATCH SCOPE FUNCTION The $watch Function The $watch Function Signature

5 Course Page - Page 5 of 11 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 CHAPTER 11. COMMUNICATING WITH WEB SERVERS 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 CHAPTER 12. 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

6 Course Page - Page 6 of 11 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 CHAPTER 13. ANGULARJS SERVICES 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 CHAPTER 14. 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 CHAPTER 15. 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

7 Course Page - Page 7 of 11 CSS Cascade Order CHAPTER 16. 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 CHAPTER 17. 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 CHAPTER 18. 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

8 Course Page - Page 8 of 11 Media Features Used in Media Queries Combining Responsive Design Techniques Testing Responsive Design CHAPTER 19. 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 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 CHAPTER 20. 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 Sencha.io Src Diagram How it Works Sencha.io Src API Sencha.io Src API Details Sencha.io Src API Details Cont'd Examples of Sencha.io Src API

9 Course Page - Page 9 of 11 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? Using Picturefill CHAPTER 21. BOOTSTRAP OVERVIEW 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 Development Network Other Setup Options The Bootstrap Core Files To Min or Not to Min CHAPTER 22. 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

10 Course Page - Page 10 of 11 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 Navigation (Desktop) Navigation (Mobile) Navigation Source Navigation Explained Navigation Elements and Styles Glyphicons Using Glyphicons Responsive Images Styles for Image Shapes CHAPTER 23. 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 CHAPTER 24. 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) Picking and Choosing Your Modules (2/2) Basic UI Bootstrap HTML Page Referencing Angular UI Bootstrap Modules

11 Powered by TCPDF ( Course Page - Page 11 of 11 Adding Component Prefixes in Release CHAPTER 25. UI BOOTSTRAP DIRECTIVES LAB EXERCISES UI Bootstrap Directives Directive Inter-dependencies Where to Get Help Plunker The Alert Directive Carousel Datepicker Dropdown Pagination The Pagination Code Progress Bar Tabs Lab 1. Setting Up the Lab Environment Lab 2. JavaScript Functions Lab 3. Objects in JavaScript Lab 4. Getting Started with AngularJS Lab 5. MVC with AngularJS Lab 6. AngularJS Expressions Lab 7. Working with Class and Style Directives Lab 8. The ng-repeat Directive Lab 9. Working with Form Inputs Lab 10. Data Formatting with Filters Lab 11. Using the $watch Function Lab 12. Communicating with Web Servers Lab 13. Reading Complex Data Sets From Web Servers Lab 14. Custom Directives Lab 15. Creating and Using Services Lab 16. Testing Lab 17. Intro to CSS3 Lab 18. Applying Basic Styles Lab 19. Control Element Spacing with Box Properties Lab 20. Media Queries and Responsive Design Lab 21. Understanding Bootstrap's Grid System Lab 22. Understanding Bootstrap's Navbar Component Lab 23. Using jquery in Bootstrap Lab 24. Understanding UI Bootstrap Lab Files Lab 25. Customizing UI Bootstrap Templates Lab 26. Using UI Bootstrap Directives Available Dates Request a Course Date