---
title: "Angularjs Environment setup"  
description: "Hi everyone in this article I’m explaining about Angularjs environment setup."  
author: "Anonymous User"  
published: 2015-03-18  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1670/angularjs-environment-setup  
category: "angular js"  
tags: ["angularjs directive"]  
reading_time: 3 minutes  

---

# Angularjs Environment setup

Hi everyone in this article I’m explaining about Angularjs [environment](https://answers.mindstick.com/qa/38115/according-to-the-report-released-by-the-ministry-of-environment-forests-and-climate-change-on-august-12-what-is-the-total-estimated-number-of-elephants-in-india) setup.\

##### Introduction:

In this post we will discuss about how to set up AngularJS library to be used in web [application development](https://www.mindstick.com/articles/65303/8-benefits-of-android-application-development-for-online-business). We will also briefly study the directory [structure](https://www.mindstick.com/forum/1188/how-to-create-structure-in-c) and its contents.

You can go official site of angularjs [https://angularjs.org/](https://angularjs.org/) you will see there are two options to download angularjs library.

![Angularjs Environment setup](https://www.mindstick.com/mindstickarticle/97c63077-5260-4b88-8a2e-105d8f64469b/images/be74707d-b24b-48e2-a700-00ce8c3af2ee.png)

View on GitHub- Click on this button to go to GitHub and get all of the latest scripts.

Download- Or click on this button, a screen as below would be seen:

![Angularjs Environment setup](https://www.mindstick.com/mindstickarticle/97c63077-5260-4b88-8a2e-105d8f64469b/images/452a7b07-deb0-4b46-b2e4-e4f01670d84c.png)

Example:

Now let us write a sample using angularjs.

```
<script src="~/Scripts/angular.min.js"></script> <div ng-app="myapp">    <div ng-controller="HelloController">        <h2>Welcome {{helloTo.title}} to the world of
Mindstick!</h2>    </div>    <script>        angular.module("myapp", [])        .controller("HelloController", function ($scope) {            $scope.helloTo = {};            $scope.helloTo.title =
"AngularJS";        });    </script></div>Now we describe the code in detail:<head>   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script></head>
```

Check the [latest version](https://www.mindstick.com/forum/159680/how-can-i-install-the-latest-version-of-sql-server) of AngularJS on their official website.

##### Point to AngularJS app:

Next we tell what part of the HTML contains the AngularJS app. This done by adding the ng-app attribute to the root HTML element of the AngularJS app. You can either add it to html element 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 Tutorialspoint!</h2></div>
```

ng-[controller](https://www.mindstick.com/blog/273/passing-values-from-controller-to-view-in-asp-dot-net-mvc) tells AngularJS what controller to use with this view. helloTo.title tells AngularJS to write the "model" value named helloTo.title to the HTML at this location.

Controller:

The controller part is:

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

The code is Controller

This code registers a controller function named HelloController in the angular module named myapp. We will study more about modules and controllers. The controller function is registered in angular via the angular. Module(...).controller(...) function call.

The $scope parameter passed to the controller function is the model. The controller function adds a helloTo [JavaScript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript) object, and in that object it adds a title field.

Save the above code and open in browser and you will see the out put.

When the page is loaded in the browser.

1. HTML document is loaded into the browser and evaluated by the browser. Angularjs JavaScript file is loaded, the angular global object is created. Next JavaScript which register controller function is executed.

2. Next angularjs scans through the HTML to look for AngularJS apps and views. Once view is located, it connects that view to the corresponding controller function.

3. Next, AngularJS executes the controller functions. It then renders the views with data from the model populated by the controller. The page is now ready.

---

Original Source: https://www.mindstick.com/articles/1670/angularjs-environment-setup

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
