AngularJS Tutorial Series – 2

This is a continued series of tutorials. Please refer to intro part here


First thing first. Since we are going to use AngularJS API, it is first important to add reference of the latest stable version to our HTML file.

<script ="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

 

Introduction to ng-directives

 

1) ng-app  2) ng-model 3) ng-bind

 

ng-app:

This is the root element. All the code inside this element will be valid Angular code. So ng-app can be applied to tags like html , head , body and also to a div tag. Please note that, there can not be nested ng-app directive within the same hierarchy. Following example uses div tag as ng-app root element.


 

ng-model:

This element is used to actually bind values to a variable. This variable can be called as Model. All types of HTML input tags come with value attribute. This attribute is directly bound to the respective variable which later can be used throughout the page. Following example binds value field of txtinput to a variable called name. All you have to do is, this:

<input id="txtinput" type="text"  ng-model="name"/>

 


 

ng-bind:

This attribute is used to bind the model. Once we have associated a value in model to any control then the primary purpose will be to use this value through out the page or may be save this value to database. The database operations we will see later in the course, for now we will bind it to a paragraph tag. Its real time binding.


 

Sample explaining above

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <title>Angular Demo</title>
</head>
 <body >
<div ng-app="">
        <input type="text"  ng-model="name" /></div>
</body>
</html>

Conclusion

Now we know the basic three attributes of Angular, we will go further to understand quick binding expression, modules and controllers.

Thank you.


GauranG


Next chapter is Here

Introduction to Angular JS – Part 1

AngularJS Introduction

angularjs


Hi Guys,

Before we learn any technology we should first understand the primary purpose of inventing it. Angular is not very old and not very new to developers as well. It comes with rich set of API for manipulating of DOM but we still first need to understand why was it invented, isn’t it?

Data Binding

Data binding directly to HTML controls is the primary objective behind finding the angular. We hardly work with any application without the database. Offcourse Similar operations can be achieved by jQuery,etc but we are going towards easier world for developers thus Angular !

Angular uses a structured MVC way to bind data to controls and it also provides two way data binding approach. Means your model bound to any text box on HTML changes immediately as user changes the data and vice versa. Nevertheless to say without any Postbacks.

Framework

Angular is a framework thus it actually can not be compared to any libraries. One can design full fledged Single Page application with Angular. Following are the things for which we can use the Angular framework:

  • Data Binding
  • Routing
  • Unit Testing
  • Dependency Injection
  • Reusable component(Directives, Custom Directives)
  • Deep linking
  • Form Validation
  • Animation support

Now you know the primary purpose of Angular. Lets see some code, especially to two way binding example:

<!DOCTYPE html>
<html data-ng-app>
<head><title>Example</title>
    https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js
</head>
<body>
Name

{{name}}

</body> </html>

Conclusion

AngularJS developed for data driven applications with data binding is the primary objective.

In next tutorial we will start with basics of Angular.

Thank you,


GauranG


Next chapter is Here