AngularJS is suitable for creating AJAX based dynamic applications and applications which require a lot of DOM content manipulations. For example: AngularJS is the best way for creating single app websites. AngularJS helps you to build such kinds apps with less code and more flexibility.
Example
Here is an AngularJS example app which covers almost all the basics of AngularJS.
<html>
<head>
<title>AngularJS Tutorial</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div ng-app="qnimate">
<div ng-controller="ctrlOne">
<h3>Title is: {{title}}</h3>
<span>Article Meta: Author is {{meta[0].name}} and was published on {{meta[1]}}</span><br>
<input type="text" ng-model="comment"><br>
<span>Type Your Comment: {{comment}}</span><br>
<p>
Other Comments:
<ul>
<li ng-repeat="singleComment in comments">
{{ singleComment.name + ', ' + singleComment.comment }}
<br>
</li>
</ul>
</p>
<p>
Related Articles
<ul ng-hide="hsVar">
<li ng-repeat="article in articles | orderBy:'comments'">
{{ (article.title + ', ' + article.comments) | uppercase }}
<br>
</li>
</ul>
</p>
<button ng-click="hsVar = !hsVar">Hide/Show Related Articles</button>
<button ng-click="alert();">Display Alert Box</button>
</div>
<div ng-controller="ctrlTwo">
</div>
</div>
<script>
var qnimate = angular.module('qnimate', []);
qnimate.controller('ctrlOne', function($scope, $http) {
$scope.title= "AngularJS Tutorial";
$scope.meta = [{"name": "Narayan Prusty"}, "26 Nov"];
$http.get("http://localhost/data.php").success(function(response){
$scope.comments = response.comments;
});
$scope.articles = [{"title": "Title 1", "comments": "Comments 3"}, {"title": "title 2", "comments": "Comments 1"}];
$scope.alert = function(){
alert("Hello");
}
});
</script>
</body>
</html>
Here is the content of data.php file
header('Content-Type: application/json');
?>
{
"comments" : [{"name": "Name 2", "comment": "Comment 1"}, {"name": "Name 1", "comment": "Comment 2"}]
}
Code Explanation
AngularJS follows MVC(Model-View-Controller) pattern of programming. Models are JavaScript variables or HTML input elements. View is the HTML markup(i.e., Angular directives) and AngularJS expressions which displays the models. Controller is used to group models and views together i.e., creates scopes(aka connects models and views) so that using JavaScript we can modify models dynamically. All the controllers are placed inside a AngularJS app.
AngularJS apps are written using directives(i.e., ng-* attributes) and expressions. When a directive is applied to an HTML element, the directive callback is executed by passing a reference to that HTML element. The callback decides what to do with it. For example: directives are used to defines models & controllers, they are used to manipulate DOM based on model value, filter models and also trigger events on the controller. You can also create your own directives and add them via AngularJS extensions. All the AngularJS directives except ng-app, ng-controller and ng-model are part of the view.
AngularJS also provides model validation. Every Model can be turned into true or false value using its $error property’s specific validation function. Every model is given an error property by AngularJS.
