A Sample Application in Angular.JS

The code below uses the Angular.JS library to present a simple application for adding and removing animals from the roster of a zoo. To see it in action, copy it into an .html file and open that file in a web browser that runs JavaScript.

The code is adapted from a sample found at the URL “http://www.w3schools.com/angular/angular_application.asp”.

AngularJSApplication

<html>

<head>
	<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>

<body>
	
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

	// Adapted from a sample found at the URL:
	// http://www.w3schools.com/angular/angular_application.asp

	var app = angular.module("myZooRoster", []); 
	app.controller
	(
		"myController", 
		function($scope) 
		{
			$scope.animals = 
			[ 
				"Aardvark", "Orangutan", "Zebra"
			];

			$scope.addAnimal = addAnimal.bind($scope);
			
			$scope.removeAnimal = removeAnimal.bind($scope);
		}
	);

	function addAnimal() 
	{
		this.errortext = "";
		var animalToAdd = this.animalToAdd;
		if (animalToAdd != null) 
		{
			var isAnimalAlreadyInList = 
			(
				this.animals.indexOf(animalToAdd) >= 0
			);	
			
			if (isAnimalAlreadyInList == false) 
			{
				this.animals.push(animalToAdd);
			} 
			else 
			{
				this.errortext = "The animal is already on your roster.";
			}
		}
	}

	function removeAnimal(animalToRemove) 
	{
		this.errortext = "";
		this.animals.splice(animalToRemove, 1);
	} 

</script>

<!-- angular template -->

<div 
	ng-app="myZooRoster" 
	ng-cloak 
	ng-controller="myController" 
	class="w3-card-2 w3-margin" 
	style="max-width:400px;"
>
	<header class="w3-container w3-light-grey w3-padding-hor-16">
		<h3>My Zoo Roster</h3>
	</header>
	<ul class="w3-ul">
		<li ng-repeat="animal in animals" class="w3-padding-hor-16">
			{{animal}}
			<span 
				ng-click="removeAnimal($index)" 
				style="cursor:pointer;" 
				class="w3-right w3-margin-right"
			>
				[remove]
			</span>
		</li>
	</ul>
	<div class="w3-container w3-light-grey w3-padding-hor-16">
		<div class="w3-row w3-margin-top">
			<div class="w3-col s10">
				<input 
					placeholder="Add animals here" 
					ng-model="animalToAdd" 
					class="w3-input w3-border w3-padding"
				>
			</div>
			<div class="w3-col s2">
				<button 
					ng-click="addAnimal()" 
					class="w3-btn w3-padding w3-green"
				>
					Add
				</button>
			</div>
		</div>
		<p class="w3-padding-left w3-text-red">{{errortext}}</p>
	</div>
</div>

</body>
</html>
Advertisements
This entry was posted in Uncategorized and tagged , , . Bookmark the permalink.

One Response to A Sample Application in Angular.JS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s