Home Page Icon
Home Page
Table of Contents for
Cover
Close
Cover
by Chandermani
AngularJS by Example
AngularJS by Example
Table of Contents
AngularJS by Example
Credits
About the Author
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers, and more
Why subscribe?
Free access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. Getting Started
The basics of Model View Controller
The customary Hello Angular app (Guess the Number!)
Setting up a development server
Building Guess the Number!
The app model
The controller
The app view
Interpolation
Directives
Expressions
AngularJS bindings
Revisiting the controller
Scope
App bootstrapping
Tools
Resources
Summary
2. Building Our First App – 7 Minute Workout
What is 7 Minute Workout?
Downloading the codebase
Code organization
Organizing the JavaScript code
The 7 Minute Workout model
Adding app modules
The app controller
Dependency injection
Dependency Injection 101
Dependency injection in Angular
Handling minification
Dependency annotations
Controller implementations
Tracking the duration of an exercise using the $interval service
Verifying the implementation
Implementing exercise transitions
Using $watch to watch the models changes
Exploring $watch
Implementing transitions using $watch
Using the AngularJS Promise API for exercise transitions
The basics of promises
The 7 Minute Workout view
Image path binding with ng-src
Using ng-style with the Bootstrap progress bar
Adding start and finish pages
Understanding SPAs
View layouts for SPAs using ng-view
Defining 7 Minute Workout routes
The config/run phase and module initialization
View navigation in the controller using $location
Working with the $location service
Learning more about an exercise
Adding descriptions and video panels
Working with ng-include
Working with ng-repeat
Displaying the remaining workout time using filters
Creating a seconds-to-time filter
Understanding AngularJS filters
Implementing the secondsToTime filter
Adding the next exercise indicator using ng-if
Summary
3. More AngularJS Goodness for 7 Minute Workout
Formatting the exercise steps
Understanding ng-bind-html
Using ng-bind-html with data of the exercise steps
Tracking exercise progress with audio clips
Implementing audio support
Implementing WorkoutAudioController
Exploring the audio synchronization issue
AngularJS dirty checking and digest cycles
Summarizing our learnings
Fixing the next-up exercise's audio synchronization issue
Pausing exercises
Implementing pause/resume in WorkoutController
Adding the view fragment for pausing/resuming
Pausing/resuming overlays using mouse events
Pausing/resuming overlays with plain CSS
CSS class manipulation using ng-class
Stopping audio on pause
Using the keyboard to pause/resume exercises
Enhancing the workout video panel
Refactoring the video panel and controller
Video playback in the pop-up dialog
Integrating the ui.bootstrap modal dialog
Animations with AngularJS
AngularJS CSS animation
AngularJS JavaScript animation
Adding animation to 7 Minute Workout
Workout history tracking using Angular services
AngularJS services primer
Creating AngularJS services
Creating services with the constant and value services
Creating services using a service
Creating services with a factory service
Creating services with a provider service
Implementing workout history tracking
The WorkoutHistoryTracker service
Services and scopes
Service implementation continued...
Integrating the WorkoutHistoryTracker service with a controller
Adding the workout history view
AngularJS eventing
Enriching history tracking with AngularJS eventing
Persisting workout history in browser storage
Filtering workout history.
Filtering and ordering using ng-repeat
The filter object of AngularJS filters
The AngularJS orderBy filter
Special ng-repeat properties
Summary
4. Building Personal Trainer
The Personal Trainer app – the problem scope
Personal Trainer requirements
The Personal Trainer model
Sharing the workout model
The model as a service
The Personal Trainer layout
The Personal Trainer navigation with routes
Integrating left and top navigation
Implementing the workout and exercise list
WorkoutService as a workout and exercise repository
Exercise and workout list controllers
Exercise and workout list views
Building a workout
Building left nav
Adding the WorkoutBuilderService service
Adding exercises using exercise nav
Implementing WorkoutDetailController
Route resolving
Resolving routes not found!
Implementing WorkoutDetailController continued…
Implementing the workout builder view
AngularJS forms
AngularJS form constructs
The ng-model directive
Using ng-model with input and textarea
Using ng-model with select
Controlling model updates with ng-model-options (Angular 1.3)
ng-model – beyond data binding
Understanding NgModelController
Implementing a decimal-to-integer formatter and parser
AngularJS validation
The AngularJS model state
Workout builder validation
How validation works (pre-Angular 1.3)
How validation works (Angular 1.3)
Managing validation error messages with ng-messages (Angular 1.3)
Custom validation for an exercise count
Saving the workout
The AngularJS form directive and form validation
The FormController API
Fixing the saving of forms and validation messages
Fixing unwarranted model updates
Resetting the form
AngularJS $routeParams
Dynamically generated inputs and forms
Validating exercise duration with ng-form
Revisiting Angular scopes
Summary
5. Adding Data Persistence to Personal Trainer
AngularJS and server interactions
Setting up the persistence store
Seeding the database
$http service basics
Personal Trainer and server integration
Loading exercise and workout data
Loading exercise and workout lists from a server
Implementing the WorkoutService provider
Mapping server data to application models
Understanding promise chaining
Loading exercise and workout data from the server
Fixing workout and exercise detail pages
Creating and resolving custom promises
The $q "when" function
Fixing workout and exercise detail pages continued…
Route resolutions and promises
Performing CRUD on exercises/workouts
Fixing and creating a new workout
Cross-domain access and AngularJS
Using JSONP to make cross-domain requests
Cross-origin resource sharing
Getting started with $resource
RESTful API services
$resource basics
Understanding $resource actions
$resource action invocation
Using $resource to access exercise data
The hidden cost of hiding asynchronicity
Exercising CRUD with $resource
The $resource service with non-RESTful endpoints
Request/response interceptors
Using an interceptor to pass the API key
AngularJS request/response transformers
Handling routing failure for rejected promises
Handling workouts not found
Fixing the 7 Minute Workout app
Summary
6. Working with Directives
Directives – an introduction
Anatomy of a directive
Creating a workout-tile directive
Exploring the ng-click directive
Building a remote validation directive to validate the workout name
The remote-validator directive (for v1.3 or less)
The require directive definition
The link function
The remote-validator directive in Angular 1.3
Model update on blur
Using priority to affect the order of execution of the compile and link functions
Life cycle of a directive
The priority and multiple directives on a single element
Implementing a remote validation clues directive
Angular $compile service
Directive controller function
Inter-directive communication – integrating busy-indicator and remote-validator
Fixing remote-validator – pre-Angular 1.3
Fixing remote-validator (Angular 1.3)
Injecting HTML in the directive compile function
Understanding directive templates and transclude
Understanding directive-isolated scopes
Creating the AJAX button directive
AngularJS jQuery integration
Integrating the Carousel jQuery plugin with Workout Runner
Tunneling jQuery events with directives
Summary
7. Testing the AngularJS App
The need for automation
Testing in AngularJS
Types of testing
Testing who and when
The AngularJS testing ecosystem
Getting started with unit testing
Setting up Karma for unit testing
Managing script dependencies with Bower
Unit testing AngularJS components
Unit testing filters
Unit testing using the ngMock module
Unit testing controllers
Setting up controller dependencies
Unit testing WorkoutController
Debugging unit tests in Karma
Unit testing WorkoutController continued...
Using Jasmine spies to verify dependencies
Testing the $interval and $timeout implementations
Testing workout pause/resume
Unit testing services
Mocking HTTP request/response with $httpBackend
Testing WorkoutService
Unit testing directives
Testing remote-validator
Testing remote-validator and busy-indicator together
Testing directives with templateUrl
Unit testing routes and resolve
Getting started with E2E testing
Introduction to Protractor
Setting up Protractor for E2E testing
Writing E2E tests for the app
Setting up backend data for E2E testing
Mocking the server backend in E2E testing
More E2E tests
Testing Workout Runner
Page objects to manage E2E testing
Summary
8. Handling Common Scenarios
Building a new app
Seed projects
Yeoman
Building multilingual apps (internationalization)
Angular I18n support
Locale changes using angular-dynamic-locale
Using angular-translate for text translations
Communication and data sharing patterns
Using a URL to share data across pages
Using $scope
Using $rootScope
Using services
Inter-directive communication
Using events
Performance
Performance guidelines
Keeping the page/view small
Optimizing watches for read-once data
Hiding (ng-show) versus conditional rendering (ng-if/ng-switch) content
Expressions being watched should not be slow
Minimizing the deep model watch
Handling large datasets with ng-repeat
Avoiding mouse-movement tracking events
Avoiding calling $scope.$apply
Lazy-loading, minification, and creating multiple SPAs
Breaking applications into multiple SPAs
Lazy-loading modules
Caching remote data wherever appropriate
Using Batarang to measure performance
Useful third-party libraries
Summary
Index
Search in book...
Toggle Font Controls
Playlists
Add To
Create new playlist
Name your new playlist
Playlist description (optional)
Cancel
Create playlist
Sign In
Email address
Password
Forgot Password?
Create account
Login
or
Continue with Facebook
Continue with Google
Sign Up
Full Name
Email address
Confirm Email Address
Password
Login
Create account
or
Continue with Facebook
Continue with Google
Next
Next Chapter
Table of Contents
Add Highlight
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click
here
login for view all page.
Day Mode
Cloud Mode
Night Mode
Reset