angularJS helloworld sample program

30 Apr 2018 oracleappsadmin

AngularJS is a Javascript Framework which  extends HTML with ng-directives. Below are the directives shown:

  1. ng-app directive defines an AngularJS application
  2. ng-init directive initializes AngularJS application variables
  3. ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
  4. ng-bind directive binds application data to the HTML view

The following steps will be performed when executing the angularJS in the HTML Page

  1. Load the angularJS Framework
  2. Define the usage of the angularJS Application by using ng-app directive
  3. Usage of the initialization by using the ng-init directive
  4. Define the model name by using ng-model directive
  5. Binding of the defined model ng-bind directive

Sample Code

<!doctype html>
<html>

<head>
<script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js”></script>
</head>

<body ng-app = “myapp”>

<div ng-controller = “HelloController” >
<h2>Welcome {{helloTo.title}} to the world of AngularJS!</h2>
</div>

<script>
angular.module(“myapp”, [])

.controller(“HelloController”, function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = “User”;
});
</script>

</body>
</html>