AngularJS Online - Test your code on the web

Write and test AngularJS code right in your browser. A simple template to get you started.

by embertelen

HTML

<!-- 
AngularJS Online - Test your code on the web
Author: @luisperezphd

ng-app - associates your div with your module. Don't forget 
this attribute otherwise nothing will work.
-->
<div ng-app="myModule">
  <!--
  ng-controller - associates any HTML element with any of the 
  controllers in your module.
  -->
  <div ng-controller="myController">
    {{$root.message}} <br />
    {{listingData()}} <br />
  </div>
</div>

JavaScript

var module = angular.module("myModule", []);

module.run(function($rootScope, commonService) {
      var promise = commonService.test();
      promise.then(
        function(payload) {
            console.log(payload.data);
            $rootScope.listingData = payload.data;
						$rootScope.message = $rootScope.listingData.val
        },
        function(errorPayload) {
            console.log('ehhh');
        });
});
module.factory('commonService', ['$http', function ($http) {

  return {
      test: function() {
        return $http({
           	method: 'POST',
    				url: '/echo/json/',
    				data: {
							json: JSON.stringify({
            		val: 'Echo!'
        			}),        		
							delay: 2,
    				},
						headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            dataType: 'json',
            transformRequest: function(obj) {
              var str = [];
              for(var p in obj)
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
              return str.join("&");
            }
			})
	}};
}]);


// Define your module. Your module will contain all your
// AngularJS components, including your controllers,
// directives and services.

// Don't forget the square brackets [] when you define
// your module.


// Define you controllers. You bind these to your HTML
// elements using the "ng-controller" attribute.
//
// The $scope  is how you share data and functions 
// between the HTML and your controller.
module.controller("myController", function($scope, $rootScope) {
	//...
  $scope.listingData = function(){
  	return $rootScope.listingData;
  }
	
});