O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

AngularJS UI Development

Book Description

Design, build, and test production-ready applications in AngularJS

In Detail

AngularJS and its rich set of components solve many of the problems developers face when writing reliable single page applications in ways that would not be possible using other frameworks. This book will help you expand your horizons by teaching you the skills needed to successfully design, customize, build, and deliver real-world applications in AngularJS. We will start off by setting up a fully automated environment to quickly scaffold, test, and deploy any application. Along the way, we'll cover how to design and build production-ready applications to demonstrate how innovative and powerful AngularJS is. By leveraging CSS3 animations, we'll convert them into intuitive and native-like applications in no time. You will also learn how to use Grunt for application-specific task management, Bower to manage dependencies with external libraries/plugins, Git for better versioning, and Karma and Protractor for automated testing to build applications the way experts do.

You will learn all this by building real-world applications including a to-do application, Github dashboard, project management application, and many more.

What You Will Learn

  • Use responsive layouts and powerful CSS3 frameworks such as Twitter Bootstrap and Foundation to design a mobile-friendly version of your application
  • Solve common UI problems with the AngularUI companion suite
  • Make your application dynamic with the integration of RESTful APIs in AngularJS
  • Get an overview of CSS-responsive frameworks, various UI widgets, and Angular internals to fuel your decisions for your next venture
  • Create animations, from fading elements in and out to more complex behavior

Table of Contents

  1. AngularJS UI Development
    1. Table of Contents
    2. AngularJS UI Development
    3. Credits
    4. About the Authors
    5. About the Reviewers
    6. www.PacktPub.com
      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. Setting Up the Environment
      1. Hello World
        1. Using objects instead of primitives
        2. Building our first directive
      2. Installing Node.js and NPM
        1. OS X
        2. Windows
        3. Linux (Ubuntu)
      3. Managing client-side dependencies with Bower
      4. Testing the Hello World application
        1. Unit tests
        2. Installing Karma and Jasmine
        3. Integration / end-to-end tests with Protractor
      5. Building the application
        1. Running Protractor from Grunt
      6. Managing the source code with Git
      7. Summary
    9. 2. AngularUI – Introduction and Utils
      1. Downloading AngularUI
      2. Building AngularUI-Utils
      3. Integrating AngularUI-Utils into our project
      4. uiMask directive
      5. Event Binder
      6. Keypress
      7. jQuery Passthrough
      8. Summary
    10. 3. AngularUI – Extended
      1. Embedding Google Maps
        1. Markers on the map
        2. Event Binding
      2. Managing application dependencies with Bower
        1. Modifying the .gitignore file
      3. The calendar component
        1. Using a filter for date formatting
        2. Styling the calendar
        3. Adapting the controller
        4. Adding tests
          1. Testing the controller
          2. Testing the filter
        5. Building the application
      4. Summary
    11. 4. Customizing and Exploring ng-grid
      1. Setting up the project
      2. Creating a service in AngularJS
      3. The simple grid view
      4. Grouping the grid
      5. Using a master/details view
      6. Summary
    12. 5. Learning Animation
      1. Setting up the project
      2. Creating our first animation – a simple to-do list
      3. Moving elements around on the page
        1. Easing functions
      4. Using LESS to scale entire animations
      5. Using animate.css
      6. Staggering animations
        1. Understanding how staggering works
      7. JavaScript-defined animations
      8. Summary
    13. 6. Using Charts and Data-driven Graphics
      1. Understanding the importance of charts
        1. Creating a bar chart
      2. Making the bar chart data driven
      3. Converting the bar chart into a widget
        1. Creating a bar-chart directive
      4. Using Angular Google chart tools
      5. Building a dashboard using the GitHub REST API
        1. Extending the dashboard
      6. Summary
    14. 7. Customizing AngularJS with CSS and CSS Frameworks
      1. The evolution of responsive design
      2. Introducing media queries
        1. @media
        2. The @media expression
      3. Better designs with Twitter Bootstrap
      4. The foundation of your application
      5. Summary
    15. 8. AngularUI Bootstrap Development
      1. Why use AngularUI Bootstrap?
        1. Building a Project Management Application
        2. Creating accordion
        3. Creating tabs
        4. Hiding less relevant content with collapse
        5. Setting timelines with datepicker
        6. Utilizing buttons
        7. Converting priorities in the form of ratings
        8. Notifying users with alert messages
        9. Using carousel
        10. A progress bar to show the status of an issue
      2. Efficient suggestions with typeahead
      3. Common housing for application-specific menus with a dropdown
      4. Summary
    16. 9. Customizing AngularUI Bootstrap
      1. Introduction to external templates
        1. Loading a template via the script tag
        2. Loading a template via $templateCache
        3. Using an external template
      2. Customizing the AngularUI Bootstrap pagination widget
      3. Extending the AngularUI Bootstrap tab widget
      4. Summary
    17. 10. Mobile Development Using AngularJS and Bootstrap
      1. Why bother about mobile?
      2. Building a bookmarking app with the mobile-first approach
        1. Making the application dynamic
        2. Allowing users to search through bookmarks
        3. Crafting the application for mobile devices
        4. Animation for better user experience
      3. Mobile optimization for a better user experience
        1. Periodic delay for tap events
        2. Accelerated transitions and animations
          1. Improving initial page load
      4. Summary
    18. Index