A JavaScript framework (Not a library) based on MVV pattern created by Google which makes the code readable, organized and extensible. You know in large application developments especially in SPAs which has been on top during the last few years, managing and developing JavaScript in client side is so hard. AngularJS provides some powerful features for developers like Expressions, Directives, Data Binding, Filters, Partial Views, Modules, Dependency Injection, Routes, Controllers, Scope, Services… and makes the JavaScript development easier and powerful.
Based on Wikipedia, AngularJS directives allow the developer to specify custom and reusable HTML tags that moderate the behavior of certain elements.
- ng-app: Declares an element as a root element of the application allowing the behavior to be modified through custom HTML tags.
- ng-bind: Automatically changes the text of an HTML element to the value of a given expression.
- ng-model: Similar to ng-bind, but allows two-way data binding between the view and the scope.
- ng-class: Allows class attributes to be dynamically loaded.
- ng-controller: Specifies a JavaScript controller class that evaluates HTML expressions.
- ng-repeat: Instantiate an element once per item from a collection.
- ng-show & ng-hide: Conditionally show or hide an element, depending on the value of a boolean expression. Show and hide is achieved by setting the CSS display style.
- ng-switch: Conditionally instantiate one template from a set of choices, depending on the value of a selection expression.
- ng-view: The base directive responsible for handling routes that resolve JSON before rendering templates driven by specified controllers.
- ng-if: Basic if statement directive which allows showing the following element if the conditions are true. When the condition is false, the element is removed from the DOM. When true, a clone of the compiled element is re-inserted.
AngularJS features do not come in a single blog post (I'll cover all of them in the future). but for instance, run this piece of code and see the result (This is again one of those hello world samples!)
<html>
<head>
<title>Angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div> <input type="text" ng-model="SayHello"> <h1>, {{ SayHello}}!</h1> </div>
</body>
</html>