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
€18.99 per month
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
€18.99 per month
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 a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
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

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 a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

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 included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.