Environment Setup of AngularJS

AngularJS is distributed and can be added to a web page using a script tag. So let’s write a simple example using AngularJS library and create an HTML file firstangularjs.html as below:

<!doctype html>
<html>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
   </head>
   <body ng-app="myapp">
      <div ng-controller="WebController" >
         <h2>Welcome {{myweb.title}}! How are you feeling?</h2>
      </div>
      <script>
         var myapp = angular.module("myapp", []);
         myapp.controller("WebController", function($scope) {
            $scope.myweb = {};
            $scope.myweb.title = "AngularJS";
         });
      </script>
   </body>
</html>

Environment Setup of AngularJS:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

AngularJS app point:

Now we have to mention what part of the HTML contains the AngularJS app. So you can either add ng-app attribute to html element or body element as shown below:

<body ng-app="myapp">
</body>

The view is:

<div ng-controller="WebController" >
<h2>Welcome {{myweb.title}}! How are you feeling?</h2>
</div>

ng-controller tells AngularJS what controller we have to use in this view. myweb.title tells AngularJS to write the “model” value named myweb.title to the HTML at this location.

The controller part:

<script>
var myapp = angular.module("myapp", []);
myapp.controller("WebController", function($scope) {
$scope.myweb = {};
$scope.myweb.title = "AngularJS";
});
</script>

This code registers a controller function named WebController in the angular module named myapp.

The $scope parameter passed to the controller function and the controller function adds a myweb JavaScript object and in that object it adds a title field.
Save the above code as firstangularjs.html and open it in any browser.