Last Updated: February 12, 2020

6 things you can do with Angular JS

1) Mobile apps - You can create Mobile Web Apps with AngularJS and Phonegap; there's a project that binds the awesome mobile framework LungoJS with AngularJS. It's called Lungo-Angular-Bridge or just LAB.

2) CRUD Web Apps - Probably the most common use of Angular JS. Check out the Angular-App. It includes nice examples for creating a simple CRUD application with Directives, Resources and Services.

3) Chrome Extensions - The easiest way to create a Chrome Extension (either packaged or not) is through Yeoman, its Chrome Extension Generator and then just do bower i --save angular (short notation for install and save angularjs). Remember to use the ng-csp directive at the top of the ng-app and whitelist my chrome resources with the compileProvider.

<!-- In the html -->
<!doctype html>
<html ng-app="Geomit" ng-csp>
<head>

// In your module, sometimes you need to whitelist the Chrome Extension when accesing other Extension's resources through $http
mymodule.config(['$compileProvider', function($compileProvider) {
  $compileProvider.urlSanitizationWhitelist(/^\s*(https?|file|chrome-extension):/);
}])

4) CSS3 Animations - If you use the unstable-branch (bower i --save angular-unstable) AKA version 1.1.5, you can perform cool animations with the ng-animate directive. Here's a simple slider I made in Codepen to showcase this function. The original example was taken from here. Also, you can use ng-style to change the CSS properties of HTML elements and react to changes from your controller. You can even use CSS3 transforms (still with vendor prefixes though)! So you can do things like this, were ng-style is binded to a controller function:

// From http://codepen.io/jjperezaguinaga/pen/pzoHE
<div ng-app="scrollSample" ng-controller="WrapperController" class="wrapper" ng-style="{'webkitTransform': transform()}">

// In your controller
$scope.transform = function() {
  return "rotateZ("+ degree +"deg)";
}

5) Firebase Powered Apps - The guys at Firebase created AngularFire, a AngularJS binding for their real-time backend service Firebase; now, your two way binding can be not only client side, but back-end side too. Here's the video (Realtime Web Apps with AngularJS and Firebase) with Anant Narayanan and the blog post on how to build your own Google Reader with Firebase and AngularJS. Look ma, no back end!

6) Testable JS Apps - AngularJS is fully powered with Test Suites. Read more about Full Spectrum Testing with AngularJS and Karma(Karma is what we previously knew as Testacular) or just use this small template for testing:

'use strict'

// Unit test for MyController
describe('MyController', function() {
  var controller, scope, httpBackend;
  var someService;
  var controllerInstance;

  // In case it's wrapped in a module
  beforeEach(module('MyModule'));

  beforeEach(
    inject(function(_$rootScope_, _$controller_, _$httpBackend_, _someService_){
      controller  = _$controller_;
      httpBackend = _$httpBackend_;
      scope = _$rootScope_.$new();

      someService = _someService_;
      // For integration tests, we want to also test our services
      someService.clearStuff();

      // For controllers that do http requests
      //httpBackend.expectGET('/url/to/API');     

      // You might want to start your controller here, or in each test...
      // controllerInstance = controller('MyController', {$scope: scope});
    })
  );

  //Tests
  it('should do something really nice', function() {
    // ... or start it here
    controllerInstance = controller('MyController', {$scope: scope});
  });

})

For more resources and information, check AngularJS cool people, team members, tutorials and twitter feeds: Angular JS twitter (duh); AngularJS team members Sindre Sorhus and Brian Ford, including Brian Ford blog; AngularJS "Father" Misko Hevery; AngularJS jack-of-all-trades Oliver Tupman. And just in case you are living under a rock, Google Ninja Andy Osmani and Front End God Paul Irish

#javascript

#angularjs