Programmer Diary: October 2013

Sunday, 6 October 2013

Bootstrap (Initialize Angular) Lesson3

Bootstrapping: It is a process of initializing angular in our application, bootstrapping is must to build any angular app and this is a first step for AngularJs Implementation.

We can do bootstrapping by two ways:

1) Manual Bootstrapping

If you need to have more control over initialization process then manual bootstrapping can be used.
angular.bootstrap(element [,modules]) api is used for manual bootstrapping.
Parameters needs to pass->
element : DOM element which is root of angular application.
[,modules] : Array of modules load in application.

Returns->
Returns the newly created injector for this app. (AUTO.$injector)

Manual bootstrapping can be done inside this statement
angular.element(document).ready(function() {
angular.bootstrap(element [,modules]);
})

* We will look into modules in our next lesson

Use below url to have a look, over manual bootstrapping process.
http://plnkr.co/edit/iop60YMInu7XxUOJfhOj

2) Automatic Bootstrapping.

If the ng-app directive is found then Angular will:

load the module associated with the directive.
create the application injector
compile the DOM treating the ng-app directive as the root of the compilation.

a) "ng-app" is a directive used for automatically bootstrapping of application, by just placing this directive inside html tag, it will directly initialize angular for that page. As shown below.
<html lang="en" ng-app>

</html>
b) We can also assign modules to ng-app as shown below. But this module name is optional and with the help of this module we can inject multiple libraries.
<html lang="en" ng-app="MyFirstOptionalModule">

</html>
For about module knowledge please click here.

for IE7 this can be used <html ng-app id="ng-app">

Difference Between IComparable & IComparer

Difference Between IComparable & IComparer
------------------------------------------
Icomparable implements int ComareTo(Object o)
compare the current instance with another instance of same type.
IComparable is used to provide a default sort order for your objects.

IComparer implements int Compare(object a,object b)
It is used to compare any two instances of T.
IComparer is to provide additional comparison mechanisms.

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

using System.Collections;
using System.Collections.Generic;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
List<Students> Stu = new List<Students>();
Stu.Add(new Students("Nimish",26));
Stu.Add(new Students("Namish", 26));
Stu.Add(new Students("Nemish", 26));
Stu.Add(new Students("Nmish", 26));
Stu.Sort();

List<Faculty> Fac = new List<Faculty>();
Fac.Add(new Faculty("Nimish", 26));
Fac.Add(new Faculty("Namish", 26));
Fac.Add(new Faculty("Nemish", 26));
Fac.Add(new Faculty("Nmish", 26));
Fac.Sort(new Faculty_Sort_Asc());

}
}

public class Students:IComparable<Students>
{
string Name;
int Age;
public Students(string name, int age)
{
Name=name;
Age=age;
}

public int CompareTo(Students stu)
{
return Name.CompareTo(stu.Name);

}
}

public class Faculty
{
public string Name;
public int Age;
public Faculty(string name, int age)
{
Name = name;
Age = age;
}
}

public class Faculty_Sort_Asc : IComparer<Faculty>
{

#region IComparer<Employee> Members

public int Compare(Faculty x, Faculty y)
{
return x.Name.CompareTo(y.Name);
}

#endregion
}

Saturday, 5 October 2013

Two Way Binding-Lesson 2

Simple Example of Two Way bindings in Angular

Copy below code and paste it in a html and run it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head >

</head>

<body>

<p>{{FooModel}}</p>

<p>Note when you type something in text box, at the same time</p>

<p>text updated in paragraph i:e You are updating text box view in return it is updating</p>

<p>FooModel. This FooModel is also associated with paragraph so it will automatically upadated.</p>

</body>

</html>

Hope this will help you to understand some basic about Angular Two Way bindings.
Use below url to test it.
http://plnkr.co/edit/6SxUIoYqbGChz3vS8WnQ

Introduction To AngularJs-Lesson1

AngularJs is an extensible javascript framework by Google which can be used to build customized framework for our applications.

It is extensible and work well with other libraries, every features of this is fully customizable.

Below are the best Features Of AngularJS which i like at most

1) Two-Way Bindings.
2) MVC support for client side.
3) Template.
4) Dependency Injection.
5) Directives.
6) Routing

We will go through each of these concepts later on ,first of all I will like to introduce with you some basics of AngularJs.

Step 1) Download the Angular library from belowURL or for the latest API go to AngularJS
https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js

Step 2) Add the library reference to your HTML page.

<script src="Scripts/angular.min.js" type="text/javascript"></script>

Step 3) Copy below code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app>
<head >
<title></title>
<script src="Scripts/angular.min.js" type="text/javascript"></script>
</head>
<body>
<input type="text" ng-model="FooModel" placeholder="Enter Name" />

<p>{{FooModel}}</p>
</body>
</html>

Notice the content of HTML marked in red:
1) ng-app= This is a bootstrap directive which initialize the angular application
2) In second line we are registering the angular javascript file.
3) In textbox we are defining a model with it's name FooModel to textbox, so this FooModel will tightly associated with this textbox
4) Finaly inside <p> tag we are assigning FooModel value.

So above is a small example to Angular 2-way binding model.

"Once we start providing value to that input box then the model associated with it is updated and
when that value of model update ,automatically value inside <p> tag updates, so it is a small but cleam example of angular two way binding concept"

For more check Two Way Binding-Lesson2