Mavengers

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.

Disadvantages of AngulaJS

Though AngularJS comes with a lot of merits, here are some points of concern:

 Not Secure : Being JavaScript only framework, application written in AngularJS are not safe. Server side authentication and authorization is must to keep an application secure.

 Not degradable: If the user of your application disables JavaScript, then nothing would be visible, except the basic page.

Advantages of AngularJS

The advantages of AngularJS are:

 AngularJS provides capability to create Single Page Application in a very clean and maintainable way.
 AngularJS provides data binding capability to HTML. Thus, it gives user a rich and responsive experience.
 AngularJS code is unit testable.
 AngularJS uses dependency injection and make use of separation of concerns.
 AngularJS provides reusable components.
 With AngularJS, the developers can achieve more functionality with short code.
 In AngularJS, views are pure html pages, and controllers written in JavaScript do the business processing.
Angular JS Tutorial 4 On the top of everything, AngularJS applications can run on all major browsers and smart phones, including Android and iOS based phones/tablets.