JSFiddle - React, Tailwind, and code Playground

aplication angular

by oktaviardi pratama

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myNoteApp" ng-controller="myNoteCtrl">
  
  <h2>My Note</h2>


<textarea ng-model="message" cols="40" rows="10"></textarea>

<p>
<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>
</p>

  <p>Number of characters left: <strong ng-bind="left()"></strong></p>
</div>

<p>
  An ng-bind directive binds the controller function left() to a < span > displaying the characters left:
</p>
  
  
  <h2>AngularJS Application Skeleton</h2>
<p>Above you have the skeleton (scaffolding) of a real life AngularJS, 
single page  
application (SPA).</p>
<p>The &lt;html&gt; element is the "container" for the AngularJS application (<strong>ng-app=</strong>).</p>
<p>A &lt;div&gt; elements defines the scope of an AngularJS controller 
(<strong>ng-controller=</strong>).</p>
<p>You can have many controllers in one application.</p>
<p>An application file (<strong>my...App.js</strong>) defines the application 
module code.</p>
<p>One or more controller files (<strong>my...Ctrl.js</strong>) defines the controller 
code.</p>

JavaScript

var app = angular.module("myNoteApp", []);
app.controller("myNoteCtrl", function($scope) {
    $scope.message = "";
    $scope.left  = function() {return 100 - $scope.message.length;};
    $scope.clear = function() {$scope.message = "";};
    $scope.save  = function() {alert("Note Saved");};
});