Angular.js Demos, Examples, and Resources

Angular.js, a powerful JavaScript framework developed by Google and designed for building web-apps, has seen a lot of adoption in the last few years. My last Google Maps demo made me think a lot about data binding and Angular.JS, and I have actually created a pen with Google Maps powered by a pre-built Angular.js directive. But, I want to take a step back and dedicate a post to various Angular.JS resources, from guides and tutorials to demos and examples to actual projects and directives.



The homepage of AngularJS is a great way to start learning about the framework, with simple examples that you can see in action and also watch YouTube videos that show how the code is put together. From there you have a tutorial, guide, and a great API reference. But there are many other websites and blogs dedicated to learning Angular.JS and here is a list of some good training resources:

Things I Wish I Were Told About Angular.js

Lessons Learned from a Large AngularJS Project

AngularJS Tutorial for creating a full-stack application

Getting started with AngularJS

Learn Angular.js with 5 Examples

Why Does Angular.js Rock?

3 Reasons to Choose Angular.JS

5 Awesome Angular Features

Use AngularJS to Power Your Web Application

More AngularJS Magic to Supercharge your Webapp

AngularJS Learning

AngularJS Intro And Hello World Example

Building Chrome Apps with Angular.js

AngularJS for jQuery Developers

AngularJS directives and JavaScript

Fun with AngularJS

Building a Spreadsheet with Angular.js

Using angularjs with a back-end API

Building huge apps with AngularJS

Google Maps Components with AngularJS

AngularJS and Google Maps

Mapping AngularJS Routes Onto URL Parameters

Using Angular.js with D3.js

Animating with AngularJS

PhoneGap and AngularJS

Quick Start Guide to PhoneGap and AngularJS

Building PhoneGap Apps with AngularJS

ArcGIS JavaScript API with Angular JS

Building Offline Applications With AngularJS and PouchDB

Extending HTML with AngularJS Directives

What about Angular.JS demos and examples? There are many interesting Angular.JS posts on reddit, ton of pens at CodePen, and a huge selection of Angular fiddles on JSfiddle. I also like this list of useful fiddles and gists collected from AngularJS forum discussions. Here are some hand picked demos and examples:

Invoicing app made with Angular JS

AngularJS and Pagination

jQuery Mobile and AngularJS

File Upload with Angular.js

Angular.JS and Flot

Angular.JS Color Selector

Angular.JS Controller and Directive Example

Load JSON with Angular.JS

AngularJS with Flickr API

Passing object to directive in AngularJS

AngularJS Shopping Cart Example

AngularJS Ball Animation

AngularJS table filtering

Using Angular.js $routeProvider

Simple Angular.js table sorting

Using $http with Angular.js

Scope with Angular.js

Angular.js ToDo List

Basic App with Angular.js

Angular.js Color Picker Demo

Simple AngularJs Data Binding Example

Android Address Book replica with AngularJs

Twitter API and Angular.js

HighCharts and Angular.js

Password validation with Angular.js

Todo App with Angular.js

Bar Chart Example with Angular.js and D3.js

Graphs and Charts with d3.js and Angular Directives

Spotify with Angular.js

Angular.js Routing example

Math Addition Example with Angular

Simple People App with Angular

Angular.js Slider with ng-switch

Filtering with Angular.js

Filter list with Angular.js

Simple Toggle Animation with AngularJS

Gallery with Angular.js

Tabs with Angular.JS

Google Map Directive for Angular.JS

Location Search with Angular JS and Google

Angular.js with HTML5 GeoLocation

AngularJS Grid with server side paging, sorting & filtering

Angular JS Example Apps

Sorting and filtering data with AngularJS

Company Guide App with AngularJS

AngularJS Books Demo App

What about interesting projects and modules for Angular.js? The Angular Modules directory, built with Angular.js page, and GitHub search for Angular.JS has a ton of useful links. Here are some hand picked Angular.js resources:

AngularUI – companion suites for AngularJS

MacGyver – AngularJS module comprised of directives, filters and utilities for quickly developing your UI

AngularGM – set of directives for embedding Google Maps in your app using the Google Maps Javascript API.

Restangular – AngularJS service that simplifies common GET, DELETE, and UPDATE requests, a perfect fit for any WebApp that consumes data from a RESTful API.

AngularJS Touch Carousel – AngularJS carousel implementation optimized for mobile devices.

highcharts-ng – AngularJS directive for Highcharts.

ngInfiniteScroll – infinite scrolling directive for AngularJS apps.

ng-table – Angular Table directive

angular-dragdrop – Drag and Drop for AngularJS

ngStorage – module that makes Web Storage working in the Angular Way.

angular-mobile-nav – angular navigation service for mobile applications

Angulartics – Web analytics for AngularJS applications

angles – angular.js wrapper for the Chart.js library.

angular-moment – Angular.JS directive for Moment.JS.

angularfire – the easiest way to wire up a backend for your Angular app.

What have I missed?

External:

Weekly Angular.js Highlights

angular-kickstart – speed up your AngularJS development and testing with a great gulpjs build system