AngularJS

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.

Namaste UI (Author)

Namaste UI collaborates closely with clients to develop tailored guest posting strategies that align with their unique goals and target audiences. Their commitment to delivering high-quality, niche-specific content ensures that each guest post not only meets but exceeds the expectations of both clients and the hosting platforms. Connect with us on social media for the latest updates on guest posting trends, outreach strategies, and digital marketing tips. For any types of guest posting services, contact us on info[at]namasteui.com.