AngularJS Web application development Cookbook

AngularJS Web application development Cookbook

By : Matthew Frisbie

Buy this Book

AngularJS Web application development Cookbook

By: Matthew Frisbie

Buy this Book

Overview of this book

Packed with easy-to-follow recipes, this practical guide will show you how to unleash the full might of the AngularJS framework. Skip straight to practical solutions and quick, functional answers to your problems without hand-holding or slogging through the basics. Avoid antipatterns and pitfalls, and squeeze the maximum amount out of the most powerful parts of the framework, from creating promise-driven applications to building an extensible event bus. Throughout, take advantage of a clear problem-solving approach that offers code samples and explanations of components you should be using in your production applications.

AngularJS Web Application Development Cookbook

Credits

About the Author

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

Maximizing AngularJS Directives

Introduction

Building a simple element directive

Working through the directive spectrum

Manipulating the DOM

Linking directives

Interfacing with a directive using isolate scope

Interaction between nested directives

Optional nested directive controllers

Directive scope inheritance

Directive templating

Isolate scope

Directive transclusion

Recursive directives

Expanding Your Toolkit with Filters and Service Types

Introduction

Using the uppercase and lowercase filters

Using the number and currency filters

Using the date filter

Debugging using the json filter

Using data filters outside the template

Using built-in search filters

Chaining filters

Creating custom data filters

Creating custom search filters

Filtering with custom comparators

Building a search filter from scratch

Building a custom search filter expression from scratch

Using service values and constants

Using service factories

Using services

Using service providers

Using service decorators

AngularJS Animations

Introduction

Creating a simple fade in/out animation

Replicating jQuery's slideUp() and slideDown() methods

Creating enter animations with ngIf

Creating leave and concurrent animations with ngView

Creating move animations with ngRepeat

Creating addClass animations with ngShow

Creating removeClass animations with ngClass

Staggering batched animations

Sculpting and Organizing your Application

Introduction

Manually bootstrapping an application

Using safe $apply

Application file and module organization

Hiding AngularJS from the user

Managing application templates

The "Controller as" syntax

Working with the Scope and Model

Introduction

Configuring and using AngularJS events

Managing $scope inheritance

Working with AngularJS forms

Working with <select> and ngOptions

Building an event bus

Testing in AngularJS

Introduction

Configuring and running your test environment in Yeoman and Grunt

Understanding Protractor

Incorporating E2E tests and Protractor in Grunt

Writing basic unit tests

Writing basic E2E tests

Setting up a simple mock backend server

Writing DAMP tests

Using the Page Object test pattern

Screaming Fast AngularJS

Introduction

Recognizing AngularJS landmines

Creating a universal watch callback

Inspecting your application's watchers

Deploying and managing $watch types efficiently

Optimizing the application using reference $watch

Optimizing the application using equality $watch

Optimizing the application using $watchCollection

Optimizing the application using $watch deregistration

Optimizing template-binding watch expressions

Optimizing the application with the compile phase in ng-repeat

Optimizing the application using track by in ng-repeat

Trimming down watched models

Promises

Introduction

Understanding and implementing a basic promise

Chaining promises and promise handlers

Implementing promise notifications

Implementing promise barriers with $q.all()

Creating promise wrappers with $q.when()

Using promises with $http

Using promises with $resource

Using promises with Restangular

Incorporating promises into native route resolves

Implementing nested ui-router resolves

What's New in AngularJS 1.3

Introduction

Using HTML5 datetime input types

Combining watchers with $watchGroup

Sanity checking with ng-strict-di

Controlling model input with ngModelOptions

Incorporating $touched and $submitted states

Cleaning up form errors with ngMessages

Trimming your watch list with lazy binding

Creating and integrating custom form validators

AngularJS Hacks

Introduction

Manipulating your application from the console

DRYing up your controllers

Using ng-bind instead of ng-cloak

Commenting JSON files

Creating custom AngularJS comments

Referencing deep properties safely using $parse

Preventing redundant parsing

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Replicating jQuery's slideUp() and slideDown() methods

jQuery provides a very useful pair of animation methods, slideUp() and slideDown(), which use JavaScript in order to accomplish the desired results. With the animation hooks provided for you by AngularJS, these animations can be accomplished with CSS.

Getting ready

Suppose that you want to slide a <div> element up and down in the following setup:

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <button ng-click="displayToggle=!displayToggle">
      Toggle Visibility
    </button>
    <div>Slide me up and down!</div>
  </div>   
</div>

(app.js)
angular.module('myApp', ['ngAnimate'])
.controller('Ctrl', function($scope) {
  $scope.displayToggle = true;
});

How to do it…

A sliding animation requires truncation of the overflowing element and a transition involving the height of the element. The following implementation utilizes ng-class:

(style.css)

.container {
  overflow...

AngularJS Web application development Cookbook

By : Matthew Frisbie

AngularJS Web application development Cookbook

By: Matthew Frisbie

Overview of this book

Related Content you might be interested in

Current Title:

AngularJS Web application development Cookbook

Replicating jQuery's slideUp() and slideDown() methods

Getting ready

How to do it…