AngularJS Hello World

Here is a simple “hello world” example made with AngularJS which shows the model, view and controller parts of an AngularJS app:

Example

<!DOCTYPE html>
<html ng-app="appname">
<head>
<link href="style.css" rel="stylesheet" />
</head>
<body>
	<!--  DOM element for JS controller logic -->
	<div ng-controller="appCtrl">
		<!-- This is view -->
		<p>{{greeting.text}}, world</p> <!--  Getting value of greetings text key -->
		<!-- Ending view -->
	</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>

<script>
    var appname = angular.module('appname', []); // getting appname from ng-app from HTML tag
    appname.controller('appCtrl', ['$scope', // getting app controller HTML portion
      function($scope) { // in the controller scope defining a function
        $scope.greeting = { text: 'Hello' }; //setting text parameter to Hello
    }]);
</script>
</html>

Output

Hello, world

Share

You may also like...