AngularJS Environment Setup

AngularJS Environment Setup

Reading Add Comment

How to Setup Environment of Angular JS 

In this part we will examine about how to set up AngularJS library to be utilized as a part of web application advancement. We will likewise quickly ponder the index structure and its substance.

When you open the connection https://angularjs.org/, you will see there are two alternatives to download AngularJS library:




-  View on GitHub- Click on this catch to go to GitHub and get the majority of the most recent scripts.

-  Download- Or tap on this catch, a screen as underneath would be seen:



This screen gives different choices of utilizing Angular JS as takes after:

# Downloading and facilitating records generally

         There are two unique choices legacy and most recent. The names itself are self unmistakable.              legacy has form under 1.2.x and most recent has 1.3.x rendition.

         We can likewise run with the minified, uncompressed or compressed form.

# CDN access: You additionally have entry to a CDN. The CDN will give you access the world over   to territorial server farms that for this situation, Google host. This implies utilizing CDN moves the   obligation of facilitating records from your own servers to a progression of outer ones. This           likewise offers leeway that if the guest to your site page has officially downloaded a duplicate of     AngularJS from the same CDN, it won't need to be re-downloaded.

We are utilizing the CDN adaptations of the library all through this instructional exercise.

Example


Presently give us a chance to compose a straightforward illustration utilizing AngularJS library. Give us a chance to make a HTML record myfirstexample.html as underneath:

<!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="HelloController" >
         <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
      </div>
      <script>
         angular.module("myapp", [])
         .controller("HelloController", function($scope) {
            $scope.helloTo = {};
            $scope.helloTo.title = "AngularJS";
         });
      </script>
   </body>
</html>
Following sections describe the above code in detail:

Include AngularJS

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

Point to AngularJS app

Next we tell what a piece of the HTML contains the AngularJS application. This done by including the ng-application ascribe to the root HTML component of the AngularJS application. You can either add it to html component or body component as demonstrated as follows:

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

View

The view is this part:
<div ng-controller="HelloController" >
   <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>
ng-controller advises AngularJS what controller to use with this perspective. helloTo.title advises AngularJS to compose the "model" worth named helloTo.title to the HTML at this area.

Controller

<script>
   angular.module("myapp", [])
   .controller("HelloController", function($scope) {
      $scope.helloTo = {};
      $scope.helloTo.title = "AngularJS";
    });
</script>
This code enlists a controller capacity named HelloController in the precise module named myapp. We will consider all the more about modules and controllers in their separate sections. The controller capacity is enrolled in precise by means of the angular.module(...).controller(...) capacity call. 

The $scope parameter went to the controller capacity is the model. The controller capacity includes a helloTo JavaScript object, and in that protest it includes a title field.

Execution

Save the above code as myfirstexample.html and open it in any program. You will see a yield as beneath:

At the point when the page is stacked in the program, taking after things happen: 

HTML archive is stacked into the program, and assessed by the program. AngularJS JavaScript document is stacked, the precise worldwide article is made. Next, JavaScript which enlists controller capacities is executed. 

Next AngularJS look over the HTML to search for AngularJS applications and perspectives. When perspective is found, it join that view to the comparing controller capacity. 

Next, AngularJS executes the controller capacities. It then renders the perspectives with information from the model populated by the controller. The page is currently prepared.

0 comments:

Post a Comment

Subscribe to: Post Comments ( Atom )

My Instagram