Home Page Icon
Home Page
Table of Contents for
Table of Contents
Close
Table of Contents
by Pawel Kozlowski, Peter Bacon Darwin
Mastering Web Application Development with AngularJS
Mastering Web Application Development with AngularJS
Table of Contents
Mastering Web Application Development with AngularJS
Credits
About the Authors
Acknowledgments
About the Authors
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers and more
Why Subscribe?
Free Access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Search in book...
Toggle Font Controls
Playlists
Add To
Create new playlist
Name your new playlist
Playlist description (optional)
Cancel
Create playlist
Sign In
Email address
Password
Forgot Password?
Create account
Login
or
Continue with Facebook
Continue with Google
Sign Up
Full Name
Email address
Confirm Email Address
Password
Login
Create account
or
Continue with Facebook
Continue with Google
Prev
Previous Chapter
Cover
Next
Next Chapter
Mastering Web Application Development with AngularJS
Table of Contents
Mastering Web Application Development with AngularJS
Credits
About the Authors
Acknowledgments
About the Authors
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers and more
Why Subscribe?
Free Access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. Angular Zen
Meet AngularJS
Getting familiar with the framework
Finding your way in the project
The community
Online learning resources
Libraries and extensions
Tools
Batarang
Plunker and jsFiddle
IDE extensions and plugins
AngularJS crash course
Hello World – the AngularJS example
Two-way data binding
The MVC pattern in AngularJS
Bird's eye view
Scope
Controller
Model
Scopes in depth
Hierarchy of scopes
Scopes hierarchy and inheritance
Perils of the inheritance through the scopes hierarchy
Hierarchy of scopes and the eventing system
Scopes lifecycle
View
Declarative template view – the imperative controller logic
Modules and dependency injection
Modules in AngularJS
Collaborating objects
Dependency injection
Benefits of dependency injection
Registering services
Values
Services
Factories
Constants
Providers
Modules lifecycle
The configuration phase
The run phase
Different phases and different registration methods
Modules depending on other modules
Services and their visibility across modules
Why use AngularJS modules
AngularJS and the rest of the world
jQuery and AngularJS
Apples and oranges
A sneak peek into the future
Summary
2. Building and Testing
Introducing the sample application
Getting familiar with the problem domain
Technical stack
Persistence store
MongoLab
Server-side environment
Third-party JavaScript libraries
Bootstrap CSS
Build system
Build system principles
Automate everything
Fail fast, fail clean
Different workflows, different commands
Build scripts are code too
Tools
Grunt.js
Testing libraries and tools
Jasmine
Karma runner
Organizing files and folders
Root folders
Inside the source folder
AngularJS specific files
Start simple
Controllers and partials evolve together
Inside the test folder
File-naming conventions
AngularJS modules and files
One file, one module
Inside a module
Different syntax for registering providers
Syntax for declaring the configure and run blocks
Automated testing
Unit tests
Anatomy of a Jasmine test
Testing AngularJS objects
Testing services
Testing controllers
Mock objects and asynchronous code testing
End-to-end tests
Daily workflow
Karma runner tips and tricks
Executing a subset of tests
Debugging
Summary
3. Communicating with a Back-end Server
Making XHR and JSONP requests with $http
Getting familiar with the data model and MongoLab URLs
$http APIs quick tour
The configuration object primer
Request data conversion
Dealing with HTTP responses
Response data conversion
Dealing with same-origin policy restrictions
Overcoming same-origin policy restrictions with JSONP
JSONP limitations
Overcoming same-origin policy restrictions with CORS
Server-side proxies
The promise API with $q
Working with promises and the $q service
Learning $q service basics
Promises are first-class JavaScript objects
Aggregating callbacks
Registering callbacks and the promise lifecycle
Asynchronous action chaining
More on $q
Aggregating promises
Wrapping values as promises
$q integration in AngularJS
The promise API with $http
Communicating with RESTful endpoints
The $resource service
Constructor-level and instance-level methods
Constructor-level methods
Instance level methods
Custom methods
Adding behavior to resource objects
$resource creates asynchronous methods
Limitations of the $resource service
Custom REST adapters with $http
Using advanced features of $http
Intercepting responses
Testing code that interacts with $http
Summary
4. Displaying and Formatting Data
Referencing directives
Displaying results of expression evaluation
The interpolation directive
Rendering model values with ngBind
HTML content in AngularJS expressions
Conditional display
Including blocks of content conditionally
Rendering collections with the ngRepeat directive
Getting familiar with the ngRepeat directive
Special variables
Iterating over an object's properties
ngRepeat patterns
Lists and details
Displaying only one row with details
Displaying many rows with details
Altering tables, rows, and classes
DOM event handlers
Working effectively with DOM-based templates
Living with verbose syntax
ngRepeat and multiple DOM elements
Elements and attributes that can't be modified at runtime
Custom HTML elements and older versions of IE
Handling model transformations with filters
Working with built-in filters
Formatting filters
Array-transforming filters
Filtering with the "filter" filter
Counting filtered results
Sorting with the orderBy filter
Writing custom filters – a pagination example
Accessing filters from the JavaScript code
Filters dos and don'ts
Filters and DOM manipulation
Costly data transformations in filters
Unstable filters
Summary
5. Creating Advanced Forms
Comparing traditional forms with AngularJS forms
Introducing the ngModel directive
Creating a User Information Form
Understanding the input directives
Adding the required validation
Using text-based inputs (text, textarea, e-mail, URL, number)
Using checkbox inputs
Using radio inputs
Using select inputs
Providing simple string options
Providing dynamic options with the ngOptions directive
Common examples of ngOptions
Using array data sources
Using object data sources
Understanding the dataSource expression
Understanding the optionBinding expression
Using empty options with the select directive
Understanding select and object equivalence
Selecting multiple options
Working with traditional HTML hidden input fields
Embedding values from the server
Submitting a traditional HTML form
Looking inside ngModel data binding
Understanding ngModelController
Transforming the value between the model and the view
Tracking whether the value has changed
Tracking input field validity
Validating AngularJS forms
Understanding ngFormController
Using the name attribute to attach forms to the scope
Adding dynamic behavior to the User Information Form
Showing validation errors
Disabling the save button
Disabling native browser validation
Nesting forms in other forms
Using subforms as reusable components
Repeating subforms
Validating repeated inputs
Handling traditional HTML form submission
Submitting forms directly to the server
Handling form submission events
Using ngSubmit to handle form submission
Using ngClick to handle form submission
Resetting the User Info form
Summary
6. Organizing Navigation
URLs in single-page web applications
Hashbang URLs in the pre-HTML5 era
HTML5 and the history API
Using the $location service
Understanding the $location service API and URLs
Hashes, navigation within a page, and $anchorScroll
Configuring the HTML5 mode for URLs
Client side
Server side
Handcrafting navigation using the $location service
Structuring pages around routes
Mapping routes to URLs
Defining controllers in route partials
The missing bits in the handcrafted navigation
Using built-in AngularJS routing services
Basic routes definition
Displaying the matched route's content
Matching flexible routes
Defining default routes
Accessing route parameter values
Reusing partials with different controllers
Avoiding UI flickering on route changes
Preventing route changes
Limitations of the $route service
One route corresponds to one rectangle on the screen
Handling multiple UI rectangles with ng-include
No nested routes support
Routing-specific patterns, tips, and tricks
Handling links
Creating clickable links
Working with HTML5 and hashbang mode links consistently
Linking to external pages
Organizing route definitions
Spreading route definitions among several modules
Fighting code duplication in route definitions
Summary
7. Securing Your Application
Providing server-side authentication and authorization
Handling unauthorized access
Providing a server-side authentication API
Securing partial templates
Stopping malicious attacks
Preventing cookie snooping (man-in-the-middle attacks)
Preventing cross-site scripting attacks
Securing HTML content in AngularJS expressions
Allowing unsafe HTML bindings
Sanitizing HTML
Preventing the JSON injection vulnerability
Preventing cross-site request forgery
Adding client-side security support
Creating a security service
Showing a login form
Creating security-aware menus and toolbars
Hiding the menu items
Creating a login toolbar
Supporting authentication and authorization on the client
Handling authorization failures
Intercepting responses
HTTP response interceptors
Creating a securityInterceptor service
Creating the securityRetryQueue service
Notifying the security service
Preventing navigation to secure routes
Using route resolve functions
Creating the authorization service
Summary
8. Building Your Own Directives
What are AngularJS directives?
Understanding the built-in directives
Using directives in the HTML markup
Following the directive compilation life-cycle
Writing unit tests for directives
Defining a directive
Styling buttons with directives
Writing a button directive
Understanding AngularJS widget directives
Writing a pagination directive
Writing tests for the pagination directive
Using an HTML template in a directive
Isolating our directive from its parent scope
Interpolating the attribute with @
Binding data to the attribute with =
Providing a callback expression in the attribute with &
Implementing the widget
Adding a selectPage callback to the directive
Creating a custom validation directive
Requiring a directive controller
Making the controller optional
Searching for parents for the controller
Working with ngModelController
Writing custom validation directive tests
Implementing a custom validation directive
Creating an asynchronous model validator
Mocking up the Users service
Writing tests for asynchronous validation
Implementing the asynchronous validation directive
Wrapping the jQueryUI datepicker directive
Writing tests for directives that wrap libraries
Implementing the jQuery datepicker directive
Summary
9. Building Advanced Directives
Using transclusion
Using transclusion in directives
Transcluding into an isolated scope directive
Creating an alert directive that uses transclusion
Understanding the replace property in the directive definition
Understanding the transclude property in the directive definition
Inserting the transcluded elements with ng-transclude
Understanding the scope of transclusion
Creating and working with transclusion functions
Creating a transclusion function with the $compile service
Cloning the original elements when transcluding
Accessing transclusion functions in directives
Getting the transclusion function in the compile function with transcludeFn
Getting the transclusion function in the directive controller with $transclude
Creating an if directive that uses transclusion
Using the priority property in a directive
Understanding directive controllers
Injecting special dependencies into directive controllers
Creating a controller-based pagination directive
Understanding the difference between directive controllers and link functions
Injecting dependencies
The compilation process
Accessing other controllers
Accessing the transclusion function
Creating an accordion directive suite
Using a directive controller in accordion
Implementing the accordion directive
Implementing the accordion-group directive
Taking control of the compilation process
Creating a field directive
Using the terminal property in directives
Using the $interpolate service
Binding to validation messages
Loading templates dynamically
Setting up the field template
Summary
10. Building AngularJS Web Applications for an International Audience
Using locale-specific symbols and settings
Configuring locale-specific modules
Making use of available locale settings
Locale-specific settings and AngularJS filters
Date filter
Currency filter
Number filter
Handling translations
Handling translated strings used in AngularJS templates
Using filters
Using directives
Translating partials during the build-time
Handling translated strings used in the JavaScript code
Patterns, tips, and tricks
Initializing applications for a given locale
Consequences of including locales as part of URLs
Switching locales
Custom formatting for dates, numbers, and currencies
Summary
11. Writing Robust AngularJS Web Applications
Understanding the inner workings of AngularJS
It is not a string-based template engine
Updating models in response to DOM events
Propagating model changes to the DOM
Synchronizing DOM and model
Scope.$apply – a key to the AngularJS world
Enter the $digest loop
Anatomy of a $watch
Model stability
Unstable models
$digest loop and a hierarchy of scopes
Putting it all together
Performance tuning – set expectations, measure, tune, and repeat
Performance tuning of AngularJS applications
Optimizing CPU utilization
Speeding up $digest loops
Keeping watches slim and fast
Avoid DOM access in the watch-expression
Limit the number of watches to be evaluated
Remove unnecessary watches
Think about your UI
Don't watch for invisible
Call Scope.$digest instead of calling Scope.$apply when you know impacted scopes
Remove unused watches
Entering the $digest loop less frequently
Limit the number of turns per $digest loop
Optimizing memory consumption
Avoid deep-watching whenever possible
Consider the size of expressions being watched
The ng-repeat directive
Collection watching in ng-repeat
Many bindings made easy
Summary
12. Packaging and Deploying AngularJS Web Applications
Improving network-related performance
Minifying static resources
How does AngularJS infer dependencies?
Writing minification-safe JavaScript code
Modules
Providers
Directives
The pitfalls of array-style DI annotations
Preloading templates
Using the <script> directive to preload templates
Filling in the $templateCache service
Combining different preloading techniques
Optimizing the landing page
Avoid displaying templates in their unprocessed form
Hiding portions of the DOM with ng-cloak
Hiding individual expressions with ng-bind
Including AngularJS and application scripts
Referencing scripts
AngularJS and Asynchronous Module Definition
Supported browsers
Working with Internet Explorer
Summary
Index
Add Highlight
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click
here
login for view all page.
Day Mode
Cloud Mode
Night Mode
Reset