Welcome
to my tutorial blog of AngularJS. So, what is AngularJS? It is a JavaScript
framework developed by Google. It is a client side technology to develop web
applications, more specifically single-page applications or SPA. It follows the
MVC (model–view–controller) pattern. Unlike other JavaScript frameworks,
AngularJS does not require DOM manipulation logic and it is one of the cool
features of using it. The coolest feature of AngularJS is it implements two way
data binding. So, any change on model is immediately reflected in the view without
any manual manipulation of DOM.
Don’t worry if you don’t comprehend the things I’ve told just now. I will explain the things in greater detail with example later. Enough discussion is done! Now, let’s get the hands on experience by doing some code.
To begin you don’t need to install or configure many things. All you need is a good text editor and a browser. So, open your favorite editor or IDE and start writing the Hello World example of AngularJS.
Create
a simple HTML page hello.html with the following code:
<!DOCTYPE html>
<html>
<head>
<title>Learning AngularJS</title>
</head>
<body>
<input type="text" placeholder="Write something">
<h1>You wrote: </h1>
</body>
</html>
We will convert this page to a simple AngularJS app now. You
have to download the angular.min.js script from https://angularjs.org by
just clicking the download button. You can also use the latest CDN link instead
if you want. Include the script in the header. Now, update the code like the
following:
<!DOCTYPE html>
<html ng-app>
<head>
<title>Learning AngularJS</title>
<script src="angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="textMsg" placeholder="Write something">
<h1>You wrote: {{ textMsg }} </h1>
</body>
</html>
You
have written your first AngularJS app just now. The browser should show
something like this:
There is text input field in our example. When you type anything in that input field, it will be displayed in the second line at the same time.
Let’s try to understand what we have done. The <html> tag includes a new attribute ‘ng-app’. This one is an Angular directive. Any attribute starts with ‘ng-’ is usually an Angular directive. We will find many directives in AngularJS framework. The ng-app directive will start and initialize the Angular app. The DOM elements declared inside an ng-app directive will belong to the Angular app.
We have used another directive ng-model in our example. The purpose of ng-model directive is to bind an input, select, textarea (or custom form control) to a property on the scope. In our example, ng-model directive will add a property “textMsg” into the model object of Angular called “scope” (The $scope object is a kind of JavaScript object whose properties are available to the view). Actually, we bind the “textMsg” attribute to the input field using the ng-model directive. This is an example of two way data binding. If there is a change of value in view, the model gets the change immediately. Similarly, if there is a change of value in the model, the view will be updated instantly.
Let’s try to understand what we have done. The <html> tag includes a new attribute ‘ng-app’. This one is an Angular directive. Any attribute starts with ‘ng-’ is usually an Angular directive. We will find many directives in AngularJS framework. The ng-app directive will start and initialize the Angular app. The DOM elements declared inside an ng-app directive will belong to the Angular app.
We have used another directive ng-model in our example. The purpose of ng-model directive is to bind an input, select, textarea (or custom form control) to a property on the scope. In our example, ng-model directive will add a property “textMsg” into the model object of Angular called “scope” (The $scope object is a kind of JavaScript object whose properties are available to the view). Actually, we bind the “textMsg” attribute to the input field using the ng-model directive. This is an example of two way data binding. If there is a change of value in view, the model gets the change immediately. Similarly, if there is a change of value in the model, the view will be updated instantly.
We have used an expression (between “{{” and “}}”) to display the result of data binding. Angular expressions are JavaScript-like code snippets that are usually placed in double curly braces i.e. {{ expression }}.
In this blog post, we have created our first AnguarJS app and learned about Diretives and Data binding.
No comments:
Post a Comment