JSFiddle

  • Reused promise #6 is the latest revision

    This shows that promises can be reused, so if you want to expose an API for deferred loading you simply keep track of a single deferred.

    (function (app) {
        
        function DelayedService($q) {
            var _this = this;
            this.defer = $q.defer();
            setTimeout(function () {
                _this.defer.resolve([1,2,3 ...
  • Qorlate - Promise correlation

    Use this library for disconnected promises to return a consistent API to the developers even when commands are returned asynchrnously or queuedl later.

    (function (qlate) {
    
        function getByValOrFn(ref) {
            return angular.isFunction(ref) ? ref() : ref;
        }
    
        function IdProvider() {}
    
        angular.extend(IdProvider.prototype, {
            id: 1,
            getId ...
  • Promises for Delayed Initialization

    Demonstrates a module that must initialize first and how to queue promises to initialize once but satisfy all requests.

    (function (app) {
        
        function DelayService($q) {
            var _this = this;
            this.$q = $q;
            this.loaded = false;
            this.resolutions = [];
            setTimeout(function () {
                _this.loaded ...
  • AJAX Query with jQuery

    Simple example of populating a list with jQuery AJAX.

    (function () {
        $.ajax({
            type: 'Get',
            url: 'http://services.odata.org/V4/OData/OData.svc/Products',
            success: function (result) {
                var idx = 0 ...
  • Don't Munge the DOM! #3 is the latest revision

    Examples of directives for DOM interaction

    (function (app) {
    
        function SizeService() {
            this.width = 0;
            this.height = 0;
        }
    
        app.directive('giveFocus', ['$timeout', function ($timeout) {
            return {
                restrict: 'A',
                replace ...
  • No $emit or $broadcast #11 is the latest revision

    Example using properties and services to share information rather than relying on $scope.$emit and $scope.$broadcast

    (function (app) {
    
        var genders = ['Male', 'Female'],
            labels = ['boy', 'girl'];
    
        function GenderService() {}
    
        angular.extend(GenderService.prototype, {
            getGenders: function () {
                return genders.slice ...
  • Avoiding Excess Watches using ECMAScript 6 #15 is the latest revision

    Example of avoiding the use of watch.

    (function (app) {
        
        var genders = ['Male', 'Female'],
            labels = ['boy', 'girl'];
            
        function BadController($scope) {
            $scope.genders = genders;
            $scope.selectedGender = genders[0];
            $scope ...
  • $scope vs. Controller As #4 is the latest revision

    Example of $scope vs. Controller As

    (function () {
        var app = angular.module('myApp', []);
        
        function BadController($scope) {
            
            $scope.notValid = function () {
                var bad = !!$scope.name;
                return !bad || $scope.name ...
  • Constants #2 is the latest revision

    Make a constant value

    (function () {
        
        function makeConstant(name, val) {
        
            var x = val; 
            Object.defineProperty(window, name, {
                enumerable: true,
                configurable: false, 
                get: function () {
                    return x ...
  • Tools: AngularJS: From a Different Angle

    Example from AngularJS Talk

    (function () {
    
        var myApp = angular.module('myApp', []);
        baseService = {
            baseUrl: 'http://services.odata.org/V4/OData/OData.svc/Products',
            get: function () {
                var ...