Cover image for Mastering Web Application Development with AngularJS

Mastering Web Application Development with AngularJS

Author Pawel Kozlowski , Peter Bacon Darwin
Release Date: 2013/08/01
ISBN: 9781782161820
Topic:
0%
92
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Streamline your web applications with this hands-on course. From initial structuring to full deployment, you’ll learn everything you need to know about AngularJS DOM based frameworks.

  • Make the most out of AngularJS by understanding the AngularJS philosophy and applying it to real life development tasks
  • Effectively structure, write, test, and finally deploy your application
  • Add security and optimization features to your AngularJS applications
  • Harness the full power of AngularJS by creating your own directives
  • Full of solutions to real life problems, with clear explanations of the more sophisticated AngularJS concepts

In Detail

AngularJS is an open-source JavaScript framework. Its goal is to develop MVC-based web applications and reduce the amount of JavaScript needed to make web applications functional.

The book will take the reader through the workflow of building an AngularJS app.

Throughout the process of app creation, we will have a look at the different interaction points between design and development and the readers will learn how AngularJS helps both roles to build an application that works well, as well as how to create clean and maintainable front end markup and code.

Table of Contents

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