AngularJS: Data Binding

by | Nov 16, 2014 | AngularJS

In AngularJS data binding is very straight forward, you need to assign a model in the ng-model attribute and on your page you can read the model from anywhere on the page either by expressions or ng-model from another element.

<html ng-app="app.demo">
<head>
	<title>Learn AngularJS - Data Binding</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
	<script src="AppController.js"></script>
</head>
<body ng-controller="AppController">
	<input type="text" ng-model="message" />
	<div>{{message}}</div>
</body>
</html>

Above is an example of an input element taking a message as a model and then display the message result with double curly braces. The message model comes from the controller’s $scope eg. $scope.message.

angular.module("app.demo",[])
.controller("AppController", ["$scope", function($scope){
	$scope.message="default message";
}]);

You can download the original source code from GitHub: https://github.com/csharpguy76/LearnAngularJS

 

Shares

Share