Search icon Close icon
Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.

Change country

Modal Close icon
Country selected Country selected
country flag United States
Country selected
country flag United Kingdom
Country selected
country flag India
Country selected
country flag Germany
Country selected
country flag France
Country selected
country flag Canada
Country selected
country flag Russia
Country selected
country flag Spain
Country selected
country flag Brazil
Country selected
country flag Australia
Country selected
country flag Argentina
Country selected
country flag Austria
Country selected
country flag Belgium
Country selected
country flag Bulgaria
Country selected
country flag Chile
Country selected
country flag Colombia
Country selected
country flag Cyprus
Country selected
country flag Czechia
Country selected
country flag Denmark
Country selected
country flag Ecuador
Country selected
country flag Egypt
Country selected
country flag Estonia
Country selected
country flag Finland
Country selected
country flag Greece
Country selected
country flag Hungary
Country selected
country flag Indonesia
Country selected
country flag Ireland
Country selected
country flag Italy
Country selected
country flag Japan
Country selected
country flag Latvia
Country selected
country flag Lithuania
Country selected
country flag Luxembourg
Country selected
country flag Malaysia
Country selected
country flag Malta
Country selected
country flag Mexico
Country selected
country flag Netherlands
Country selected
country flag New Zealand
Country selected
country flag Norway
Country selected
country flag Philippines
Country selected
country flag Poland
Country selected
country flag Portugal
Country selected
country flag Romania
Country selected
country flag Singapore
Country selected
country flag Slovakia
Country selected
country flag Slovenia
Country selected
country flag South Africa
Country selected
country flag South Korea
Country selected
country flag Sweden
Country selected
country flag Switzerland
Country selected
country flag Taiwan
Country selected
country flag Thailand
Country selected
country flag Turkey
Country selected
country flag Ukraine
Country selected
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Home > Web Development > Front End Web Development > AngularJS Web Application Development Blueprints
AngularJS Web Application Development Blueprints
AngularJS Web Application Development Blueprints

AngularJS Web Application Development Blueprints: A practical guide to developing powerful web applications with AngularJS

Arrow left icon
Profile Icon Vinci J Rufus
Arrow right icon
€41.99
Full star icon Full star icon Full star icon Full star icon Half star icon 4.3 (7 Ratings)
Paperback Aug 2014 300 pages 1st Edition
eBook
€22.99 €32.99
Paperback
€41.99
Subscription
Free Trial
Renews at €18.99p/m
Arrow left icon
Profile Icon Vinci J Rufus
Arrow right icon
€41.99
Full star icon Full star icon Full star icon Full star icon Half star icon 4.3 (7 Ratings)
Paperback Aug 2014 300 pages 1st Edition
eBook
€22.99 €32.99
Paperback
€41.99
Subscription
Free Trial
Renews at €18.99p/m
eBook
€22.99 €32.99
Paperback
€41.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Table of content icon View table of contents Preview book icon Preview Book

AngularJS Web Application Development Blueprints

Chapter 1. Introduction to AngularJS and the Single Page Application

In this chapter, we'll learn what Single Page Apps are and how they differ from the regular web applications. We will also learn the fundamentals of AngularJS and go about building a simple Address Book App using it.

The list of topics to be covered in the chapter are as follows:

  • What are Single Page Apps?
  • Anatomy of an app
  • Models and views
  • Building an Address Book App
  • Styling the app with CSS
  • Adding items to the Address Book

Delving into Single Page Apps

Besides other things, AngularJS is primarily used to build Single Page Apps (SPAs), so let us first understand its characteristics.

Single Page Apps are apps or websites wherein the entire site or app content loads within a single page. This essentially means that once the app or website is loaded in the browser, clicking on any link would not reload the entire page but would simply update certain sections within the main page itself. This gives users a very desktop-like feel while using an SPA.

Although SPAs have become very popular nowadays, the concept has been discussed as early as 2003, and the term Single Page App was coined in 2005.

Some of the technologies that play a predominant role in building SPAs are HTML, CSS, JavaScript, AJAX, and web services usually RESTful. Of these, JavaScript plays the most crucial role in building an SPA, so if you have been procrastinating on sharpening your JavaScript skills this would be the best time to get up and get started.

One of the fundamental differences in the way SPAs work against regular websites is the way the pages are built, which the user sees. Refer to the following diagram:

Delving into Single Page Apps

In traditional web applications that are built on the server-side technologies such as Java, PHP, and .NET, whenever a page is requested, the web server would make a request to the database, fetch the result of the query, then load the template, and dynamically generate the final page, which is sent down to the browser. As you can see here, the web server is doing all the heavy lifting, and as the traffic to the server increases, the web server becomes a bottleneck. This is why popular high-traffic sites need a lot of servers.

Single Page Apps, especially those built on JavaScript frameworks such as AngularJS work in a slightly different fashion. Refer to the following diagram:

Delving into Single Page Apps

In an SPA architecture, the entire template along with the HTML, JavaScript, and CSS is downloaded to the user's browser, so when a request is made, content is sent from the web server and the page is built on the client side on the user's browser. Here, the browser is doing the heavy lifting. In such an architecture, the web server is merely passing raw data and is not involved in building the pages. The pages are built on each user's browser and hence even if the traffic to the site increases, the server doesn't get overloaded, as it would have in a regular web app architecture.

Another thing that makes SPAs wonderful is that the presentation layer can be completely decoupled from the backend layer.

Anatomy of a simple AngularJS app

Perform the following steps:

  1. To start, let's first download a version of AngularJS from http:www.angularjs.org.
  2. Click on the Download button and select the following options from the pop-up window:
    • Branch: Select Stable
    • Build: Select Minified
  3. Download the JS file and place it in your project's folder.

Let us start by writing a simple AngularJS app. Create an index.html file with the following code:

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Basic</title>
</head>

<body ng-app ng-init=" myName ='John Doe' ">
    {{myName}} is {{ 2014-1968}} years old.
    <script src=" angular.min.js " type="text/javascript "> </script>
   </body>
</html>

This is a regular HTML page with the HTML5 doctype and the AngularJS JavaScript file being called in. Now, let us look at specific syntaxes of AngularJS and what they mean. The syntaxes are as follows:

  • ng-app: This defines the element within which AngularJS will bootstrap itself. In most cases, we would add it to the <html> or <body> tag. It is also possible you would be building a regular application in Java, PHP, or .NET and only a section of it would be running an AngularJS app, in such cases you would add ng-app to the <div> tag wrapping the app component.
  • ng-init: This is used to define the initialization tasks. In this example, we are creating a model called myName with the value John Doe.

    Note

    Using ng-init is not recommended for production apps. As we will see later in this chapter, the ideal way to initialize the variable would be in the controller instead of directly writing it in the view.

  • {{ }}: The double curly brackets are used to output the data stored in models. In this case, {{myName}} outputs the value John Doe. These curly brackets can also be used for expressions, as in the example {{2014-1968}} outputs the result 46. This is very similar to how other templating engines such as Mustache or Smarty work.
  • Directives: The ng-app and the ng-init tags that you see in the preceding sample code are called Directives. They are an integral part of any AngularJS app and it is through these directives that AngularJS is able to modify the DOM element of an application. AngularJS comes with a whole set of predefined directives many of which we will use as we go through this book. The good thing about AngularJS is that you can also create your own custom directives that can meet your specific requirements.

Models and views

In AngularJS, a model could be a primitive, a hash table, or a JavaScript object. The data from the model can be displayed in the view using the {{ }} expression.

Models can be defined in multiple ways. Like we saw in the first example, we can define the model within the ng-init directive. It can be created in the template within the expression as follows:

<button ng-click="firstName='John Doe' ">click </button>

Alternatively, it could also be created within a controller using the scope, which is the ideal way to do it. Refer to the following code:

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Model in Scope</title>
</head>
<body ng-controller="PeopleController">
    {{person.name}} lives in {{person.city}}
    <script src="angular.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    function PeopleController($scope) {
        $scope.person = {
            name: "John Doe",
            city: "New York"
        }
    }
    </script>
</body>
</html>

In the preceding example, we created a controller called PeopleController and defined the model person, which is storing the data as a hash table. The $scope is an AngularJS object that is able to reference the JavaScript object model as a property.

Building an Address Book App

In the earlier examples, we saw the different ways of creating models. When creating production grade or large-scale applications, which involve graphical interfaces, it is compulsory to follow the Model View Controller (MVC) design pattern.

Building on the previous code example, we'll go ahead and build a simple Address Book App.

Let's start by creating our models in a controller called PeopleController. We'll now write all our JavaScripts in a file called scripts.js. Your scripts.js file should look like this:

function PeopleController($scope){
$scope.people=[
   {name:"John Doe", phone: "3452345678", city:"New York"},
   {name:"Sarah Parker", phone: "1236548769", city:"Chicago"},
   {name:"Little John", phone: "4567853432", city:"Los Angeles"},
   {name:"Adam Doe", phone: "9025673152", city:"Las Vegas"}
         ];
}

Here we are defining the controller called PeopleController and creating our model called people. The model contains three attributes: name, phone, and city.

Now, let us get our markup in place. Let us call the file index.html using the following code:

<!DOCTYPE html>
<html ng-app>
   <head>
         <title>Address Book</title>
   </head>
   <body ng-controller="PeopleController">
   <h1>Address Book</h1>	
   <div> 
         <div ng-repeat="person in people">
                <div>{{person.name}} - {{person.phone}}</div>
                <span>{{person.city}} </span>

         </div>
   </div>	

   <script src= "angular.min.js" type="text/javascript"></script>
   <script src= "scripts.js" type="text/javascript"></script>
   </body>
</html>

Tip

It is always a good practice to load your JS files at the end of the page just above the body tag and not in the head. You can read more about why this matters here at https://developer.yahoo.com/performance/rules.html.

As you can see here, we are defining the HTML5 doctype in the first line, and then we initialize the AngularJS application by using the ng-app directive. You'll also notice that we are using the ng-controller directive and assigning PeopleController to it. By doing so, we are defining the section of the DOM that is now within the scope of this controller.

You'll also notice a new directive called ng-repeat; this is the built-in directive used to display a list of items from a collection. The ng-repeat directive would simply duplicate the DOM element and bind the defined properties of the data object.

As you can see, ng-repeat makes it so easy and clean to display record sets as compared to doing this in jQuery or plain vanilla JavaScript.

Now, run your index.html in the browser and you should be seeing the names with their phone numbers and cities being displayed. The data from our model is showing up, which is good. Let us also inspect the code to have a look at the changes AngularJS is making to our markup.

All modern browsers allow you to inspect the source. And in most cases you can simply right-click on the page and select Inspect Element. In case you are not comfortable with Inspect, you can also do View Source. Refer to the following screenshot:

Building an Address Book App

Tip

By the way, here I'm using Firebug, an awesome add-on for Mozilla Firefox.

As you look through the code, you'll notice that AngularJS is making a fair bit of change to the markup.

The first thing you'll notice is that AngularJS adds a class called ng-scope to every DOM element where the scope is initialized (we will get to what a scope is, in just a bit). It duplicates the entire DOM present within the ng-repeat directive. It is also adding a class called ng-binding to every element where the data is bound.

AngularJS will add different CSS classes depending on the directive being used. These can come in handy when you want to style, for example, the validation messages while working with forms. We'll see more about this in the chapters ahead.

Understanding the scope in AngularJS

Let us now look at this thing called the scope. As you might have noticed, we defined our people controller with a $scope parameter. We also had to define our people model as a part of this scope. While inspecting the elements, we also noticed multiple ng-scope classes being defined. So, what exactly is this scope and is it really that important?

As per AngularJS's documents, the scope object refers to the application model and provides an execution context for the expressions in the views.

The expression {{person.name}} is able to display the content only because the name is a property that can be accessed by the scope.

Another important thing to note is that every AngularJS app will have a root scope created at the ng-app directive. Many other directives could also create their own scope. Scopes are arranged in a hierarchical fashion following the DOM structure of the page. Child Scopes prototypically inherit from their parent scope.

The exception to this is in cases where a directive uses a scope option, it creates an isolated scope. More information about the directives and isolated scope is available in Chapter 5, Facebook Friends' Birthday Reminder App.

We'll get a better understanding of it as we see other examples.

Styling the app

Now, let us style the application to make it look a little better. We'll go back to our index.html and add a few CSS classes as follows:

<!DOCTYPE html>
<html ng-app>
   <head>
         <title>Address Book</title>
<link rel="stylesheet" type="text/css" href="styles.css">
   </head>
   <body ng-controller="PeopleController">
      <h1>Address Book</h1>	
   <div class="wrapper"
          <div class="contact-item" ng-repeat="person in people">
                <div class="name">{{person.name}} - {{person.phone}}</div>
                <div class="city">{{person.city}} </div>

          </div>
   </div>	

   <script src= "angular.min.js" type="text/javascript"></script>
   <script src= "scripts.js" type="text/javascript"></script>
   </body>
</html>

Now let's create our styles.css with the following CSS styling:

body{
   font-family: sans-serif;
   font-weight: 100;
   background:#ccc;
}
h1{
   text-align: center;
   color:#666;
   text-shadow:0px 2px 0px #fff;

}

.name{
   font-size:18px; 
}

.city{
   font-style: italic;
   font-size: 13px;
}

.wrapper{
   width:550px;
   margin: 0 auto;
   box-shadow:5px 5px 5px #555;
   background: #fff;
   border-radius: 15px;
   padding: 10px;

}
.contact-item{
   border-bottom: thin solid #ccc; 
   padding:10px;
}

As you can see from the CSS styles, we first style the body to give it a light gray background color using the #ccc (#ccc is the short code for #cccccc) hex code.

The H1 heading tag is styled to align center, with a dark gray text color and a text shadow. The styling for .name and .city is straightforward. Now, let us look at the styles for .wrapper using the following code:

.wrapper{
   width:650px;
   margin: 0 auto;
   box-shadow:5px 5px 5px #555;
   background: #fff;
   border-radius: 15px;
   padding: 10px;

}

Here, we are setting width of the div to 650px. The margin with 0 auto is used to place the div to the center of the screen irrespective of the screen resolution.

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Now to make it look a little better, we'll give it a box-shadow and border radius. The following diagram explains what the options of the border radius mean:

Styling the app

For the .contact-item list, we give a border-bottom and some padding so that things stay a little spaced out.

With all this CSS in place, your app should be looking like this:

Styling the app

Sorting the contacts alphabetically

This looks nice, but it would be a good idea to have the names sorted alphabetically. For this, we will use AngularJS's built-in filter called orderBy.

In AngularJS, filters are used to format the data. One can use AngularJS's predefined filters or create your own. We'll learn more about filters later in this book.

All we need to do is modify the following section of the index.html as follows:

<div class="contact-item" ng-repeat="person in people| orderBy:'name'">
<div class="name">{{person.name}} - {{person.phone}}</div>
<span class="city">{{person.city}} </span>
</div>

Refresh your Index.html in the browser and you should notice the names are now sorted alphabetically.

Adding contacts to the Address Book

Now that we have our Address Book displaying our contacts nicely, let's now create a form to add contacts.

Let us add the markup for the Add a Contact form in the index.html file within the body tag as follows:

<div class="wrapper">
   <h2>Add a Contact</h2>
   Name: <input type="text" ng-model="newPerson.name"></input> 
   Phone: <input type="text" ng-model="newPerson.phone"></input>
   City: <input type="text" ng-model="newPerson.city"></input>
         <button ng-click="Save()">Save</button>
   </div>

The preceding code is rather straightforward. We create a new div and reuse the wrapper class to style it.

We are adding the three textboxes for the name, phone, and city attributes. We bind these three textboxes to a model object called newPerson as follows:

  • ng-model='newPerson.name'
  • ng-model='newPerson.phone'
  • ng-model='newPerson.city'

We are also adding a button called Save and using the ng-click directive that will call the Save() function when the button is clicked.

Now, let us look at the JavaScript code that we will be writing in our scripts.js file:

$scope.Save=function(){
$scope.people.push({name:$scope.newPerson.name, phone:$scope.newPerson.phone, city:$scope.newPerson.city});
}

Tip

Since the Save() function is accessing the scope within the PeopleController function, it is imperative that the Save() function is written within the PeopleController function in the scripts.js file.

In the $scope.Save function, we simply capture the values from the input boxes and push this into our main people model.

Let us now refresh our index.html and try it out. Fill up the form and save it and you will immediately see it get added to the Address Book. This happens thanks to one of the many cool features of AngularJS called two-way data binding.

The ng-show and ng-hide directives

While the app is good as it is, maybe it's a good idea to have a button called Add Contact and display the Add Contact form only when that button is clicked.

Let us make use of AngularJS's ng-show and ng-hide directives to control the visibility of our Add Contact form.

The way they work is very straightforward. If the attribute ng-show='true', then the div is visible and vice versa. A point to note is that ng-show and ng-hide merely control the visibility of the DOM element.

Let's add our button called Add Contact and set up the ng-show and ng-hide directives such that when you click on Add Contact, the form shows up and at the same time this button disappears. And when the Save button is clicked, the form is hidden and the Add Contact button shows up again.

Let's modify our index.html as follows:

<center><button ng-click="ShowForm()" ng-hide="formVisibility "> Add Contact</button></center>
   <div ng-show="formVisibility " class="wrapper">
          <h2>Add a Contact</h2>
   Name: <input type="text" ng-model="newPerson.name"></input>
   Phone: <input type="text" ng-model="newPerson.phone"></input>
   City: <input type="text" ng-model="newPerson.city"></input>
         <button ng-click="Save()">Save</button>
   </div>

We set the button to ng-hide='formVisibility' because when the value of formVisibility becomes true, it will hide the button. Similarly, ng-show= formVisibility will make the Add Contact form display when the value of formVisibility is true.

Now, let's add the piece of JavaScript to set the formVisibility values. Add the following code to your scripts.js file as follows:

$scope.ShowForm=function(){
$scope.formVisibility=true;
}

Tip

Make sure this new function is written within the main PeopleController function.

We will also add one line in our existing $scope.Save function to set the value of formVisibility to false.

Please update the $scope.Save() function as highlighted in the following code:

$scope.Save = function() {

    $scope.people.push({
        name: $scope.newPerson.name,
        phone: $scope.newPerson.phone,
        city: $scope.newPerson.city
    });
    $scope.formVisibility = false;

}

Reload your index.html and see the buttons in action.

Oh and just because we don't like the way those default buttons look, lets add a little bit of style to it.

Add the following CSS classes to your styles.css file:

button
{
   background:#080;
   color:#fff;
   padding:5px 15px;
   border-radius: 5px;
   border: thin solid #060;
"margin: 5px auto;"
}
button:hover{
   background: #0A0;
}

What we are simply doing here is setting a dark green color background for the button, giving the text a white color, and giving it some padding five pixels from the top- and bottom-side and 15 pixels from the left-hand side and right-hand side and adding some border radius.

The button:hover is a light green background color just to show the highlight when the user hovers the cursor over the button.

Reload your index.html page and we have our very first working and reasonably good-looking Address Book Application.

Summary

This concludes our first chapter. To quickly summarize, we went about building our Address Book App and in doing so learned about the various AngularJS directives such as ng-app and ng-repeat. We saw how two-way data bindings and expressions work and the importance of scope. We also saw how we can hide and show certain elements using the ng-show and ng-hide directives. Last but not least, we used some simple and easy CSS3 features to style our app.

In the next chapter, we will see the various tools that frontend developers should ideally have in their toolbox and how to go about using them.

Left arrow icon

Page 1 of 8

Right arrow icon

Description

If you are a web application developer interested in using AngularJS for a real-life project, then this book is for you. As a prerequisite, knowledge of JavaScript and HTML is expected, and a working knowledge of AngularJS is preferred.

What you will learn

  • Gain a powerful understanding of AngularJS and singlepage applications that you can apply to your own development projects
  • Explore AngularJS directives feature and write your own custom directives
  • Build complete and professional applications ranging from social media and mobile web applications to CMS and an ecommerce store
  • Discover strategies and techniques for harnessing REST web services and Facebook APIs in your applications
  • Deploy applications using the highly scalable Amazon Web Services cloud solution
  • Develop rapid prototypes to create an impressive UI using Bootstrap's grid system
  • Get to grips with MEAN web development and create a CMS with a MEAN stack
Estimated delivery fee Deliver to Netherlands

Premium delivery 7 - 10 business days

€17.95
(Includes tracking information)

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Aug 25, 2014
Length: 300 pages
Edition : 1st
Language : English
ISBN-13 : 9781783285617
Category :
Web Development
Languages :
JavaScript
Concepts :
Front End Web Development
Tools :
AngularJS

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Estimated delivery fee Deliver to Netherlands

Premium delivery 7 - 10 business days

€17.95
(Includes tracking information)

Product Details

Publication date : Aug 25, 2014
Length: 300 pages
Edition : 1st
Language : English
ISBN-13 : 9781783285617
Category :
Web Development
Languages :
JavaScript
Concepts :
Front End Web Development
Tools :
AngularJS

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
START FREE TRIAL
BUY NOW
€189.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW
€264.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
START FREE TRIAL
BUY NOW

Frequently bought together

AngularJS Web application development Cookbook
AngularJS Web application development Cookbook
Read more
Dec 2014 346 pages
Full star icon 4.5 (24)
eBook
eBook
  • eBook eBook €22.99
  • Paperback Paperback €41.99
€22.99 €32.99
€41.99
AngularJS Web Application Development Blueprints
AngularJS Web Application Development Blueprints
Read more
Aug 2014 300 pages
Full star icon 4.3 (7)
eBook
eBook
  • eBook eBook €22.99
  • Paperback Paperback €41.99
€22.99 €32.99
€41.99
Stars icon
Total € 83.98
AngularJS Web application development Cookbook
€41.99
AngularJS Web Application Development Blueprints
€41.99
Total € 83.98 Stars icon

Table of Contents

11 Chapters
1. Introduction to AngularJS and the Single Page Application Chevron down icon Chevron up icon
1. Introduction to AngularJS and the Single Page Application
Delving into Single Page Apps
Anatomy of a simple AngularJS app
Models and views
Building an Address Book App
Styling the app
Adding contacts to the Address Book
Summary
2. Setting Up Your Rig Chevron down icon Chevron up icon
2. Setting Up Your Rig
Setting up Node.js
Setting up Grunt
Yeoman – the workflow tool
Unit testing with Karma
Using Protractor for End-to-End tests
Summary
3. Rapid Prototyping with AngularJS Chevron down icon Chevron up icon
3. Rapid Prototyping with AngularJS
Understanding the application that we will Prototype
Introducing Grid Layouts and Bootstrap
Understanding the grid system
Introducing Angular UI
Prototyping the Healthy Living website
Summary
4. Using REST Web Services in Your AngularJS App Chevron down icon Chevron up icon
4. Using REST Web Services in Your AngularJS App
Understanding the response from a REST API
Jump starting your app development with Angular Seed
Mark-up our Layout
Creating the routes
Understanding AngularJS services
Writing your first factory service
Using promise for asynchronous calls
Displaying data from the JSON response
Unit testing our application
Mocking $http during Unit testing
Creating a Pinterest style layout
Adding actions to the buttons
Summary
5. Facebook Friends' Birthday Reminder App Chevron down icon Chevron up icon
5. Facebook Friends' Birthday Reminder App
Understanding the Facebook SDK
Setting up our project
Delving into AngularJS directives
Adding a Facebook login
Getting the user's friend list
Getting your friends' profile pictures and birthdays
Adding some CSS styles
Adding in the logout link
Writing automated tests
Summary
6. Building an Expense Manager Mobile App Chevron down icon Chevron up icon
6. Building an Expense Manager Mobile App
Understanding HTML5 Web Storage
Building the Expense Manager App
Building the Add Expense form
Building a bar chart directive based on D3
Summarizing the expenses by categories
Making the app responsive
Adding touch events
Adding page transitions using ngAnimate
Making the app feel like a native app
Adding additional features
Summary
7. Building a CMS on the MEAN Stack Chevron down icon Chevron up icon
7. Building a CMS on the MEAN Stack
Why the MEAN stack?
Getting started with the MEAN stack
Building the server-side app
Securing your admin section
Integrating AngularJS with an ExpressJS project
Generating SEO-friendly URLs using HTML5 mode
Building the admin section for CRUD operations
Building a custom module for global notification
Setting up an Interceptor to detect responses
Building the frontend of our CMS
Displaying the content of a page
Summary
8. Scalable Architecture for Deployments on AWS Chevron down icon Chevron up icon
8. Scalable Architecture for Deployments on AWS
Understanding the various services in Amazon AWS
Delving into AWS deployment architectures
Deploying our app in a Server-less Architecture on AWS
Getting your app ready for production deployment
Performance
Summary
9. Building an E-Commerce Store Chevron down icon Chevron up icon
9. Building an E-Commerce Store
Backend as a Service
Building a BaaS platform on AWS
Creating our e-commerce app
Prototyping our application
Creating our application-level controller
Integrating AWS JS SDK with our application
Building our Add Products page
Creating our product details page
Summary
A. AngularJS Resources Chevron down icon Chevron up icon
A. AngularJS Resources
Official resources
Recommended AngularJS modules
Boiler plates
Learning resources
Good friends with AngularJS (third-party tools and services)
Core team members and knowledgeable people to follow
Index Chevron down icon Chevron up icon
Index

Recommendations for you

Left arrow icon
React and React Native
React and React Native
Read more
Apr 2024 508 pages
Full star icon 4.3 (9)
eBook
eBook
  • eBook eBook €17.99
  • Paperback Paperback €32.99
€17.99 €26.99
€32.99
Django 5 for the Impatient
Django 5 for the Impatient
Read more
Sep 2024 228 pages
Full star icon 4 (2)
eBook
eBook
  • eBook eBook €13.99
  • Paperback Paperback €26.99
€13.99 €20.99
€26.99
Django 5 By Example
Django 5 By Example
Read more
Apr 2024 820 pages
Full star icon 4.5 (36)
eBook
eBook
  • eBook eBook €17.98
  • Paperback Paperback €21.99
€17.98 €29.99
€21.99 €37.99
​AI Strategies for Web Development
​AI Strategies for Web Development
Read more
Sep 2024 458 pages
eBook
eBook
  • eBook eBook €15.99
  • Paperback Paperback €28.99
€15.99 €22.99
€28.99
Mastering Angular Test-Driven Development
Mastering Angular Test-Driven Development
Read more
Oct 2024 246 pages
Full star icon 5 (1)
eBook
eBook
  • eBook eBook €15.99
  • Paperback Paperback €28.99
€15.99 €22.99
€28.99
GraphQL Best Practices
GraphQL Best Practices
Read more
Oct 2024 422 pages
eBook
eBook
  • eBook eBook €15.99
  • Paperback Paperback €29.99
€15.99 €23.99
€29.99
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2023 828 pages
Full star icon 4.4 (72)
eBook
eBook
  • eBook eBook €24.99
  • Paperback Paperback €44.99
€24.99 €35.99
€44.99
Building Python Microservices with FastAPI
Building Python Microservices with FastAPI
Read more
Aug 2022 420 pages
Full star icon 3.9 (9)
eBook
eBook
  • eBook eBook €19.99
  • Paperback Paperback €35.99
€19.99 €28.99
€35.99
Building Production-Grade Web Applications with Supabase
Building Production-Grade Web Applications with Supabase
Read more
Aug 2024 534 pages
Full star icon 4.3 (8)
eBook
eBook
  • eBook eBook €15.99
  • Paperback Paperback €29.99
€15.99 €23.99
€29.99
Responsive Web Design with HTML5 and CSS
Responsive Web Design with HTML5 and CSS
Read more
Sep 2022 498 pages
Full star icon 4.5 (57)
eBook
eBook
  • eBook eBook €17.99
  • Paperback Paperback €33.99
€17.99 €26.99
€33.99
Right arrow icon

Customer reviews

Top Reviews
  • Top Reviews
  • Most Recent
Rating distribution
Full star icon Full star icon Full star icon Full star icon Half star icon 4.3
(7 Ratings)
5 star 71.4%
4 star 14.3%
3 star 0%
2 star 0%
1 star 14.3%
Filter icon Filter
Top Reviews
  • Top Reviews
  • Most Recent

Filter reviews by

Amazon Customer Sep 26, 2014
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I thought the book was well written and very practical. I have not tried any of the code but will do so and will modify my review if I find it to be problematic to use. I have read most of the other angularjs books at the time of this review and was surprised with this one, because most of the others are substantially more abstract and in similar ways. I found this book to be refreshing in how it explains steps to be taken toward building a diverse group of applications with diverse functionality. I found the authors reliance on Yeoman to be a problem because I have had problems with it and prefer other methods. Yeoman is the main reason that I haven't used any of the code yet. I should get around to trying the code soon.
Amazon Verified review Amazon
T. Powell Mar 23, 2016
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I'm still new at learning JavaScript, JavaScript libraries, scaffolding tools, and so on. This is one of the best books I have read. When I focused on the MEAN stack (MongoDB, Express, AngularJS, and Node), I read Haviv's " MEAN Web Development ," by the same publisher. Haviv's book is thorough and informative in its own right; however, I realized I needed to understand AngularJS better.Rufus's book brought up to speed on AngularJS pretty quickly. For example, the "Setting up your rig" chapter was very helpful (a lot of other books assume you already know this--but I'm still getting started and didn't know what would be helpful in the AngularJS world). The example apps Rufus shows how to build incorporate a good spectrum of bells and whistles--and weren't too much over my head. The icing on the cake for me was the MEAN app project that Rufus presents toward the end of the book.
Amazon Verified review Amazon
Sascha Aug 31, 2014
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Super zu lesen, Beispiele sehr ausführlich erklärt. Mal was anderes, für mich mehr als brauchbar. Würde es wieder kaufen!Im großen und ganzen: Empfehlenswert!
Amazon Verified review Amazon
A J Oct 26, 2014
Full star icon Full star icon Full star icon Full star icon Full star icon 5
I had just started working on a new project involving Node and AngularJS, that’s when I stumbled upon this book. This book is quite different from the others that I’ve read so far. It takes a practical approach to explaining the various concepts in Angular making it very easy to understand and follow. The book has quite a few useful examples like integrating facebook with your app, using Angular UI, switching the routing between Node and Angular, using Interceptors etc. all of which came in quite handy while working on my project.What I really liked about this book is that it goes beyond just Angular and covers other allied skillsets like CSS theming, optimizing your page load times and deploying apps on AWS. It would have been good to see examples of how to deploy to other cloud platforms like Google App Engine, Heroku or Digital Ocean.
Amazon Verified review Amazon
Tushar Kapila Feb 13, 2015
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Good buy. Read it and used it as a reference in the last 4 weeks. Invaluable in getting my project out in time. CMS with Node, mongo Angualr exactly what I needed! Ch 9 AWS ecom web app with img upload & save to my dynamo db from Javascript ... wow
Amazon Verified review Amazon

People who bought this also bought

Left arrow icon
Building Python Microservices with FastAPI
Building Python Microservices with FastAPI
Read more
Aug 2022 420 pages
Full star icon 3.9 (9)
eBook
eBook
  • eBook eBook €19.99
  • Paperback Paperback €35.99
€19.99 €28.99
€35.99
React and React Native
React and React Native
Read more
May 2022 606 pages
Full star icon 4.6 (17)
eBook
eBook
  • eBook eBook €20.98
  • Paperback Paperback €37.99
€20.98 €29.99
€37.99
Responsive Web Design with HTML5 and CSS
Responsive Web Design with HTML5 and CSS
Read more
Sep 2022 498 pages
Full star icon 4.5 (57)
eBook
eBook
  • eBook eBook €17.99
  • Paperback Paperback €33.99
€17.99 €26.99
€33.99
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2023 828 pages
Full star icon 4.4 (72)
eBook
eBook
  • eBook eBook €24.99
  • Paperback Paperback €44.99
€24.99 €35.99
€44.99
C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals
C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals
Read more
Nov 2022 818 pages
Full star icon 4.1 (54)
eBook
eBook
  • eBook eBook €20.98
  • Paperback Paperback €37.99
€20.98 €29.99
€37.99
Right arrow icon

About the author

Profile icon Vinci J Rufus
Vinci J Rufus
Vinci Rufus is a VP for technology at Publicis Sapient. He has spent over 25 years building web applications using various technologies. He has been focused on building micro frontends for about half a decade and has successfully built and managed micro frontend-based applications for a few large clients. He was formerly a Google Developer Expert and has had the opportunity to speak at numerous conferences on modern frontend and cloud-native technologies.
Read more
See other products by Vinci J Rufus
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela