Skip to content

Instantly share code, notes, and snippets.

@mschmulen

mschmulen/README.md

Last active December 24, 2015 06:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mschmulen/6755421 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mschmulen/6755421 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mschmulen revised this gist Oct 7, 2013. 1 changed file with 10 additions and 1 deletion.
    11 changes: 10 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,10 @@
    Simple Angular App Example, Disconnected and Mocked inline html and javascript
    Simple Angular App Example, Disconnected and Mocked inline html and javascript

    simply clone the repo locally and

    ```sh
    git clone https://gist.github.com/6755421.git AngularStandalone
    cd AngularStandalone
    open index.html
    ```

  2. mschmulen revised this gist Sep 29, 2013. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,2 +1 @@

    Simple Angular App Example, Disconnected and Mocked inline html and javascript
  3. mschmulen created this gist Sep 29, 2013.
    2 changes: 2 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@

    Simple Angular App Example, Disconnected and Mocked inline html and javascript
    108 changes: 108 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,108 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <body>
    <h4>Simplest Angular App - Standalone and Disconnected</h4>
    <div ng-app="myApp">
    <span ng-controller="UserCtrl">
    <ul>
    <li ng-repeat="user in users">{{user.userId}}: {{user.userName}}</li>
    <button ng-click="addUser()">Add user (HTTP PUT)</button>
    </ul>
    </span>
    </div>

    <script src="http://code.angularjs.org/1.1.1/angular.js"></script>
    <script src="http://code.angularjs.org/1.1.1/angular-mocks.js"></script>

    <script>
    'use strict';

    // ' Backend '
    var myApp = angular.module('myApp', []);

    // You can use provide to blanket replace $httpBackend with the mock
    myApp
    .config(function($provide) {
    // Decorate by passing in the constructor for mock $httpBackend
    $provide.decorator('$httpBackend', createHttpBackendMock);
    });

    // Mark urls that match regexp as a match,
    // you can pass this as the url argument to $httpBackend.[when|expect]
    angular.module('myApp')
    .run(function($httpBackend, $timeout) {
    var regexpUrl = function(regexp) {
    return {
    test: function(url) {
    this.matches = url.match(regexp);
    return this.matches && this.matches.length > 0;
    }
    };
    };

    //*******************************************
    // Allow JSONP to pass to external services (ie Solr)
    $httpBackend.when('JSONP', regexpUrl(/http:\/\/.*/))
    .passThrough();

    // Some statefullness
    var users = {};
    var userId = 0;
    $httpBackend.when('PUT', '/users')
    .respond(function(method, url, data) {
    data = angular.fromJson(data);
    users[userId] = {userName: data.userName, userId: userId};
    userId++;
    return [200, users[data.userId]];
    });

    $httpBackend.when('GET', regexpUrl(/users\/(\d+)/))
    .respond(function(method, url, data) {
    data = angular.fromJson(data);
    return [200, users[data.userId]];
    });

    $httpBackend.when('GET', '/users')
    .respond(function(method, url, data) {
    return [200, users];
    });

    // A "run loop" of sorts to get httpBackend to
    // issue responses and trigger the client code's callbacks
    var flushBackend = function() {
    try {
    $httpBackend.flush();
    } catch (err) {
    // ignore that there's nothing to flush
    }
    $timeout(flushBackend, 500);
    };
    $timeout(flushBackend, 500);
    });


    // Angular APP,
    // An actual angular app you might write using standard $http service
    myApp
    .controller("UserCtrl", function($scope, $http) {
    $scope.users = {}
    var addedUsers = 0;

    // Add a user
    $scope.addUser = function() {
    var names = ["Matt", "Jeff", "Mark", "Shivai", "James", "Vicki"];
    var sentData = {userName: names[addedUsers++ % 9]};
    $http.put('/users', sentData).success(function(data) {
    $scope.users[data.userId] = data.userName;
    });
    };

    // Get a list of all the users
    $http.get('/users').success(function(data) {
    console.log("GOT: " + data);
    $scope.users = data;
    });
    });
    </script>
    </body>