AngularJS, JavaScript, and jQuery All in One, Sams Teach Yourself / Edition 1

by Brad Dayley, Brendan Dayley

Overview

Learn AngularJS, JavaScript and jQuery Web Application Development In just a short time, you can learn the basics of the JavaScript language, jQuery library, and AngularJS framework – and find out how to use them to build well-designed, reusable components for web applications. Sams Teach Yourself AngularJS, JavaScript, and jQuery All in One assumes absolutely no previous knowledge of JavaScript or jQuery. The authors begin by helping students gain the relevant JavaScript skills they need, introducing JavaScript in a way specifically designed for modern AngularJS web development. Each short, easy lesson builds on all that's come before, teaching new concepts and techniques from the ground up, through practical examples and hands-on problem solving. As you complete the lessons in this book, you'll gain a practical understanding of how to provide rich user interactions in your web pages, adding dynamic code that allows web pages to instantly react to mouse clicks and finger swipes, and interact with back-end services to store and retrieve data from the web server. Learn how to:

• Create powerful, highly interactive single-page web applications
• Leverage AngularJS’s innovative MVC approach to web development
• Use JavaScript in modern frameworks
• Implement JavaScript, jQuery, and AngularJS together in web pages
• Dynamically modify page elements in the browser
• Use browser events to interact with the user directly
• Implement client-side services that interact with web servers
• Integrate rich user interface components, including zoomable images and expandable lists
• Enhance user experience by creating AngularJS templates with built-in directives
• Bind user interface elements and events to the data model to add flexibility and support more robust interactivity
• Define custom AngularJS directives to extend HTML’s capabilities
• Build dynamic browser views to provide richer user interaction
• Create custom services you can integrate into many AngularJS applications
• Develop a well-structured code base that’s easy to reuse and maintain

Contents at a Glance Part I: An Introduction to AngularJS, jQuery, and JavaScript Development 1 Introduction to Dynamic Web Programming 2 Debugging JavaScript in Web Pages 3 Understanding Dynamic Web Page Anatomy 4 Adding CSS/CSS3 Styles to Allow Dynamic Design and Layout 5 Jumping into jQuery and JavaScript Syntax 6 Understanding and Using JavaScript Objects Part II: Implementing jQuery and JavaScript in Web Pages 7 Accessing DOM Elements Using JavaScript and jQuery Objects 8 Navigating and Manipulating jQuery Objects and DOM Elements with jQuery 9 Applying JavaScript and jQuery Events for Richly Interactive Web Pages 10 Dynamically Accessing and Manipulating Web Pages with JavaScript and jQuery 11 Working with Window, Browser, and Other Non-Web Page Elements Part III: Building Richly Interactive Web Pages with jQuery 12 Enhancing User Interaction Through jQuery Animation and Other Special Effects 13 Interacting with Web Forms in jQuery and JavaScript 14 Creating Advanced Web Page Elements in jQuery 15 Accessing Server-Side Data via JavaScript and jQuery AJAX Requests Part IV: Utilizing jQuery UI 16 Introducing jQuery UI 17 Using jQuery UI Effects 18 Advanced Interactions With jQuery UI Interaction Widgets 19 Using jQuery UI Widgets to Add Rich Interactions to Web Pages Part V: Building Web Applications with AngularJS 20 Getting Started with AngularJS 21 Understanding AngularJS Application Dynamics 22 Implementing the Scope as a Data Model 23 Using AngularJS Templates to Create Views 24 Implementing Directives in AngularJS Views 25 Creating Your Own Custom Directives to Extend HTML 26 Using Events to Interact with Data in the Model 27 Implementing AngularJS Services in Web Applications 28 Creating Your Own Custom AngularJS Services 29 Creating Rich Web Application Components the AngularJS Way

Product Details

ISBN-13:	9780672337420
Publisher:	Pearson Education
Publication date:	08/05/2015
Series:	Sams Teach Yourself
Edition description:	Reprint
Pages:	832
Sales rank:	1,047,514
Product dimensions:	7.00(w) x 8.90(h) x 1.30(d)

About the Author

Brad Dayley is a senior software engineer with more than 20 years of experience developing enterprise applications and web interfaces. He has used JavaScript, jQuery, and AngularJS to develop a wide array of feature-rich web applications. He has a passion for new technologies, especially ones that really make a difference in the software industry. He is the author of Node.js, MongoDB, and AngularJS Web Development, Learning AngularJS, jQuery, and JavaScript Phrasebook, and Sams Teach Yourself jQuery and JavaScript in 24 Hours.

Brendan Dayley is a university student majoring in computer science. He is an avid web application developer who loves learning and implementing the latest and greatest technologies. He recently attended Dev-Mountain’s Immersive Web Development program, specializing in web application development and AngularJS in particular. He has written a number of web applications using JavaScript, jQuery, and AngularJS and is excited about the future of these technologies.

Table of Contents

Part I: Introduction to AngularJS, jQuery, and JavaScript Development

Lesson 1: Introduction to Dynamic Web Programming

Understanding the Web Server/Browser Paradigm
Setting Up a Web Development Environment

Lesson 2: Debugging JavaScript in Web Pages

Viewing the Developer Tools Console

Debugging HTML Elements

Debugging CSS

Debugging JavaScript

Analyzing the Network Traffic

Lesson 3: Understanding Dynamic Web Page Anatomy

Using HTML/HTML5 Elements to Build a Dynamic Web Page

Understanding HTML Structure

Implementing HTML Head Elements

Adding HTML Body Elements

Adding Some Advanced HTML5 Elements

Lesson 4: Adding CSS/CSS3 Styles to Allow Dynamic Design and Layout

Adding CSS Styles to the Web Page

Adding CSS Styles to HTML Elements

Preparing CSS Styles for Dynamic Design

Lesson 5: Jumping into jQuery and JavaScript Syntax

Adding jQuery and JavaScript to a Web Page

Accessing the DOM

Understanding JavaScript Syntax

Lesson 6: Understanding and Using JavaScript Objects

Using Object Syntax

Understanding Built-in Objects

Creating Custom-Defined Objects

Part II: Implementing jQuery and JavaScript in Web Pages

Lesson 7: Accessing DOM Elements Using JavaScript and jQuery Objects

Understanding DOM Objects Versus jQuery Objects

Accessing DOM Objects from JavaScript

Using jQuery Selectors

Lesson 8: Navigating and Manipulating jQuery Objects and DOM Elements with jQuery

Chaining jQuery Object Operations

Filtering the jQuery Object Results

Traversing the DOM Using jQuery Objects

Looking at Some Additional jQuery Object Methods

Lesson 9: Applying JavaScript and jQuery Events for Richly Interactive Web Pages

Understanding Events
Using the Page Load Events for InitializationAdding and Removing Event Handlers to DOM Elements
Triggering Events Manually
Creating Custom Events

Implementing Callbacks

Lesson 10: Dynamically Accessing and Manipulating Web Pages with JavaScript and jQuery

Accessing Browser and Page Element Values

Dynamically Manipulating Page Elements

Dynamically Rearranging Elements on the Web Page

Lesson 11: Working with Window, Browser, and Other Non-Web Page Elements

Understanding the Screen Object

Using the Window Object

Using the Browser Location Object

Using the Browser History Object7

Controlling External Links

Adding Pop-up Boxes

Setting Timers

Part III: Building Richly Interactive Web Pages with jQuery

Lesson 12: Enhancing User Interaction Through jQuery Animation and Other Special Effects

Understanding jQuery Animation

Animating Show and Hide

Animating Visibility

Sliding Elements

Creating Resize Animations

Implementing Moving Elements

Lesson 13: Interacting with Web Forms in jQuery and JavaScript

Accessing Form Elements

Intelligent Form Flow Control

Dynamically Controlling Form Element Appearance and Behavior

Validating a Form

Lesson 14: Creating Advanced Web Page Elements in jQuery

Adding an Image Gallery

Implementing Tables with Sorting and Filters

Creating a Tree View

Using Overlay Dialogs

Implementing a Graphical Equalizer Display

Adding Sparkline Graphics

Lesson 15: Accessing Server-Side Data via JavaScript and jQuery AJAX Requests

Making AJAX Easy

Implementing AJAX

Using Advanced jQuery AJAX

Part IV: Utilizing jQuery UI

Lesson 16: Introducing jQuery UI

Getting Started with jQuery UI

Applying jQuery UI in Your Scripts

Lesson 17: Using jQuery UI Effects

Applying jQuery UI Effects

Adding Effects to Class Transitions

Adding Effects to Element Visibility Transitions

Lesson 18: Advanced Interactions Using jQuery UI Interaction Widgets

Introducing jQuery UI Interactions

Using the Drag-and-Drop Widgets

Resizing Elements Using the Resizable Widget

Applying the Selectable Widget

Sorting Elements with the Sortable Widget

Lesson 19: Using jQuery UI Widgets to Add Rich Interactions to Web Pages

Reviewing Widgets

Adding an Expandable Accordion Element

Implementing Autocomplete in Form Elements

Applying jQuery UI Buttons to Form Controls

Creating a Calendar Input

Generating Stylized Dialogs with jQuery UI

Implementing Stylized Menus

Creating Progress Bars

Implementing Slider Bars

Adding a Value Spinner Element

Creating Tabbed Panels

Adding Tooltips to Page Elements

Creating Custom Widgets

Part V: Building Web Applications with AngularJS

Lesson 20: Getting Started with AngularJS

Why AngularJS?

Understanding AngularJS

An Overview of the AngularJS Life Cycle

Separation of Responsibilities

Integrating AngularJS with Existing JavaScript and jQuery

Adding AngularJS to Your Environment

Bootstrapping AngularJS in an HTML Document

Using the Global APIs

Using jQuery or jQuery Lite in AngularJS Applications

Lesson 21: Understanding AngularJS Application Dynamics

Looking at Modules and Dependency Injection

Defining an AngularJS Module Object

Creating Providers in AngularJS Modules

Implementing Providers and Dependency Injection

Applying Configuration and Run Blocks to Modules

Lesson 22: Implementing the Scope as a Data Model

Understanding Scopes

Implementing Scope Hierarchy

Lesson 23: Using AngularJS Templates to Create Views

Understanding Templates

Using Expressions

Using Filters

Creating Custom Filters

Lesson 24: Implementing Directives in AngularJS Views

Understanding Directives

Using Built-In Directives

Lesson 25: Creating Your Own Custom Directives to Extend HTML

Understanding Custom Directive Definitions

Implementing Custom Directives

Lesson 26: Using Events to Interact with Data in the Model

Browser Events

User Interaction Events

Adding $watches to Track Scope Change Events

Emitting and Broadcasting Custom Events

Lesson 27: Implementing AngularJS Services in Web Applications

Understanding AngularJS Services

Using the Built-In Services

Using the $q Service to Provide Deferred Responses

Lesson 28: Creating Your Own Custom AngularJS Services

Understanding Custom AngularJS Services

Integrating Custom Services into Your AngularJS Applications

Lesson 29: Creating Rich Web Application Components the AngularJS Way