Book Image

AngularJS by Example

By : Chandermani
Book Image

AngularJS by Example

By: Chandermani

Overview of this book

<p>AngularJS makes web JavaScript web development less painful and more organized – it’s unsurprising that today it’s one of the most popular tools in web development.</p> <p>AngularJS by Example helps you get started with this essential web development framework quickly and easily, guiding you through AngularJS by showing you how to create your own real-world applications. By adopting this approach, you can bridge the gap between learning and doing immediately, as you follow the examples to learn the impressive features of Angular and experience a radically simple–and powerful–approach to web development.</p> <p>You’ll begin by creating a simple Guess the Number game, which will help you get to grips with the core components of Angular, including its MVC architecture, and learn how each part interacts with one another. This will give you a solid foundation of knowledge from which you can begin to build more complex applications, such as a 7 minute workout app and an extended personal trainer app. By creating these applications yourself, you will find out how AngularJS manages client-server interactions and how to effectively utilize directives to develop applications further. You’ll also find information on testing your app with tools such as Jasmine, as well as tips and tricks for some of the most common challenges of developing with AngularJS.</p> <p>AngularJS by Example is a unique web development book that will help you get to grips with AngularJS and explore a powerful solution for developing single page applications.</p>

Related Content you might be interested in

Current Title:

Small book image
AngularJS by Example
Chandermani
Mar, 2015 | 454 pages
No titles found
Table of Contents (15 chapters)
AngularJS by Example
AngularJS by Example
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Getting Started
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
Revisiting the controller
Scope
App bootstrapping
Tools
Resources
Summary
2
Building Our First App – 7 Minute Workout
Building Our First App – 7 Minute Workout
What is 7 Minute Workout?
Code organization
The 7 Minute Workout model
Adding app modules
The app controller
The 7 Minute Workout view
Adding start and finish pages
Learning more about an exercise
Displaying the remaining workout time using filters
Adding the next exercise indicator using ng-if
Summary
3
More AngularJS Goodness for 7 Minute Workout
More AngularJS Goodness for 7 Minute Workout
Formatting the exercise steps
Tracking exercise progress with audio clips
Pausing exercises
Enhancing the workout video panel
Animations with AngularJS
Workout history tracking using Angular services
Summary
4
Building Personal Trainer
Building Personal Trainer
The Personal Trainer app – the problem scope
The Personal Trainer model
The Personal Trainer layout
Implementing the workout and exercise list
Building a workout
Summary
5
Adding Data Persistence to Personal Trainer
Adding Data Persistence to Personal Trainer
AngularJS and server interactions
$http service basics
Personal Trainer and server integration
Getting started with $resource
Using $resource to access exercise data
Exercising CRUD with $resource
Request/response interceptors
AngularJS request/response transformers
Handling routing failure for rejected promises
Fixing the 7 Minute Workout app
Summary
6
Working with Directives
Working with Directives
Directives – an introduction
Anatomy of a directive
Building a remote validation directive to validate the workout name
Model update on blur
Implementing a remote validation clues directive
Understanding directive-isolated scopes
AngularJS jQuery integration
Summary
7
Testing the AngularJS App
Testing the AngularJS App
The need for automation
Testing in AngularJS
Getting started with unit testing
Getting started with E2E testing
Summary
8
Handling Common Scenarios
Handling Common Scenarios
Building a new app
Building multilingual apps (internationalization)
Handling authentication and authorization
Communication and data sharing patterns
Performance
Useful third-party libraries
Summary
Index
Index

Adding the next exercise indicator using ng-if

It will be nice for the user to be told what the next exercise is during the short rest period after each exercise. This will help in preparing for the next exercise. So let's add it.

To implement this feature, we would simply output the title of the exercise from the first element in the workoutPlan.exercises array in a label during the rest stage. This is possible because transitioning to the next exercise involves removing the exercise object from the workoutPlan.exercises array and returning it. Therefore, the array is shrinking after each exercise and the first element in the array always points to the exercise that is due. With this basic understanding in place, let's start the implementation.

We will show the next exercise next to the Time Remaining countdown section. Change the workout div (class="workout-display-div") to include the highlighted content.

<div class="workout-display-div">
  <!-- Exiting html -->
  <div class...
Previous Section
End of Section 11
Next Section