We now have a youtube channel. Subscribe!

AngularJS | Environment Setup

AngularJS Environment Setup


Hello folks! welcome back to a new section of our tutorial on AngularJS. In this tutorial, we are going to be discussing about how to setup AngularJS Environment to be used in web development. It also quickly describes the directory structure and its contents.

Downloading Angular

When you open AngularJS homepage using the link https://angularjs.org, you will see there're two options to download AngularJS library -

AngularJS Environment Download

  • View on GitHub - By clicking on this button, you are redirected to GitHub and you will get all the latest scripts.
  • Download AngularJS 1 - By clicking on this button, you will see a screen with a dialog box as shown as -


This screen provides you various options to AngularJS as follows -

  • Downloading and hosting files locally
    • There are two options: Legacy and Latest. The names are self-descriptive. Legacy has version that's less than 1.2.x and Latest comes with version 1.8.x.
    • We can also go with the minified, uncompressed, or zip version.
  • CDN access - You also have access to a CDN. The CDN grants you access to regional data centers. In this case, the Google host. The CDN transfer duty of hosting files from your own servers to a series of external ones. It also offers an advantage that if the visitor of your site has already downloaded a copy of AngularJS from the same CDN, there's no need to re-download it.

Example

Let us create a simple example making use of AngularJS library. Let us create an HTML file myfirstexample.html as follows -

<!doctype html>
<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
   </head>
   
   <body ng-app = "myapp">
      <div ng-controller = "HelloController" >
         <h2>Welcome {{helloTo.title}} to the world of WebDesignTutorialz!</h2>
      </div>
      
      <script>
         angular.module("myapp", [])
         
         .controller("HelloController", function($scope) {
            $scope.helloTo = {};
            $scope.helloTo.title = "AngularJS";
         });
      </script>
      
   </body>
</html>

Let us go through the above code in details.

Include AngularJS

We include the AngularJS JavaScript file in the HTML page so that we can use it -

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

You can check the AngularJS latest version from its official website.

Point to AngularJS app

Next, it's required to tell which part of HTML holds the AngularJS app. You can do this by adding the ng-app attribute to the root Html element of th AngularJS app. You can either add it to the html or body element as shown below -

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

View

The view is this part -

<div ng-controller = "HelloController" >
   <h2>Welcome {{helloTo.title}} to the world of WebDesignTutorialz!</h2>
</div>

ng-controller tells AngularJS the controller to make use of with this view. helloTo.title tells AngularJS to write the model value named helloTo.title in HTML at this location.

Controller

The controller part is as follows -

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

This example registers a controller function named HelloController in the angular module named myapp. We will discuss more about modules and controllers in their respective tutorials. Controller function is registered in angular via angular.module(...).controller(...) function call.

$scope parameter model is passed to the controller function. The controller function includes a helloTo JavaScript object, and in that object it adds a title field.

Execution

Now, save the code as myfirstexample.html and open it in any browser and you will see the following result -

Welcome AngularJS to the world of WebDesignTutorialz!

What happens when the page is loaded in the browser? Let's see -

  • HTML document is loaded into the web browser, and evaluated by the browser.
  • AngularJS JavaScript file is loaded, the angular global object is created.
  • The JavaScript which registers controller functions is executed.
  • Next, AngularJS scans through the HTML to search for AngularJS app and also views.
  • Soon as view is located, it connects that view to the matching controller function.
  • Next, AngularJS executes the controller functions.
  • It renders the views with data from the model populated by the controller. The page is now ready.


Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we are going to be studying about AngularJS MVC Architecture.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2022 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain