Support us on YouTube by Subscribing our YouTube Channel. Click here to Subscribe our YouTube Channel

Sunday, 7 February 2016

Directives in AngularJS

By
,
No comments
In this Article, we will learn about Directives in AngularJS Application. Before starting, I suggest you to read my previous articles in this series.


Directives are one of the core feature of AngularJS. Directives allow us to extend HTML with new attributes, elements and classes. Directives are used for DOM Manipulation, Data Binding, Loading View, Events firing etc. We can define Directives in multiple ways:
Some of the directives like ng-view etc. can be used as custom element.

In this Article, we will see some built in AngularJS Directive. In this series, we have already seen some of the Directives like ng-app, ng-model, ng-controller, ng-bind etc. so, I am not going to cover them again.

1. ng-init: ng-init is used to initialize special properties for ng-repeat directive and for injecting data via server side scripting language in AngularJS application. It is recommended to use controller for initializing a property/model in AngularJS application.

Example:
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="Script/angular.js"></script>
</head>
<body ng-app>
    <!--Here we initialize Name property using ng-init Directive-->
    <div ng-init="Name='Anoop'">
        <h3>ng-init Example</h3>
        Name: <input type="text" ng-model="Name"/>
    </div>
</body>
</html>
Preview:

 2. ng-repeat: ng-repeat directive repeats html elements for each item in a collection. It is much similar to foreach loop in C# or other programming language.
Example:
<!DOCTYPE html>
<html>
<head>
    <title>Directive Demo</title>
    <script src="Script/angular.js"></script>
</head>
<body ng-app>
    <!--Here we initialize Names property using ng-init Directive-->
    <div ng-init="Names=['Anoop','Akshay','Ajay','Abhishek','Arjun']">
        <h3>ng-repeat Example</h3>
        <ul>
            <!--ng-repeat directive repeats html elements for each item in a collection.-->
            <li ng-repeat="name in Names">{{name}}</li>
        </ul>
    </div>
</body>
</html>
Preview:

Example: Fetch data from Array of Objects using ng-repeat.
<!DOCTYPE html>
<html>
<head>
    <title>Directive Demo</title>
    <script src="Script/angular.js"></script>
</head>
<body ng-app>
    <!--Here we initialize Employees property using ng-init Directive-->
    <div ng-init="Employees=[
        { Name: 'Anoop', City: 'New Delhi' },
        { Name: 'Akshay', City: 'Mumbai' },
        { Name: 'Ajay', City: 'Punjab' },
        { Name: 'Arjun', City: 'Haryana' }
    ]">
        <h3>ng-repeat Example</h3>
        <table border="1" style="border-collapse:collapse">
            <tr><th>Name</th><th>City</th></tr>
            <!--ng-repeat directive repeats html elements for each item in a collection.-->
            <tr ng-repeat="Employee in Employees"><td>{{Employee.Name}}</td><td>{{Employee.City}}</td></tr>
        </table>
    </div>
</body>
</html>
Preview:

 3. ng-show/ng-hide Directive: ng-show/ng-hide directive allow us to show or hide different HTML Element based on the expression passed to that directive.
Example of ng-show directive:
<!DOCTYPE html>
<html>
<head>
    <title>ngshow Demo</title>
    <script src="Script/angular.js"></script>
</head>
<body ng-app>
    <h3>ng-show Example</h3>
    <!--Binding checkbox value with isVisible property using ng-model directive-->
    <input type="checkbox" ng-model="isVisible" /> Show Div
    <!--Here we pass isVisible expression to ng-show Directive-->
    <div ng-show="isVisible">
        Name: <input type="text" />
    </div>
</body>
</html>
Preview:
Example of ng-hide directive:
<!DOCTYPE html>
<html>
<head>
    <title>ng-hide Demo</title>
    <script src="Script/angular.js"></script>
</head>
<body ng-app>
    <h3>ng-hide Example</h3>
    <!--Binding checkbox value with isHidden property using ng-model directive-->
    <input type="checkbox" ng-model="isHidden" /> Hide Div
    <!--Here we pass isHidden expression to ng-hide Directive-->
    <div ng-hide="isHidden">
        Name: <input type="text" />
    </div>
</body>
</html>
Preview:

 4. ng-Click: ng-click directive updates the model/property of AngularJS application when an element is clicked.
<!DOCTYPE html>
<html>
<head>
    <title>ngClick Demo</title>
    <script src="Script/angular.js"></script>
</head>
<body ng-app>
    <!--Here we initialize count property using ng-init Directive-->
    <div ng-init="count=0">
        <h3>ng-click Example</h3>
        <!--Increasing and Decreasing the value of count expression using ng-click directive-->
        <button ng-click="count=count+1">Increase Value by 1</button> <button ng-click="count=count-1">Decrease Value by 1</button>
        <p>Count={{count}}</p>
    </div>
</body>
</html>
Preview:
Please visit https://docs.angularjs.org/api/ng/directive for reading more about various built in directive.
Hope you liked it. Thanks!
[Download Source Code via Google Drive]
Read More

Monday, 28 December 2015

Two way Data binding in AngularJS

By
,
1 comment
What is Two way Data binding in AngularJS?
One of the Core Feature of AngularJS which makes it popular is two way data binding. In two way data binding, any changes to the model are immediately reflected in the View and any changes in the View updates the model.


Example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Script/angular.js"></script>
    <script type="text/javascript">
    var myApp = angular.module('myApp', [])
        .controller('myController', function ($scope) {
            $scope.name = "Anoop";
        });
    </script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        Enter Name:<input type="text" ng-model="name" />
        <p>Hello! {{name}}
    </div>
</body>
</html>
In Above code, We have created a controller(i.e. myController) and registered it with myApp module. We used ng-model property for displaying the value of HTML control with the help of {{name}} Template. If we change the value in Textbox then it will update the model or If we change the value of model then it will immediately updates the View.
Preview:
I hope you like it.Thanks.
[Download Source Code via Google Drive]
Read More

Sunday, 13 December 2015

Modules and Controllers in AngularJS

By
,
No comments

In this Article, we will see the role of Modules, Controllers, $scope in AngularJS Application.
In previous AngularJS Tutorials Series, We saw


Module: Module in AngularJS applications is a container for controllers, directive, filters, services etc and helps in packaging code as reusable modules.
Creating/Defining a Module:

The first parameter in angular.module() function is the name of the module and the second parameter is an array in which we can add dependencies. Here, we have not added any external modules/Dependencies as we are trying to make this example as simple as possible.

Controller: Controller is defined by a javascript constructor function. Controller controls and acts as a brain for the View in AngularJS Application. Controller is attached to the DOM using the ng-controller directive. Controllers should only contain business logic.

Adding a Controller in our angular module:
In the above code, We have added a controller with our angular module(i.e. myApp) using Controller method of the module. In Controller method, the first parameter is name of the controller and second is function representing the controller.
$scope acts as a glue between application controller and the view. $scope is dynamically injected into controller's function. We have added some data to $scope properties.
Here, we have added our module and controller in View using ng-App and ng-controller directive of AngularJS.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Working with Controller</title>
    <script src="Script/angular.js"></script>
    <script>
        // Declare a module
        var myApp = angular.module('myApp', []);
        //Registering a controller in myApp module
        myApp.controller('myController', function ($scope) {
            $scope.Name = "Anoop Kumar Sharma";
            $scope.Website = "www.ittutorialswithexample.com";
        });
    </script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        Name:{{Name}}<br />
        Website:{{Website}}
    </div>
</body>
</html>
Let's save and run the application.
Preview:
Let's move the entire <script> to new file i.e. controller.js and add reference of that script after the angular script.
Example2.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Working with Controller</title>
    <script src="Script/angular.js"></script>
    <script src="Script/controller.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        Name:{{Name}}<br />
        Website:{{Website}}
    </div>
</body>
</html>
Script/controller.js
// Declare a module
var myApp = angular.module('myApp', []);
//Registering a controller in myApp module
myApp.controller('myController', function ($scope) {
    $scope.Name = "Anoop Kumar Sharma";
    $scope.Website = "www.ittutorialswithexample.com";
});
Preview:
Hope you like it. Thanks.
[Download Source Code via Google Drive]
Read More

Sunday, 6 December 2015

Getting Started with AngularJS

By
,
1 comment

AngularJS Tutorial

AngularJS is a Superheroic Javascript MVW Framework for building Single Page Application (SPA) and dynamic apps. Here MVW stands for Model View Whatever(that may be Model View Controller architecture or Model View View-Model architecture or MV*).  AngularJS is developed and maintained by Google.

In this tutorial Series, We will cover the following topics:
AngularJS Tutorials

Let's create our first Hello World application using AngularJS:

Go to https://angularjs.org/ and click on the Download button.
AngularJS Download
After that, a modal pop-up comes on screen. Under branch, Select 1.4x (stable) version and Select a uncompressed version of AngularJS which is best for debugging and development purpose (Select Minified version of the AngularJS for deploying your application but only if you can't use Google's CDN. The zipped version of the AngularJS contains both the builds of AngularJS, as well as documentation.)
AngularJS Download
Click on Download button.
AngularJS Download
Add Script folder in the root directory of your application and Add your downloaded Angular script in that folder.
Solution Explorer AngularJS
If you are using Visual Studio IDE, then you can also add AngularJS in your application using Nuget Packets. Right click on your project from Solution Explorer and Click on Manage Nuget Packages.
AngularJS Nuget
Search for AngularJs in Manage Nuget Packages then Click on Install for installing/Adding AngularJS in your project.
AngularJS Nuget Package Manager
Now Add angularjs script in your application. After that add ng-app directive in your application. ng-app directive can be added at document level or body level or at Div level. ng-app Directive defines angular application and used for loading various angularjs modules in the application. After that Add double curly brace notation {{ }} to bind expressions to elements is built-in Angular markup.
Hello World AngularJS Example
Code:
<!DOCTYPE html>
<html ng-app>
<head>
    <title>Angular Hello World Application</title>
    <script src="Script/angular.js"></script>
</head>
<body>
    {{4+4}}
</body>
</html>
Save and Run your application. You will see the expression inside of Markup/Template ({{}}) is evaluated.
AngularJS Basics

Let's Create Hello World Application.
Add a textbox with ng-model directive. ng-model directive binds HTML control with a model/property which is used in Angular Application. We used ng-model property for displaying the value of HTML control with the help of {{name}} Template.
Hello World AngularJS Example
Code:
<!DOCTYPE html>
<html ng-app>
<head>
    <title>Angular Hello World Application</title>
    <script src="Script/angular.js"></script>
</head>
<body>
    <input type="text" ng-model="name"/><br />
    <p>Hello {{name}}!</p>
</body>
</html>
Save and Run the Application.
AngularJS Hello World Demo
We can also do the same thing using ng-bind directive in our application. ng-bind directive binds the model value to the HTML control/View.
Code:
<!DOCTYPE html>
<html ng-app>
<head>
    <title>Angular Hello World Application</title>
    <script src="Script/angular.js"></script>
</head>
<body>
    <input type="text" ng-model="name"/><br />
    <p>Hello <span ng-bind="name"></span>!</p>   
</body>
</html>
Hope you like it.
Thanks.
[Download Source Code via Google Drive]
Read More

Subscribe us on YouTube

Subscribe Now

Popular Posts

Contact us

Name

Email *

Message *

Like us on Facebook