2015 ~ IT Tutorials with Example

Monday, 28 December 2015

Monday, December 28, 2015

Two way Data binding in AngularJS

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>

<head>

var myApp = angular.module('myApp', [])

.controller('myController', function ($scope) {

$scope.name = "Anoop";

});

</script>

</head>

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]

Sunday, 13 December 2015

Sunday, December 13, 2015

Modules and Controllers in AngularJS

By Anoop Kumar Sharma

AngularJS, Javascript

No comments

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

Getting Started with AngularJS

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>

<head>

<title>Working with Controller</title>

// 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>

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>

<head>

<title>Working with Controller</title>

</head>

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]

Sunday, 6 December 2015

Sunday, December 06, 2015

Getting Started with AngularJS

By Anoop Kumar Sharma

AngularJS, Javascript

1 comment

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:

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

Go to https://angularjs.org/ and click on the Download button.

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.)

Click on Download button.

Add Script folder in the root directory of your application and Add your downloaded Angular script in that folder.

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.

Search for AngularJs in Manage Nuget Packages then Click on Install for installing/Adding AngularJS in your project.

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.

Code:

<!DOCTYPE html>

<head>

<title>Angular Hello World Application</title>

</head>

<body>

</body>

</html>

Save and Run your application. You will see the expression inside of Markup/Template ({{}}) is evaluated.

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.

Code:

<!DOCTYPE html>

<head>

<title>Angular Hello World Application</title>

</head>

<body>

<p>Hello {{name}}!</p>

</body>

</html>

Save and Run the Application.

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>

<head>

<title>Angular Hello World Application</title>

</head>

<body>

<p>Hello <span ng-bind="name"></span>!</p>

</body>

</html>

Hope you like it.
Thanks.

[Download Source Code via Google Drive]

Tuesday, 6 October 2015

Tuesday, October 06, 2015

Accordion control in Ajax Control Toolkit (ASP.Net)

By Anoop Kumar Sharma

ASP.NET

No comments

In this Article, We will learn How to use Accordion control of AJAX Control Toolkit in ASP.Net.

Accordion control provides us multiple collapsible panes or panels where only one can be expanded at a time. Each AccordionPane control has a template for its Header and its content. Before proceeding, I recommend you to read:
How to add an AJAX Control Toolkit in Visual Studio

Let's Begin:

1) Go to File -> New -> Website and Create an Empty Website. Add a webform(Default.aspx) in it.
2) Add ScriptManager from AJAX Extensions (from v15.1 of AJAX Control Toolkit, ToolScriptManager is removed. Use Standard Script Manager).

3) Go to AJAX Control Toolkit in Toolbox and drop Accordion Control on Default.aspx.

4) Add AccordionPane in Panes collection of the Accordion.

AccordionPane contains two parts i.e. Header and Content. When AccordionPane is collapsed, only Header part is visible to us.

Code (Default.aspx):

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!DOCTYPE html>

<title>Accordion Demo</title>

<style>

.headerCssClass{

background-color:#c33803;

color:white;

border:1px solid black;

padding:4px;

}

.contentCssClass{

background-color:#e59a7d;

color:black;

border:1px dotted black;

padding:4px;

}

.headerSelectedCss{

background-color:#808080;

color:white;

border:1px solid black;

padding:4px;

}

</style>

</head>

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<ajaxToolkit:Accordion ID="Accordion1" runat="server" HeaderCssClass="headerCssClass" ContentCssClass="contentCssClass" HeaderSelectedCssClass="headerSelectedCss" FadeTransitions="true" TransitionDuration="500" AutoSize="None" SelectedIndex="0">

<Panes>

<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">

<Header>New User

</Header>

<table>

<tr><td>Password:</td><td><input type="text" /></td></tr>

<tr><td>Re-Password:</td><td><input type="text" /></td></tr>

</table>

</Content>

</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">

<Header>Login</Header>

<b><u>Login User</u></b>

<table>

<tr><td>Password:</td><td><input type="text" /></td></tr>

</table>

</Content>

</ajaxToolkit:AccordionPane>

</Panes>

</ajaxToolkit:Accordion>

</div>

</form>

</body>

</html>

In above code, I have used .headerCssClass(CSS class to use for the headers),.contentCssClass(CSS class to use for the content) and .headerSelectedCss(CSS class to use for the Selected headers) class for styling the Accordion Control.
Working Preview:

Accordion control have several other properties like:
1. FadeTransitions: FadeTransitions is used for adding the transition effect.
2. SelectedIndex: The AccordionPane to be initially visible

3. TransitionDuration: Number of milliseconds to animate the transitions.
4. Panes: Collection of AccordionPane controls

Hope you like it. Thanks.

[Download Source Code via Google Drive]

Monday, 28 December 2015

Two way Data binding in AngularJS

Sunday, 13 December 2015

Modules and Controllers in AngularJS

Sunday, 6 December 2015

Getting Started with AngularJS

Tuesday, 6 October 2015

Accordion control in Ajax Control Toolkit (ASP.Net)

Subscribe us on YouTube

Subscribe Now

Popular Posts

Contact us

Categories

Like us on Facebook

Blog Archive