AngularJS Web application development Cookbook: Over 90 hands-on recipes to architect performant applications and implement best practices in AngularJS

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.data = {
    text: 'The QUICK brown Fox JUMPS over The LAZY dog',
    nums: '0123456789',
    specialChars: '!@#$%^&*()',
    whitespace: '   '
  };
});

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <p>{{ data.text | uppercase }}</p>
    <p>{{ data.nums | uppercase }}</p>
    <p>{{ data.specialChars | uppercase }}</p>
    <p>_{{ data.whitespace | uppercase }}_</p>
  </div>
</div>

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG...

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.data = {
    bignum: 1000000,
    num: 1.0,
    smallnum: 0.9999,
    tinynum: 0.0000001
  };
});

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <p>{{ data.bignum | number }}</p>
    <p>{{ data.num | number }}</p>
    <p>{{ data.smallnum | number }}</p>
    <p>{{ data.tinynum | number }}</p>
  </div>
</div>

1,000,000
1
1.000
1e-7

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.data = {
    unix: 1394787566535,
    iso: '2014-03-14T08:59:26Z',
    date: new Date(2014, 2, 14, 1, 59, 26, 535)
  };
});

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <p>{{ data.unix | date }}</p>
    <p>{{ data.iso | date }}</p>
    <p>{{ data.date | date }}</p>
  </div>
</div>

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.user = {
    id: 123,
    name: {
      first: 'Jake',
      last: 'Hsu'
    },
    username: 'papatango',
    friendIds: [5, 13, 3, 1, 2, 8, 21], 
    // properties prefixed with $$ will be excluded
    $$no_show: 'Hide me!'
  };
});

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <pre>{{ user | json }}</pre>
  </div>
</div>

{
  "id": 123,
  "name": {
    "first...

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.val = 1234.56789;
});

data | filter : optionalArgument

<p>{{ val | number : 4 }}</p>

1,234.5679

(app.js)

angular.module('myApp', [...

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.users = [
    'Albert Pai',
    'Jake Hsu',
    'Jack Hanford',
    'Scott Robinson',
    'Diwank Singh'
  ];
});

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.users = [
    {name: 'Albert Pai'}, 
    {name: 'Jake Hsu'},
    {name: 'Jack Hanford'},
    {name: 'Scott Robinson'},
    {name: 'Diwank Singh'}
  ];
});

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <input type="text" ng-model="search.val" />
    <!—- simple repeater filtering against search.val...

(app.js)

angular.module('myApp', [])
.filter('simpletruncate', function () {
  // the text parameter 
  return function (text) {
    var truncated = text.slice(0, 100);
    if (text.length > 100) {
      truncated += '...';
    }
    return truncated;
  };
});

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function($scope) {
  $scope.users = [
    { 
      firstName: 'John',
      lastName: 'Stockton'
    },
    {
      firstName: 'Michael',
      lastName: 'Jordan'
    }
  ];
});

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function($scope) {
  $scope.users = [
    { 
      firstName: 'John',
      lastName: 'Stockton',
      number: '12'
    },
    {
      firstName: 'Michael',
      lastName: 'Jordan',
      number: '23'
    },
    {
      firstName: 'Allen',
      lastName: 'Iverson',
      number: '3'
    }
  ];
});

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function($scope) {
  $scope.users = [
    { 
      firstName: 'John',
      lastName: 'Stockton',
      number: '12'
    },
    {
      firstName: 'Michael',
      lastName: 'Jordan',
      number: '23'
    },
    {
      firstName: 'Allen',
      lastName: 'Iverson',
      number: '3'
    }
  ];
});

(app.js)

.filter('userSearch...

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function ($scope) {
  $scope.users = [
    ...
  ];
  $scope.usermatch = function (user) {
    if (!angular.isDefined(user) || 
        !angular.isDefined($scope.search)) {
      return false;
    }
    var nameMatch = false,
      numberMatch = false;
    if (angular.isDefined($scope.search.name) && 
        $scope.search.name.length > 0) {
      if (angular.isDefined(user.firstName)) {
        nameMatch = nameMatch || 
          user.firstName.indexOf($scope.search.name) > -1;
      }
      if (angular.isDefined(user.lastName)) {
        nameMatch = nameMatch || 
          user.lastName.indexOf($scope.search.name) &gt...

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function($scope, MyFactory) {
  $scope.data = MyFactory.getPlayer();
  $scope.update = MyFactory.swapPlayer;
})
.factory('MyFactory', function() {
  // private variables and functions
  var player = {
    name: 'Peyton Manning',
    number: 18
  },  swap = function() {
    player.name = 'A.J. Green';
  };
  // public API
  return {
    getPlayer: function() {
      return player;  
    },
    swapPlayer: function() {
      swap();
    }
  };
});

(app.js)

angular.module('myApp', [])
.controller('Ctrl', function($scope, MyService) {
  $scope.data = MyService.getPlayer();
  $scope.update = MyService.swapPlayer;
})
.service('MyService', function() {
  var player = {
    name: 'Philip Rivers',
    number: 17
  },  swap = function() {
    player.name = 'Alshon Jeffery';
  };
  this.getPlayer = function() {
    return player;  
  };
  this.swapPlayer = function() {
    swap();
  };
});

(index.html)

<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <button ng-click="update()"&gt...

(app.js)

angular.module('myApp', [])
.config(function(PlayerProvider) {
  // appending 'Provider' to the injectable 
  // is an Angular config() provider convention
  PlayerProvider.configSwapPlayer();
  console.log(PlayerProvider.configGetPlayer());
})
.controller('Ctrl', function($scope, Player) {
  $scope.data = Player.getPlayer();
  $scope.update = Player...

(app.js)

angular.module('myApp', [])
.config(function($provide) {
  $provide.decorator('Player', function($delegate) {
    // $delegate is the Player service instance
    $delegate.setPlayer('Eli Manning');
    return $delegate;
  });
})
.controller('Ctrl', function($scope, Player) {
  $scope.data = Player.getPlayer();
  $scope.update = Player.swapPlayer;
})
.factory('Player', function() {
  var player = {
    number: 10
  },  swap = function() {
    player.name = 'DeSean Jackson';
  };
  
  return {
    setPlayer: function...