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
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
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.
