Angularjs

Angular JS application

Let’s create an ANgular JS application with a text area of length 200characters with 2 buttons named save and clear.also we will have a string below where it would show no of characters left after typing in text area.

Index.html:


<!DOCTYPE html>
<html ng-app="mynewapp">
  <head>
    <script data-require="[email protected]*" data-semver="1.3.0-beta.5"
    src="<a href="https://code.angularjs.org/1.3.0-beta.5/angular.js%22%3E%3C/script">https://code.angularjs.org/1.3.0-beta.5/angular.js"&gt;&lt;/script</a>&gt;
    &lt;link rel="stylesheet" href="style.css" /&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="mynewappcontroller"&gt;
    &lt;h1&gt;My New Application&lt;/h1&gt;
    &lt;p&gt;&lt;textarea ng-model="message" cols="40" rows="10"&gt;&lt;/textarea&gt;&lt;/p&gt;
&lt;p&gt;
&lt;button ng-click="save()"&gt;Save&lt;/button&gt;
&lt;button ng-click="clear()"&gt;Clear&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;Number of characters left: &lt;span ng-bind="left()"&gt;&lt;/span&gt;&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

script.js:


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

 

Output:

The Output would be like:

AngularJS_application

 

© 2015, www.techkatak.com. All rights reserved.