Book Details

About This Book

Design and customize applications with mobile users in mind using open source CSS3 frameworks

Use polished UI components written from scratch solely in AngularJS to build real-world applications with a comprehensive, step-by-step guide

Learn using a proven workflow from setting up the environment to testing in order to be productive in writing ambitious applications

Who This Book Is For

This book is for anyone who is interested in solving UI problems with AngularJS. Working knowledge of JavaScript, HTML, and CSS is assumed.

Table of Contents

Chapter 1: Setting Up the Environment

Hello World

Installing Node.js and NPM

Managing client-side dependencies with Bower

Testing the Hello World application

Building the application

Managing the source code with Git

Summary

Chapter 2: AngularUI – Introduction and Utils

Downloading AngularUI

Building AngularUI-Utils

Integrating AngularUI-Utils into our project

uiMask directive

Event Binder

Keypress

jQuery Passthrough

Summary

Chapter 3: AngularUI – Extended

Embedding Google Maps

Managing application dependencies with Bower

The calendar component

Summary

Chapter 4: Customizing and Exploring ng-grid

Setting up the project

Creating a service in AngularJS

The simple grid view

Grouping the grid

Using a master/details view

Summary

Chapter 5: Learning Animation

Setting up the project

Creating our first animation – a simple to-do list

Moving elements around on the page

Using LESS to scale entire animations

Using animate.css

Staggering animations

JavaScript-defined animations

Summary

Chapter 6: Using Charts and Data-driven Graphics

Understanding the importance of charts

Making the bar chart data driven

Converting the bar chart into a widget

Using Angular Google chart tools

Building a dashboard using the GitHub REST API

Summary

Chapter 7: Customizing AngularJS with CSS and CSS Frameworks

The evolution of responsive design

Introducing media queries

Better designs with Twitter Bootstrap

The foundation of your application

Summary

Chapter 8: AngularUI Bootstrap Development

Why use AngularUI Bootstrap?

Efficient suggestions with typeahead

Common housing for application-specific menus with a dropdown

Summary

Chapter 9: Customizing AngularUI Bootstrap

Introduction to external templates

Customizing the AngularUI Bootstrap pagination widget

Extending the AngularUI Bootstrap tab widget

Summary

Chapter 10: Mobile Development Using AngularJS and Bootstrap

Why bother about mobile?

Building a bookmarking app with the mobile-first approach

Mobile optimization for a better user experience

Summary

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

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.

Authors

Amit Gharat

Amit Gharat is a full-stack engineer and open source contributor. He has built and made some of his personal projects open source, such as Directives, SPAs, and Chrome extensions written in AngularJS. He has an excessive urge to share his programming experiences in an easy-to-understand language through his personal blog in order to inspire and help others. When not programming, he enjoys reading, watching videos on YouTube, and watching comedy shows with his family. He has also written an article for Appliness and Sdjournal Magazine, Poland.

Matthias Nehlsen

Matthias Nehlsen is a freelance software engineer and passionate open source contributor with around 15 years of experience in Information Technology. His current focus is on web applications, and he frequently works with AngularJS. He also founded the Hamburg AngularJS Meetup. You can find his open source projects on https://github.com/matthiasn and his blog at http://matthiasnehlsen.com. You can also follow him on Twitter at @matthiasnehlsen.

Alerts & Offers

Series & Level

We understand your time is important. Uniquely amongst the major publishers, we seek to develop and publish the broadest range of learning and information products on each technology. Every Packt product delivers a specific learning pathway, broadly defined by the Series type. This structured approach enables you to select the pathway which best suits your knowledge level, learning style and task objectives.

Learning

As a new user, these step-by-step tutorial guides will give you all the practical skills necessary to become competent and efficient.

Beginner's Guide

Friendly, informal tutorials that provide a practical introduction using examples, activities, and challenges.

Essentials

Fast paced, concentrated introductions showing the quickest way to put the tool to work in the real world.

Cookbook

A collection of practical self-contained recipes that all users of the technology will find useful for building more powerful and reliable systems.

Blueprints

Guides you through the most common types of project you'll encounter, giving you end-to-end guidance on how to build your specific solution quickly and reliably.

Mastering

Take your skills to the next level with advanced tutorials that will give you confidence to master the tool's most powerful features.

Starting

Accessible to readers adopting the topic, these titles get you into the tool or technology so that you can become an effective user.

Progressing

Building on core skills you already have, these titles share solutions and expertise so you become a highly productive power user.