Mavengers

AngularJs ng-init directive

The ng-init directive initializes an AngularJS Application data.

It is used to assign values to the variables.

In the following example, we initialize an array of countries. We use JSON syntax to define the array of countries.

<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">

AngularJs ng-app directive

The ng-app directive starts an AngularJS Application.

It defines the root element.

It automatically initializes or bootstraps the application when the web page containing AngularJS Application is loaded.

It is also used to load various AngularJS modules in AngularJS Application.

In the following example, we define a default AngularJS application using ng-app attribute of a

element.

</body?

AngularJS directives

AngularJS directives are used to extend HTML. They are special attributes starting with ng-prefix. Let us discuss the following directives:

 ng-app - This directive starts an AngularJS Application.

 ng-init - This directive initializes application data.

 ng-model - This directive defines the model that is variable to be used in AngularJS.

 ng-repeat - This directive repeats HTML elements for each item in a collection.

Angularjs enter input field and display that field value

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
</head>
<body ng-app="">

<div>

<p> Enter Name : <input type="text" ng-model="name"/> </p>

<p> Name : <span ng-bind="name"/> </p>

</div>

</body>
</html>

Angularjs app understanding

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.3.0-beta.17/angular.min.js"></script>
</head>

Point to AngularJS app

Next, it is required to tell which part of HTML contains the AngularJS app. You can do this 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 tutorial point</h2>

</div>

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

Controller

<script>

angular.module("myapp",[])
   .controller("HelloController",function($scope)
   {
   $scope.helloTo=[];
   $scope.helloTo.Title="AngularJS";

   });

</script>

AngularJS First App

<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 tutorial point</h2>

</div>

<script>

angular.module("myapp",[])
.controller("HelloController",function($scope)
{
$scope.helloTo=[];
$scope.helloTo.Title="AngularJS";

});

</script>

</body>
</html>

AngularJS Directives

The AngularJS framework can be divided into three major parts:

 ng-app : This directive defines and links an AngularJS application to HTML.

 ng-model : This directive binds the values of AngularJS application data to HTML input controls.

 ng-bind : This directive binds the AngularJS application data to HTML tags.