Free Sample
+ Collection

AngularJS UI Development

Amit Gharat, Matthias Nehlsen

Design, build, and test production-ready applications in AngularJS
RRP $26.99
RRP $44.99
Print + eBook

Want this title & more?

$12.99 p/month

Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Book Details

ISBN 139781783288472
Paperback258 pages

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
Chapter 2: AngularUI – Introduction and Utils
Downloading AngularUI
Building AngularUI-Utils
Integrating AngularUI-Utils into our project
uiMask directive
Event Binder
jQuery Passthrough
Chapter 3: AngularUI – Extended
Embedding Google Maps
Managing application dependencies with Bower
The calendar component
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
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
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
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
Chapter 8: AngularUI Bootstrap Development
Why use AngularUI Bootstrap?
Efficient suggestions with typeahead
Common housing for application-specific menus with a dropdown
Chapter 9: Customizing AngularUI Bootstrap
Introduction to external templates
Customizing the AngularUI Bootstrap pagination widget
Extending the AngularUI Bootstrap tab widget
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

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.


Read More