ng-async/test.html at master · DeprecatedCode/ng-async · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!doctype html>
<html ng-app="exampleApp">
<head>
  <title>AngularJS ng.async Test Page</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
  <script src="ng.async.js"></script>
  <style>
    body {
      background: #eee;
      color: #444;
      font-family: sans-serif;
      margin: 1em;
      padding: 0;
    }
    a {
      color: #9bd;
      text-decoration: none;
    }
  </style>
  <script>

    /**
     * Example Angular App using ng.async
     */
    var angular = window.angular;
    var exampleApp = angular.module('exampleApp', ['ng.async']);

    exampleApp.controller('exampleCtrl', function ($scope, $async, $timeout, $http) {

      /**
       * $scope.name will asyncronously be set to NPH
       */
      $async($scope, 'name', function (resolve) {

        $timeout(function () {
          resolve('Neil Patrick Harris');
        }, 1000);

        /**
         * Temporary values can be returned
         */
        return 'a great actor';
      });

      /**
       * A real API call to get a list of users
       */
      $async($scope, {users: function (resolve) {
        $http.get('test-data.json').success(function (users) {

          /**
           * We can chain the $async service to go deeper
           */
          users.map(function (user) {

            /**
             * Instead of making another HTTP call, let's make up some data
             */
            $async(user, 'accountBalance', function (resolve) {
              $timeout(function () {
                resolve(user.balance);
              }, 10000 * Math.random());
            });
          });

          /**
           * Let $async know that the users variable is ready
           */
          resolve(users);
        });
      }});

      /**
       * Use with a plain JS object
       */
      var data = {};

      $async(data, 'stockPrice', function (resolve) {
        $timeout(function () {
          resolve(123.45);
        }, 1000);

        return 'unknown';
      });

      console.log('Stock price:', data.stockPrice);   // unknown

      setTimeout(function () {
        console.log('Stock price:', data.stockPrice); // 123.45
      }, 1100);

    });
  </script>
</head>
<body ng-controller="exampleCtrl">
  <h1>AngularJS ng.async Test Page</h1>
  <p><a href="https://github.com/NateFerrero/ng-async">Visit ng.async on Github &raquo;</a></p>
  <hr/>
  <p><b>Actor:</b></p>
  <p>Dr. Horrible is played by {{name}}.</p>
  <hr/>
  <p><b>Users:</b></p>
  <ul>
    <li ng-repeat="user in users">{{user.name}}
      <ul><li>Bank account balance: {{user.accountBalance || 'not sure'}}</li></ul>
      <br/>
    </li>
  </ul>
</body>
</html>