Angularjs Environment setup

Hi everyone in this article I’m explaining about Angularjs environment setup.

Introduction:

In this post we will discuss about how to set up AngularJS library to be used in web application development. We will also briefly study the directory structure and its contents.

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

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:

Example:

Now let us write a sample using angularjs.

<scriptsrc="~/Scripts/angular.min.js"></script> 
<divng-app="myapp">
    <divng-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>
   <scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

Check the latest version 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:

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

View:

The view is this part:

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

ng-controller 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 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.

articles

Angularjs Environment setup

Introduction:

Point to AngularJS app:

View:

Anonymous User

Leave Comment

Comments

Liked By