AngularJS Tutorial Series – 4

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


Angular Modules

Modules are used for organizing the application. Means what? It means that various parts related to your application are defined in the Modules. Various parts like Controllers , Services etc.

Though we can define the Modules in same page but the recommended practice is to keep it in seperate JS file and refer it wheverever we are going to use it.

app = angular.module("myApplication", []); 

In above example Angular checks for ng-app directive through the DOM. The container which has this directive becomes the host of Angular. The app variable will have full access to angular child objects.

NOTE: It is highly recommended that we declare angular library at the head tag or at the start of the body tag. Once Angular is initialized then it will compile angular.module

Once the module is added then we can add Controllers, Custom Directives, etc.


Conclusion:

Angular modules are more like structuring your code at a common place. Angular Controllers can only be called if module is present.

Next we will see Angular controllers.


Thanks,

GauranG

AngularJS Tutorial Series – 3

This is a continued series of tutorials. Please refer to part -2 Here


Angular Expressions

syntax: {{expression}}
Expressions in Angular are used to bind data directly to HTML tags without using ng-bind anywhere in the code. The simple example to this would be-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<title>Angular Expression Demo</title>
</head>
<body ng-app="">
<div>
My name is {{ 'John Doe' }}</div>
</body>
</html>

Output
My name is John Doe


Lets go for one step higher.

<div ng-init="name='John Doe'">
     My name is <b>{{ name }} </b></div>

Output
My name is John Doe

ng-init="name='John Doe'" is used to initialize a variable name and assign a value to it ng-init="name='John Doe'". Then we are just using the variable to bind with the DOM. Like this:
My name is {{ name }}


Expressions with Numbers

The following example is quite self explanatory

<div ng-app="">
        <input type="text" ng-init="salary=50000;pf=1000;LTA=2000" />
        <span>Total Salary:{{salary+pf+LTA}}</span></div>

Output
Total Salary: 53,000.00


Mathematical expressions can be resolved like above. The best part is Angular also supports formatting.

Formatting is also referred as Filters in Angular. Following is the same example of above with Currency Filter.

<div ng-app="">
        <input type="text" ng-init="salary=50000;pf=1000;LTA=2000" />
        <span>Total Salary:{{salary+pf+LTA | currency:"₹"}}</span></div>

Output
Total Salary: ₹ 53,000.00


More about filters in later tutorials for now let’s focus back on Expressions. 🙂

Strings with Expression:

The regular string operations are supported, like concatenation for example:

<div ng-app="" ng-init="firstName='Gaurang';lastName='Naik'">

The name is {{ firstName + " " + lastName }}</div>

Output:
The name is Gaurang Naik


The Expressions can also be used with JavaScript objects.

<div ng-app="" ng-init="employee={firstName:'Vishal',lastName:'Dhawan'}"> 
The name is {{ employee.firstName }}
</div>
Output:
The name is Vishal

With Arrays

<div ng-app="" ng-init="numbers[23,06,82,13,01,84]">
The number is {{ numbers[3]  }}
</div>
Output:
The number is 13

Note: {{Expression}} can be replaced with ng-bind attribute.

Example

<div ng-app="" ng-init="numbers[23,06,82,13,01,84]"> 
The number is <span ng-bind="numbers[3]"></span>
</div>
Output:

The number is 13


Conclusion
Angular supports dynamic way of quickly binding methodology using brackets. It can resolve the expression and return the exact result. They support literals, operators, and variables.

In next chapter we will focus on Angular Modules. Stay tuned!
Thank you.


GauranG

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