AngularJS – My First Hello World

admin | Posted on May 11, 2021 |

Step 01)

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body>

</body>
</html>

Step 02)

Second step is to create an angular module and define a Controller. The job of controller is to control the information that we put on page or in editing scenario controller save the information that use is typing into the page.

I am creating a separate javascript file and add the angular code.

var app = angular.module("app", []);
app.controller("HelloController", function($scope) {
  $scope.message = "Hello, AngularJS";	
});

As you can see in about code snippet, I called module() function of angular global variable and pass the module name. This module has function call controller() which we can use to define our firstHelloController.

As you can see in above code snippet, controllers are just functions. We don’t invoke this functions but angular will call this controller function when it need to manage the section of HTML page which has ng-controller directive. When Angular create controller, it pass the parameter to function called $scope. We can attached our models or data to this $scope variable.

Step 03)

To use the controller on page, we need to use a directive called ng-controller. Its an attribute which place in HTML and used to controller some area in HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS</title>
<script type="text/javascript" src="resources/js/angular.js"></script>
<script type="text/javascript" src="resources/js/script.js"></script>
</head>
<body ng-app="app">
	<div ng-controller="HelloController">
		<h2>{{message}}</h2>
	</div>
</body>
</html>

Remember, $scope is not the model but the things that we attached to it are the model. In the above code snippet, we only attached a single property to the $scope called message which points to a string value. This one will make messages available to us inside HTML so we can data bind into the display.

Leave a Reply Cancel reply