Angular JS Tutorial
Tags
wpf C# interview reflection mvvm mvvm light interface generics arraylist hashtable using design patterns visitor template flyweight strategy memento mediator command wcf instance management application architecture ajax angularjs forms validations nested forms filters controllers directives bindings expressions ng-app ng-model environment setup threading synchronization rhino mocks test doubles oops app android linq testing nunit testcase typescript javascript abstract nodejs mysql CRUD dotnetcore mvc ftp python chmod linux golang variables uuid validator ExpressJS postgresql datatypes

Forms - AngularJS

Javascript Frameworks AngularJS application angularjs forms

AngularJS provides great way to create Forms which submit their data without postback.

AngularJS Forms use two directives:

  1. ng-model: The ng-model directives is used for binding input controls to Javascript Objects.
  2. ng-submit: Bind AngularJS Controller submit function to submit event of HTML Form. It also prevents the form to submit to server directly.

AngularJS Form Example


<html>
<head>
<title>AngularJS Form Example</title>
</head>
<body ng-app="testApp" ng-controller="mainCtrl">
	<form ng-submit="submit1()">
		<p>
			Enter First Name: <input type="textbox" ng-model="user.firstName" />
		</p>
		<p>
			Enter Last Name: <input type="textbox" ng-model="user.lastName" />
		</p>
		<p>
			<input type="submit" value="Submit" />
		</p>
	</form>
	
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js" ></script>
<script>
	var app = angular.module('testApp', []);
	
	app.controller('mainCtrl', ['$scope', function($scope){
		$scope.user = {};
		$scope.user.firstName = "";
		$scope.user.lastName = "";
		$scope.submit1 = function()
		{
			console.log('FirstName: ' + $scope.user.firstName);
			console.log('LastName: ' + $scope.user.lastName);
		};
	}]);
</script>
</body>
</html>

Result:

AngularJS_Forms_Example_Result

  • In line 6 defines an testApp application using ng-app directive.
  • In line 6 defines an mainCtrl controller using ng-controller directive.
  • In line 7 defines a HTML form and ng-submit directive which bind to submit1() function of mainCtrl controller.
  • In line 9 bind the input textbox control to firstName property of user object using ng-model directive.
  • In line 11 bind the input textbox control to lastName property of user object using ng-model directive.
  • In line 15 defines a submit input control which call the submit function of mainCtrl controller.
  • In line 21 defines an AngularJS app 'testApp' using angular.module function.
  • In line 23 defines an AngularJS controller 'mainCtrl' using app.controller function.
  • In line 24 defines a user javascript object.
  • In line 25,26 create two properties firstName and lastName into user object.
  • In line 27 defines a submit function that print the firstName and lastName of user object into console.

Previous
Next