In this section we are going to look had a build this simplest Hello Word Application with possibly can use Angular. My Goal here is want end up the page put the H1, this is Hello World in it, and want using angular to display the message. So, First thing we can do to include the Angular Script on the Basic HTML page.
<script type=”text/javascript”
src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js”></script>
Now we need to create a controller. The Controller is defining by creating a function in the script tag. You can see the name this function CtrlHello. Then give this function primer called scope with the dollar sign. This is the special primer that angular uses in order to pass data in between the controller and the view.
<script type=”text/javascript”>
function CtrlHello($scope) {
$scope.HelloMessage = “Hello World”;
}
</script>
Now we are create H1 tag on the page to display Hello World message. In angular message place holder is start and stop with double curly braces. The expression is shown in bold form below. I tell Angular the h1 is control by the controller so I can declare controller name ng-controller in the h1 tag. ng is short for angular.
//<h1 ng-controller =”Name of Controller” > {{Message to Display}}!</h1>
<h1 ng-controller =”CtrlHello” > {{HelloMessage}}!</h1>
So sum up of all the above code is below , that will show Hello World message in the Browser.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<title>Hello World </title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<h1 ng-controller ="CtrlHello" > {{HelloMessage}}!</h1>
<script type="text/javascript">
function CtrlHello($scope) {
$scope.HelloMessage = "Hello World";
}
</script>
</body>
</html>
The output of the above code is
Hello World!
Dinesh Thakur holds an B.C.A, MCDBA, MCSD certifications. Dinesh authors the hugely popular