Responsive Web Design with AngularJS

Book Description

Leverage the core functionalities of AngularJS, to build responsive single page applications

In Detail

AngularJS is an open source JavaScript framework, built to create dynamic web applications using HTML, JavaScript, and CSS. AngularJS has many advanced features that can be used to leverage responsive application development.

Responsive Web Design with AngularJS follows a detailed step-by-step approach to explain each key concept, with sufficient code and examples. This book will teach you how to implement dynamic routing, responsive custom directives, and breakpoints for your web page, followed by a section on debugging and testing.

By the end of the book, you will be able to develop and design exciting single page applications with AngularJS and make the applications responsive on different devices. With ample screenshots and code offering you a detailed insight, this book will ensure your success in developing responsive applications.

What You Will Learn

  • Develop client-side dynamic routing using AngularJS
  • Create a custom directive and use it for responsive page development
  • Explore the usability of AngularJS routing for responsive web application development
  • Get to grips with the basic functionality of using AngularJS to build a web application
  • Understand two-way data binding implemented in AngularJS using the digest cycle
  • Build AngularJS breakpoint listeners and arrange the page content to implement responsiveness
  • Debug AngularJS single page applications

Publisher Resources

Download Example Code

Table of Contents

  1. Responsive Web Design with AngularJS
    1. Table of Contents
    2. Responsive Web Design with AngularJS
    3. Credits
    4. About the Author
    5. About the Reviewers
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. 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
    8. 1. Introduction to Responsive Single Page Application and AngularJS
      1. Why responsive design?
      2. What is single page web application?
        1. Template
        2. Partial
        3. Router
        4. Controller
        5. Real-time communication
        6. Local storage
      3. Understanding responsive single page application
      4. What is an AngularJS framework?
      5. Exploring the features of AngularJS
        1. The AngularJS module
        2. The controller scope
        3. The AngularJS routing module
        4. The AngularJS provider
        5. Data binding
        6. AngularJS expressions
        7. Built-in directive
        8. Custom directive
      6. Role of AngularJS
        1. Using the browser sniffing approach
        2. CSS3 media queries approach
          1. Media type
          2. Media feature
      7. What are we building?
      8. Summary
    9. 2. The AngularJS Dynamic Routing-based Approach
      1. Setting up an AngularJS project
        1. Building a project's structure
        2. The SASS configuration
      2. Profile application demo
      3. Building data services
      4. Device-based routing
      5. AngularJS routing
        1. Setting up an AngularJS application
        2. Configuring a routing module
      6. Configuring a profile controller
      7. Developing a device type provider
      8. Developing a desktop view
        1. Name and profile image row
        2. Category selection row
        3. Category content
        4. Social buttons row
      9. Developing a mobile view
      10. Developing a tablet view
      11. Verifying responsiveness
      12. Limitations of dynamic routing
      13. Summary
    10. 3. The AngularJS Directive-based Approach
      1. Modifying the project structure
        1. Changes in the directory structure
        2. Changes in the routing module
        3. Changes in the profile template
      2. Directives
        1. The $window service
        2. The $watch method
        3. The event binding function
        4. The $log service
      3. Built-in directives
      4. Custom directives
      5. Responsive directives
        1. Responsive images
        2. Responsive text
        3. Responsive item lists
      6. Summary
    11. 4. The AngularJS-based Breakpoints for Layout Manipulation
      1. Page layout
        1. Layout type
      2. Breakpoints
        1. Responsive and common breakpoints
      3. AngularJS publisher and subscriber
        1. Publishing a message using $emit
        2. Publishing a message using $broadcast
        3. Subscribing to a message using $on
        4. The difference between $emit and $broadcast
        5. An example of the publish and subscribe mechanism
      4. Custom attributes
        1. Developing a custom attribute
        2. Implementing a custom attribute
      5. Summary
    12. 5. Debugging and Testing Responsive Applications
      1. Batarang
        1. Installing and configuring Batarang
        2. Using Batarang
      2. AngularJS scope inspector 0.1.2
      3. Online and offline tools
        1. Online tools
          1. The responsive design checker tool
          2. The responsive test online tool
        2. Offline tools
          1. Chrome developer emulation
          2. Opera mobile emulator
          3. FireBreak add-ons
      4. Summary
    13. Index

Product Information

  • Title: Responsive Web Design with AngularJS
  • Author(s):
  • Release date: December 2014
  • Publisher(s): Packt Publishing
  • ISBN: 9781784398422