50+ Popular AngularJS Demos and Examples (Part 1 of 2)

Some I’m loving AnguarJS right now and I’m constantly looking for examples and demos, especially for AngularJS2. I’ve collated them into a list of around 50 of the most popular AngularJS Demos and Examples. There are some cool ones such as Angular Material for autocomplete, dynamic variable height tabs, and more demos which demonstrates floating labels, autocomplete, chrome apps and more. Definitely worth checking out if your learning AngularJS and want to see what it can do in the real-world.

 1. AngularJS Tutorial for Creating a Full-Stack Application

AngularJS-Tutorial-for-creating-a-full-stack-application
AngularJS-Tutorial-for-creating-a-full-stack-application

The goal of this tutorial is to guide you through the creation of a Reddit/Hacker News clone using the MEAN stack. By completing this tutorial, you will gain a basic understanding of the MEAN stack including building a REST interface with Express.js on top of Node.js and using that interface to perform CRUD operations on a database via an AngularJS frontend.

View Tutorial and Example

2. Getting Started with AngularJS

Building an app
Building an app

This tutorial explores the AngularJS framework by Google. It starts by briefly describing the design philosophy that the framework embodies and then quickly moves onto building a simple but nontrivial application to demonstrate the basics as well as some of AngularJS’s most distinctive features including data binding, dependency injection, loosely coupled code, and conciseness.

View Articles View Example

3. Learn Angular.js with 5 Examples

Navigation Menu
Navigation Menu

In this article you will find the basic building blocks of Angular apps – Models, Views, Controllers, Services and Filters – explained in 5 practical examples that you can edit directly in your browser.

View Article and Example

4. Why Does Angular.js Rock?

Data binding and scopes
Angular.js’ way of data binding

Angular.js is a MV* (Model – View – Whatever) Javascript framework which is maintained by Google which excels in the creation of single-page-applications or even for adding some “magic” to our classic web applications.

View Article and Example

5. AngularJS Learning

TV Show Tracker using AngularJS, Node.js and MongoDB
TV Show Tracker using AngularJS, Node.js and MongoDB

A bunch of links to blog posts, articles, videos, etc for learning AngularJS.

Github View Example

6. AngularJS Intro And Hello World Example

Hello World, AngularJS
Hello World, AngularJS

AngularJS, a JavaScript framework developed by a Googler and supported by Google has become quite a buzz word in past few months. More and more developers are using it and thus the community has grown significantly. Not only they love it, but they can’t stop praising it 🙂

View Article and Example

7. Building Chrome Apps with Angular.js

Building Chrome Apps with Angular.js
Building Chrome Apps with Angular.js

This guide gets you started building Chrome Apps with the AngularJS MVC framework. To illustrate Angular in action, we’ll be referencing an actual app built using the framework, the Google Drive Uploader.

View Article and Example

8. AngularJS for jQuery Developers

AngularJS for jQuery Developers - Portfolio
AngularJS for jQuery Developers – Portfolio

Custom software develpoment.

View Article View Example

9. AngularJS directives and JavaScript

Simple Angular application
Simple Angular application

In this article we’ll take a look at Angular Directives. What they are, what problem they solve, and how you can create your own re-usable components.

View Article View Example

10. Fun with AngularJS

AngularJS filters
AngularJS filters

Recently AngularJS, an MVC style JavaScript framework from Google, has been gaining more momentum. I’ve been curious about it for awhile and when I read this article recently, I decided it was finally time to give it a whirl.

View Article and Example

11. Building a Spreadsheet with Angular.js

Building a Spreadsheet with Angular.js
Building a Spreadsheet with Angular.js

In this post, we’re going to use Angular.js to build a miniature spreadsheet.

View Article and Example

12. Google Maps Components with AngularJS

Google Maps Components with AngularJS
Google Maps Components with AngularJS

Making Google Maps Components with AngularJS

View Article View Example

13. AngularJS and Google Maps

AngularJS and Google Maps
AngularJS and Google Maps

I’ve been playing more and more with angularjs nowadays. Previously, I experimented with angularjs directives by created a directive for CkEditor 4, inline mode..

View Article and Example

14. Mapping AngularJS Routes Onto URL Parameters

Mapping AngularJS Routes Onto URL Parameters
Mapping AngularJS Routes Onto URL Parameters

AngularJS comes with a fairly robust routing and history management mechanism. Out of the box, it supports both hash-based routing as well as HTML5 push-state (I’ve only played with hash-based routing).

View Article and Example

15. Animating with AngularJS

Animating with AngularJS
Animating with AngularJS

In this article I’ll explain a bit about how it all works and include links to a demo application I created to try things our for yourself. The source to the demo application is located on my GitHub account here as well.

View Article View Example

16. Quick Start Guide to PhoneGap and AngularJS

Quick Start Guide to PhoneGap and AngularJS
Quick Start Guide to PhoneGap and AngularJS

I’ve created a sample mobile application to help developers get started building mobile applications with PhoneGap and AngularJS quickly. The sample application includes view navigation, some standard user interface components and code to help avoid common pitfalls in mobile application development (click delays etc).

View Article and Example

17. Building PhoneGap Apps with AngularJS

Building PhoneGap Apps with AngularJS
Building PhoneGap Apps with AngularJS

For the uninitiated, PhoneGap (or Cordova; I’m going to use the terms interchangeably) lets you write native applications for Android, iOS, and other mobile platforms as if they were web apps. That’s really exciting because I know web stuff, but I have no interest in investing the time to learn my way through an increasing number of mobile platforms. By reusing the same JavaScript code across multiple devices, I can cover more platforms with less code. There’s even a good chance I can reuse some of the code on a related desktop site. Less code to write also means less code I have to maintain. It’s a win-win!

View Article and Example

18. ArcGIS JavaScript API with Angular JS

ArcGIS JavaScript API with Angular JS
ArcGIS JavaScript API with Angular JS

Sample project demonstrating how to use ArcGIS JavaScript API with AngularJS.

Github View Example

19. Extending HTML with AngularJS Directives

Google Charts
Google Charts

Use AngularJS directives to teach HTML new tricks. The sample included with this article includes nearly 50 custom directives created based on Bootstrap, Google JavaScript APIs, and Wijmo. The sample is fully commented and includes documentation, so it should serve as a good reference when you start writing your directives.

View Article View Example

20. 3 Reasons to Choose Angular.JS

3 Reasons to Choose Angular.JS
3 Reasons to Choose Angular.JS

AngularJS is a relatively new JavaScript framework by Google, designed to make your front-end development as easy as possible. There are plenty of frameworks and plugins available. As such, it can sometimes prove difficult to sift through all of the noise to find useful tools.

View Article and Example View Code

21. 5 Awesome AngularJS Features

AngularJS: Scenario-Test-Runner
AngularJS: Scenario-Test-Runner

In this tutorial, we will cover what I consider to be the most essential features, and how they can help make your next web application awesome.

View Article and Example

22. More AngularJS Magic to Supercharge your Webapp

More AngularJS Magic to Supercharge your Webapp
More AngularJS Magic to Supercharge your Webapp

This article is a sequel to the previous article titled Use AngularJS to Power Your Web Application. For those of you whom have not already read the article then be sure to fully absorb it prior to diving into this article. All of the topics in this article are based off of knowledge and topics introduced in the previous article so be sure to take a look.

View Article and Example

23. Invoicing app made with Angular JS

Angular Invoicing
Angular Invoicing

Create free and unlimited one off invoices using this little Invoicing app made with Angular JS

Github View Example

24. AngularJS and Pagination

AngularJS and Pagination
AngularJS and Pagination

Create Pagination with AngularJS.

View Plugin and Example

25. jQuery Mobile and AngularJS

jQuery Mobile and AngularJS
jQuery Mobile and AngularJS

Create mobile navigation with jQuery and AngularJS.

View Plugin and Example

Check out part 2 here: 50+ Popular AngularJS Demos and Examples (Part 2)

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and love to share what he learns.

One thought on “50+ Popular AngularJS Demos and Examples (Part 1 of 2)

Leave a Reply

Your email address will not be published. Required fields are marked *