Brief Introduction To AngularJS With Example

Introduction

In this article, I'm going to introduce AngularJs with a simple example. Angularjs is a JavaScript framework that is developed by Google.

Angularjs

Angularjs support the JavaScript MVW framework (Model View Whatever). It is a structural framework for dynamic web apps. It supports it to running with the single page application. The main goal of it is to develop a browser-based application with a model view controller(MVC).

AngularJS is a client-side technology that gives a way to use the powerful things that magnify HTML, CSS, and JavaScript. There is another approach is followed by the angularjs which minimizes the mismatch between the document HTML and what the application wants to create with new HTML. The directive used in the angularjs for teaching the browser new syntax by the construct:

Data Binding That is written in these braces {{}}.
For the Repetition/ hiding of the DOM fragment use the DOM Control structures.
Attach the code for the DOM elements.
Create a group of HTML as a reusable component.
Support forms and form validation.

MVW (Model View Whatever)

Actually, here the MVW means that there is no effect in angular js whatever software pattern is 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 modules depend on each other, and a single module brings other additional functionality on which that module is dependent. It gives the different sets of APIs for defining these modules and linking 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, and provides 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 used as <html ng-app>
ng-bind: When we use this directive it tells the angular to replace the content defined within the HTML element with the value of a given expression. such as <span ng:bind="expression"></span>.
ng-controller: These directives attach the controller to the View. This is used as a key that defines how the angular supports the concept of the MVC.

Now we can see the simple example of angular js.

You need to download the AngularJS

Here we need to add a script of angulerJS as,

<!DOCTYPE html>
<html ng-app>

<head>
    <title>Simple Example of AngularJS</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 an AngularJS page.
ng-model: ngModel directive is used for data binding, It binds the view into the model.
{{....}}: It is used in the angularJS as an expression, It is executed when the value is changed.

Output

Display output of angularJS

Change text as the textbox text

Change text