Introduction
In this article I m going to introduce AngularJs with a simple example. Angularjs is a JavaScript framework that is developed by he Google.
Angularjs
Angularjs support the JavaScript MVW framework (Model View Whatever). It is an structural framework for dynamic web apps. It supports it to running with the single page application. The main goal of it to develop Browser based application with model view controller(MVC).
AngularJS is a client side technology that gives a way for using the powerful things that magnify the HTML,CSS and JavaScript. There is another approach is followed by the angularjs that is minimize the mismatch between the document HTML and what the application want to create by new HTML. The directive use in the angularjs for teaching the browser to new syntax by the construct:
- Data Binding That is write in these braces {{}}.
- For the Repetition/ hiding the DOM fragment use the DOM Control structures.
- Attach the code for the DOM elements.
- Create a group of HTML as reusable component.
- Support forms and form validation.
MVW (Model View Whatever)
Actually here the MVW means that there is no effect in angularjs whatever software pattern used in your app, So it is called MVW (Model View Whatever). The concept of the MVW is that there is all definitions of the module are associated with its name. All the module are depend on each other, and a single module bring other additional functionality on which that module is depend. It gives the different set of the APIs for defining these modules and link these modules through the dependency injection.
Directives in AngularJS
There are different directives that are used in the AngularJS:
- ng-model: ng-model directive is used for data binding. The main responsibility of this directive is that, it binds the View into the Model, provide validation behavior such as required, Email etc.
- ng-app: ng-app directive is used at the initial of the page that defines that this is the AngularJS page. It is use as <html ng-app>
- ng-bind: When we use this directive it tells to the angular for replacing the content define within the HTML element with the value of a given expression. such as <span ng:bind="expression"></span>.
- ng-controller: This directives attach the controller to the View. This is used as a key that defines that how the angular support the concept of the MVC.
Now we can see the simple example of angularjs:
You need to download the AngularJS
Here we need to add a script of angulerJS like as
"<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>"
<!DOCTYPE html>
<html ng-app>
<head>
<title>Simple Example of angula JS</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
Type a Text in this Textbox
<input type="text" ng-model="text" />
<h1>Hi, {{text}} </h1>
</body>
</html>
ng-app: It is the entry point in the AngularJS page. We use it for defining the page as AngularJS page.
ng-model: ngModel directive is used for data binding, It binds the view into model.
{{....}}: It is the used in the angularJS as an expression, It is execute when the value is changed.
Output:
![Display output of angularJS]()
![Change text]()