HP X3500 Wireless Mouse (Black)
As a Javascript developer, you must be wondering why you should be using AngularJs framework when there are so many other frameworks are available. Well here are some of the features and benefits of AngularJs that the javascript developer must be aware of when they are deciding which framework to pick for their project.
MVC Architecture
AngularJs implements the MVC architecture beautifully. It lets the developers just write the components of the MVC model and then it takes the rest of the magic of stringing them up together. AngularJs MVC architecture is somewhat very close to MVVM (Model-View-ViewModel). The major components of the MVC are:
Model: This is the data of the application. This data can be a static data or dynamically fetched data from the servers which can be located in different parts of the world using JSON format as the response type.
The Model (data) is just the plain old javascript object called $scope. The fact that the data which we are dealing with is vanilla javascript, this cuts down on the application boilerplate, which means that we don’t need to inherit any other framework classes, neither wrap it in proxy objects or use any special getter/setter for accessing the data.
View: This is the HTML that exists after AngularJs has parsed and compiled the HTML to include the rendered markups and bindings.
In general, the View comprises the HTML and Diirectives. So being the HTML this is the part which is visible to the users (using web browsers).
ViewModel: A viewmodel is an object that provides specific data and methods to maintain specific views.
The viewmodel is the $scope object that lives within the AngularJS application. $scope is just a simple JavaScript object with a small API designed to detect and broadcast changes to its state.
Controller: The controller actually controls the entire business logic of your application. The controller is responsible for setting the initial stage, that is, it initializes and registers the application by creating a new Angular Module.
The controller does not store the state and does not interact with remote services.
Two-Way Data Binding
Data-binding is probably the coolest and most useful feature in AngularJS. It creates a link between model and view.
Angular implements the Two-Way Data Binding which is an extraordinary feature integrated into its framework. Any changes to the view gets reflected in the model, similarly, any change in the model will reflect in the view. This is a two way process.
To use the two-way data binding, Angular provides us with the directive “ng-model”. This directive helps in binding the model to the view.
Here is the small demonstration of how the two-way data binding works.
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello, {{yourName}}!</h1>
</div>
</body>
</html>
In the above example, the input textbox and the <h1> are bind together.
Templates
In Angular, the term Template refers to a view with HTML elements.
<div ng-app="AngularApp">
<input type="text" ng-model="angular" />
${{angular}}
</div>
An Angular template looks pretty much like a markup, except for its attributes. To make it dynamic, however we need to add a controller and a model.
Below are the list of the elements and attributes which make up the template by extending the HTML vocabulary.
a) Directive – In the above example, the ng-app and ng-model are directives.
b) Markup – Binding the view with a model using the curly braces {{ angular }} (expressions) is the markup.
c) Filters – Filters are useful for formatting the value in an expression. It is very useful.
d) Form Controls – We can use Angular Form Controls to validate user inputs. Let us assume the form has an input field, which accepts email ids only. The form control will validate the input and display a message if the value is invalid.
Directives
Directives are the attributes which are attached to HTML elements. The directives when applied have to start with the prefix “ng-“. So whenever, the directive is attached to the HTML element, it tells the AngularJs that this element is now part of the angular app and it has to be treated that way.
Here is an example of another useful directive “ng-include”. This directive helps in adding the content of the .htm/.html file.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script> </head> <body> <div ng-app> <div ng-include="'hello-world.htm'"></div> </div> </body> </html>
The example has two distinct directives. The first is the ng-app to initialize the app. This will tell Angular about the app and its features. Next is the ng-include directive, which is useful for displaying data extracted from an external file.