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 dshilkret

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">
    {{message}} <br />
    <button ng-click="changeMessage()">Change Message</button>
  </div>
</div>

JavaScript

// 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.
var module = angular.module("myModule", []);

// 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) {
	$scope.message = "Hello World";
  
  $scope.changeMessage = function() {
    // when you change a variable in the $scope
    // the UI is automatically updated with the change
		$scope.message = "Hello Universe!";
  };
});