Contents
Preface 1
Introduction to AngularJS 8
Architectural concepts 9
Setting up the framework 10
Organizing the code 12
Four ways to organize the code 13
The inline style 13
The stereotyped style 13
The specific style 14
The domain style 15
Summary 15
What is a directive? 18
Using AngularJS built-in directives 19
The ngApp directive 19
The ngController directive 20
Nested controllers 21
The ngBind directive 21
The ngBindHtml directive 22
The ngRepeat directive 22
The ngModel directive 24
The ngClick directive and other event directives 25
The ngDisable directive 26
The ngClass directive 27
The ngOptions directive 28
The ngStyle directive 30
The ngShow and ngHide directives 30
The ngIf directive 31
The ngInclude directive 31
Refactoring application organization 32
Creating our own directives 34
template 35
templateUrl 36
replace 36
restrict 37
scope 38
transclude 42
link 43
require 44
controller 46
compile 47
Animation 48
How it works? 48
Animating ngRepeat 49
Animating ngHide 50
Animating ngClass 50
Summary 51
Expressions 53
Filters 55
Basic usage with expressions 55
currency 55
date 56
filter 56
json 57
limitTo 58
lowercase 58
number 58
orderBy 59
uppercase 60
Using filters in other places 60
Creating filters 61
Form validation 62
Creating our first form 62
Basic validation 63
Understanding the $pristine and $dirty properties 65
The $error object 65
Summary 66
Dependency injection 68
Creating services 69
Creating services with the factory 70
Creating services with the service 74
Creating services with the provider 75
Using AngularJS built-in services 76
Communicating with the backend 76
HTTP, REST, and JSON 76
Creating an HTTP facade 82
Headers 84
Caching 85
Interceptors 85
Creating a single-page application 87
Installing the module 87
Configuring the routes 87
Rendering the content of each view 88
Passing parameters 91
Changing the location 92
Resolving promises 93
Logging 96
Timeout 96
Asynchronous with a promise-deferred pattern 98
The deferred API 100
The promise API 101
Summary 101
Chapter 5: Scope 103
Two-way data binding 103
$apply and $watch 104
Best practices using the scope 106
The $rootScope object 110
Scope Broadcasting 110
Summary 113
Chapter 6: Modules 115
Creating modules 115
The UI module 116
The search module 118
The parking application module 119
Recommended modules 120
Summary 120
The Jasmine testing framework 122
Testing AngularJS components 124
Services 125
Controllers 126
Filters 128
Directives 129
Creating the element with the directive 130
Compiling the directive 130
Calling the link function with the scope 130
Invoking the digest cycle 130
Mocking with $httpBackend 132
Running tests with Karma 140
Installation 140
Configuration 141
Running tests 142
Summary 143
Automating the workflow with Grunt 145
Installation 146
Configuration 146
Creating a distribution package 147
Executing the workflow 155
Managing packages with Bower 156
Installation 156
Finding packages 156
Installing packages 157
Using packages 157
Cache 158
Summary 158
Index 159
Preface
For more than 12 years, I have been developing all kinds of web applications, and along the way, I have had the opportunity to experience the vast majority of frameworks on the Java platform. In 2008, I moved from an architecture highly based on backend web frameworks such as Struts and JSF to experience new challenges at the frontend. I think the main goal was to stop creating those old-school and hard-to-use web applications, investing on interactivity and usability.
At that time, I adopted the Google Web Toolkit, also known as GWT, building some web applications for almost 2 years. The results were pretty amazing in terms of user experience; however, I felt very upset about low productivity and also the amount of code that I had to write every day.
After that, in 2010, I decided to change drastically, adopting a much simpler approach by using just HTML, CSS, and JavaScript to write the frontend code. The experience was fantastic, which provided me with a very fast feedback cycle. The only problem was the lack of a layered architecture, which was unable to provide a clear separation of concerns while working with the JavaScript language. Also, I was missing things such as a strong dependency injection mechanism that would allow me to create reusable and testable components.
While looking for a solution, a very experienced JavaScript developer and also a great friend of mine, Rafael Nami, introduced me to AngularJS. In the following weeks, I started to read everything about it and also writing some code. After a few weeks, I was thrilled because it had never been so easy to create amazing web applications with so little code!
AngularJS, and honestly, I cannot imagine writing this same application using another kind of technology in this short period of time. I was so excited about it that I wrote an article on using AngularJS with Spring MVC and Hibernate for a magazine called Java Magazine. After that, I created an AngularJS training program that already has more than 200 developers who enrolled last year.
This book, AngularJS Essentials, is the result of that experience. This is a very practical guide, filled with many step-by-step examples that will lead you through the best practices of this amazing framework.
We are going to start, after a brief introduction, by learning how to create reusable components with directives. Then, we will take a look at many data handling techniques, discovering a complete set of technologies that are capable to accomplish any challenge related to present, transform, and validate data on the user's interface.
After that, we will explore the secrets of the dependency injection mechanism and also learn how to create services in order to improve the application's design. Also, we are going to discover the best way to deal with the scope and how to break up the application into separate modules, giving rise to reusable and interchangeable libraries.
Finally, we are going to learn how to test each component of the framework using Jasmine and also how to automate the workflow, creating an optimized distribution package with Grunt.
What this book covers
Chapter 1, Getting Started with AngularJS, introduces the framework and its architectural model. After that, we will start coding our first application and also understand how to organize our project.
Chapter 2, Creating Reusable Components with Directives, explains how the directives are one of the most important features of the framework. With them, we will understand how to extend the HTML language vocabulary, creating new behaviors and reusable components.
Chapter 3, Data Handling, explains how the framework provides a complete set of technologies to fulfill any requirement about presenting, transforming, synchronizing, and validating data on the user's interface. We will go through all of these technologies in order to improve the user experience with our applications.
Chapter 4, Dependency Injection and Services, explains how we are going to create reusable and decoupled components by implementing services and using the dependency injection mechanism.
Chapter 5, Scope, discusses how scope is one of the main concepts of the framework. In this chapter, we will discover the best practices to deal with scope.
Chapter 6, Modules, briefs us on how the framework is strongly based on the modules. In this chapter, we will understand how to break up our application into modules.
Chapter 7, Unit Testing, shows how we will dive deeply into testing techniques. We are going to understand how to test each framework component using Jasmine.
Chapter 8, Automating the Workflow, discusses how we will create an optimized distribution package for our application using Grunt and its plugins. Also, we will discover how to manage our dependencies with Bower.
What you need for this book
To implement the code in this book, you will need to use your favorite development interface and a web browser. I would recommend sublime text, but you may use Aptana (which is based on Eclipse), WebStorm, or any other IDE. AngularJS is compatible with the most browsers such as Firefox, Chrome, Safari, and Internet Explorer. Feel free to choose the one you are used to.
Getting Started with AngularJS
HyperText Markup Language (HTML) was created in 1990 by Tim Berners-Lee—a famous physics and computer scientist—while he was working at CERN, the European Organization for Nuclear Research. He was motivated about discovering a better solution to share information among the researchers of the institution. To support that, he also created the HyperText Transfer Protocol (HTTP) and its first server, giving rise to the World Wide Web (WWW).
In the beginning, HTML was used just to create static documents with hyperlinks, allowing the navigation between them. However, in 1993, with the creation of Common Gateway Interface (CGI), it became possible to exhibit dynamic content generated by server-side applications. One of the first languages used for this purpose was Perl, followed by other languages such as Java, PHP, Ruby, and Python. Because of that, interacting with any complex application through the browser wasn't an enjoyable task and it was hard to experience the same level of interaction provided by desktop applications. However, the technology kept moving forward, at first with technologies such as Flash and Silverlight, which provided an amazing user experience through the usage of plugins.
At the same time, the new versions of JavaScript, HTML, and CSS had been growing in popularity really fast, transforming the future of the Web by achieving a high level of user experience without using any proprietary plugin.
AngularJS is a part of this new generation of libraries and frameworks that came to support the development of more productive, flexible, maintainable, and testable web applications.
This chapter will introduce you to the most important concepts of AngularJS. The topics that we'll be covering in this chapter are:
• Introduction to AngularJS
• Understanding the architectural concepts
• Setting up the framework
• Organizing the code
Introduction to AngularJS
Created by Miško Hevery and Adam Abrons in 2009, AngularJS is an open source, client-side JavaScript framework that promotes a high-productivity web development experience.
It was built on the belief that declarative programming is the best choice to construct the user interface, while imperative programming is much better and preferred to implement an application's business logic.
To achieve this, AngularJS empowers traditional HTML by extending its current vocabulary, making the life of developers easier.
The result is the development of expressive, reusable, and maintainable application components, leaving behind a lot of unnecessary code and keeping the team focused on the valuable and important things.
In 2010, Miško Hevery was working at Google on a project called Feedback. Based on Google Web Toolkit (GWT), the Feedback project was reaching more than 17.000 lines of code and the team was not satisfied with their productivity. Because of that, Miško made a bet with his manager that he could rewrite the project in 2 weeks using his framework.
After 3 weeks and only 1.500 lines of code, he delivered the project! Nowadays, the framework is used by more than 100 projects just at Google, and it is maintained by its own internal team, in which Miško takes part. The name of the framework was given by Adam Abrons, and it was inspired by the angle brackets of the HTML elements.
