Advertisement:
Read Later
To synchronize the data in AngularJS models(the model) and HTML elements(the view) on which AngularJS applications are contained, you have to implement Angular Data Binding methods on your code. It is easy to create an application in AngularJS; just define a variable as depicted below. After creating the application, you have to attach a controller to the application in order to define scope parameters to be bound to HTML elements.
The ng-controller directive defines the application controller. A controller is a JavaScript Object, created by a standard JavaScript object constructor.(1) Furthermore, all AngularJS properties and methods are accessible on the controller such as scope and HTTP parameters. The scope is shared between HTML(the view) and JavaScript(the controller) so that it can be changed in both ways hence the name of Angular Two-Way Data Binding.
To bind the application and the controller to an HTML element, add the ng-app directive and the ng-controller directive on the HTML element.
To bind the scope parameter to an HTML element in order to display it, use the ng-model directive as explained below.
To display the scope parameter, use the ng-bind directive or double braces {{test}}. Also, you can implement scopes anywhere if you use double braces for instance on CSS stylesheet.
Finally, I designed the demonstration page by using CSS text-shadow, color and background-color properties.
<!-- AngularJS Application and Controller -->
var app = angular.module('products', []);
app.controller('list', function($scope){
});
<!-- HTML -->
<body>
<h1>Double-Writing</h1>
<div ng-app="products" ng-controller="list">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript" src="product.js"> </script>
<input ng-model="test"></input>
<h2 style="color:white;text-shadow:2px 2px green;">{{test}}</h2>
</div>
</body>
Result:
(1) https://www.w3schools.com/angular/angular_controllers.asp