AngularJS Recipes
Minimum price
Suggested price

AngularJS Recipes

About the Book

This book is created for web developers who simply want to sharpen their knowledge and aims to become your right hand no matter if you are a novice or a well established developer. That's a promise.

Every recipe is a real life example also delivered in plunker as a fully functioning example.

Our series are real applications built with AngularJS and shared with you in Github too.

Every recipe is explained in detail step by step. That way you will dig into AngularJS 1.x and Angular 2 methods and techniques quite fast. We really want to help you write fast and accurate code.

After you read it, this book will try to become your AngularJS dictionary for the great variety of utilities its 2 major releases offer, so you can always have it nearby while coding.

AngularJS 1.x is a quite magnificent framework and it is not dead yet. The future is Angular 2 but quite many applications are built with its ancestor. The core team is going to support it for some time so we should still pay a great attention to it too. That's why this book will include content for AngularJS 1.x too.

This book includes all recipes created for There we add a new recipe every day. This book will get updated every monday by adding previous week's recipes.

So, let’s get started!

About the Author

Marios Fakiolas
Marios Fakiolas

I am a truly passionate guy, always ready to make smart ideas come true. Frontend Developer at, creator of, coordinator of Athens AngularJS Meetup and huge fan of AngularJS framework.

Apart from AngularJS i have been developing applications using EmberJS and PolymerJS so i think i have at least a tiny experience in latest js frameworks technologies. Also i am very strong nodeJS and php developer using Laravel framework which is a powerhouse.

Furthermore i am a happy husband, father and a guy who enjoys his job because web development is my hobby too.

So happy coding!!

Table of Contents

  • Introduction
  • Angular 2 with ES5
    • Create a simple component
    • Use service’s data into component
    • Loop through a service’s collection items
    • Use NgFor odd and even indicators to provide different style
    • Validate fast a login form
    • Toggle elements visibility using hidden attribute
    • Toggle elements visibility using NgIf
    • Toggle elements visibility using NgSwitch
    • How can i provide unique style for a component?
    • How can i use external stylesheets in my components?
    • How can i use inline styling in my components elements?
    • How can i use DecimalPipe in my components templates?
  • AngularJS 1.5.x
    • Route to a simple component directive
    • Use component directives outputs
    • How can i inject dependencies into a component directive?
    • How can i watch for properties changes in my component?
    • How can i watch a group of properties in my component?
    • How can i use $onInit as a lifecycle hook?
    • How can i create a google map component?
    • Handle DOM manipulations using components $postLink hook
    • How can i create a banner slider using NgAnimate?
  • AngularJS 1.x
    • Pass data to my view using $scope
    • Pass data to my view using an alias for my controller
    • Resolve data before loading a template
    • Use route params in single router declaration
    • Nested Controllers $scope
    • Use controller alias
    • Validate a form’s submission
    • Create a custom filter
    • Display array’s items index using $index
    • Use $odd and $even to provide different row style
    • Pass a variable to a controller using a different coding language or template engine
    • Create custom messages while validating a form
    • Send some url parameters with $http GET request
    • Send some url parameters with $http DELETE request
    • Send some url parameters with $http POST request
    • Send some url parameters with $http PUT request
    • Create a basic routing system for a SPA
    • Controller’s scope variable value versus ng-init directive
    • Declare multiple variables at once using ng-init
    • Manipulate a variable declared with ng-init in controller
    • Edit the opening and closing curly braces
    • Optimal way to structure your controller
    • Scroll to top on SPA route change
    • Use an iframe with a dynamic url as ng-src
    • How can i help ng-repeat directive to act faster?
    • How can i remove debugging info AngularJS injects?
    • How can i use ng-switch / ng-if / ng-show / ng-hide wisely?
    • How can i use ng-options with an array of objects?
  • Create a modern blog with AngularJS 1.4.x
    • Setup our application’s folders and files hierarchy
    • Bootstrap our application and its routing system
    • Build our controllers
    • Create a web server with live-server
    • Work on posts factory
    • Resolve posts for home route
    • Use url parameters to resolve single post
    • Add some custom styling following material design principles
    • Apply a comments system with DISQUS
  • Create a modern portfolio with AngularJS 1.5
    • Setup our application’s folders and files hierarchy
    • Bootstrap our application and its routing system
    • Build our components
    • Create a web server with live-server
    • Add a modern style fast using Bootstrap and Bootswatch
    • Create a navigation system
    • Work on our projects factory
    • Resolve projects for home route
    • Use url parameters to resolve requested project in single project’s route
  • Generic Tips
    • How can i create a development server for my SPA?

The Leanpub 60 Day 100% Happiness Guarantee

Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.

Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.

You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!

So, there's no reason not to click the Add to Cart button, is there?

See full terms...

80% Royalties. Earn $16 on a $20 book.

We pay 80% royalties. That's not a typo: you earn $16 on a $20 sale. If we sell 5000 non-refunded copies of your book or course for $20, you'll earn $80,000.

(Yes, some authors have already earned much more than that on Leanpub.)

In fact, authors have earnedover $13 millionwriting, publishing and selling on Leanpub.

Learn more about writing on Leanpub

Free Updates. DRM Free.

If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).

Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.

Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.

Learn more about Leanpub's ebook formats and where to read them

Write and Publish on Leanpub

You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses!

Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks.

Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. (Or, if you are producing your ebook your own way, you can even upload your own PDF and/or EPUB files and then publish with one click!) It really is that easy.

Learn more about writing on Leanpub