tag:blogger.com,1999:blog-46539076066488059412024-03-19T14:33:40.693+06:00Classroom of Fizzlearn .NET with Fiyaz HasanAnonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.comBlogger27125tag:blogger.com,1999:blog-4653907606648805941.post-36407332238097015522015-01-01T15:10:00.001+06:002015-01-01T15:41:03.648+06:00Fun with jQWidgets (jqxTreeGrid)<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
<span style="color: #45818e; font-size: x-large;">Fun with jQWidgets (jqxTreeGrid)</span></h2>
<h3 style="text-align: center;">
<span style="color: orange;">Building a parent child hierarchy TreeView</span></h3>
<div class="MsoTitle" style="text-align: center;">
<o:p></o:p></div>
<br />
<div class="MsoNormal">
So I’ve been working on this project lately, where my
teammate asked me to write an advance TreeView with JQuery. The sample data and
the TreeView structure was something like this<o:p></o:p><br />
<br /></div>
<h3 style="text-align: left;">
<span style="color: orange;">Sample Data</span></h3>
<div>
<span style="color: orange;"><br /></span></div>
<h1>
<o:p></o:p></h1>
<table border="0" cellpadding="0" cellspacing="0" class="MsoTable15Plain4" style="border-collapse: collapse; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
<b><span style="font-family: inherit;">Name<o:p></o:p></span></b></div>
</td>
<td style="padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
<b><span style="font-family: inherit;">Phone<o:p></o:p></span></b></div>
</td>
<td style="padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
<b><span style="font-family: inherit;">CurrentBalance<o:p></o:p></span></b></div>
</td>
<td style="padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
<b><span style="font-family: inherit;">UserType<o:p></o:p></span></b></div>
</td>
<td style="padding: 0in 5.4pt 0in 5.4pt; width: 77.95pt;" valign="top" width="104"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
<b><span style="font-family: inherit;">UserCode<o:p></o:p></span></b></div>
</td>
<td style="padding: 0in 5.4pt 0in 5.4pt; width: 77.95pt;" valign="top" width="104"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
<b><span style="font-family: inherit;">ParentCode<o:p></o:p></span></b></div>
</td>
</tr>
<tr>
<td style="background: #F2F2F2; mso-background-themecolor: background1; mso-background-themeshade: 242; padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<b><span style="font-family: inherit;">Hakeem<o:p></o:p></span></b></div>
</td>
<td style="background: #F2F2F2; mso-background-themecolor: background1; mso-background-themeshade: 242; padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">076 4876 6579<o:p></o:p></span></div>
</td>
<td style="background: #F2F2F2; mso-background-themecolor: background1; mso-background-themeshade: 242; padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div align="right" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: right;">
<span style="font-family: inherit;">6,026<o:p></o:p></span></div>
</td>
<td style="background: #F2F2F2; mso-background-themecolor: background1; mso-background-themeshade: 242; padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
<span style="font-family: inherit;">Administrator<o:p></o:p></span></div>
</td>
<td style="background: #F2F2F2; mso-background-themecolor: background1; mso-background-themeshade: 242; padding: 0in 5.4pt 0in 5.4pt; width: 77.95pt;" valign="top" width="104"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
<span style="font-family: inherit;">AD-00001<o:p></o:p></span></div>
</td>
<td style="background: #F2F2F2; mso-background-themecolor: background1; mso-background-themeshade: 242; padding: 0in 5.4pt 0in 5.4pt; width: 77.95pt;" valign="top" width="104"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
<span style="font-family: inherit;">NULL<o:p></o:p></span></div>
</td>
</tr>
<tr>
<td style="padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;"><b>Lucian</b><b><o:p></o:p></b></span></div>
</td>
<td style="padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">055 9658 5713<o:p></o:p></span></div>
</td>
<td style="padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div align="right" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: right;">
<span style="font-family: inherit;">9,741<o:p></o:p></span></div>
</td>
<td style="padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
<span style="font-family: inherit;">Branch<o:p></o:p></span></div>
</td>
<td style="padding: 0in 5.4pt 0in 5.4pt; width: 77.95pt;" valign="top" width="104"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
<span style="font-family: inherit;">BR-00001<o:p></o:p></span></div>
</td>
<td style="padding: 0in 5.4pt 0in 5.4pt; width: 77.95pt;" valign="top" width="104"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
<span style="font-family: inherit;">AD-00001<o:p></o:p></span></div>
</td>
</tr>
<tr>
<td style="background: #F2F2F2; mso-background-themecolor: background1; mso-background-themeshade: 242; padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;"><b>Felix</b><b><o:p></o:p></b></span></div>
</td>
<td style="background: #F2F2F2; mso-background-themecolor: background1; mso-background-themeshade: 242; padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">076 2291 6071<o:p></o:p></span></div>
</td>
<td style="background: #F2F2F2; mso-background-themecolor: background1; mso-background-themeshade: 242; padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div align="right" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: right;">
<span style="font-family: inherit;">8,852<o:p></o:p></span></div>
</td>
<td style="background: #F2F2F2; mso-background-themecolor: background1; mso-background-themeshade: 242; padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
<span style="font-family: inherit;">Distributor<o:p></o:p></span></div>
</td>
<td style="background: #F2F2F2; mso-background-themecolor: background1; mso-background-themeshade: 242; padding: 0in 5.4pt 0in 5.4pt; width: 77.95pt;" valign="top" width="104"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
<span style="font-family: inherit;">DR-00001<o:p></o:p></span></div>
</td>
<td style="background: #F2F2F2; mso-background-themecolor: background1; mso-background-themeshade: 242; padding: 0in 5.4pt 0in 5.4pt; width: 77.95pt;" valign="top" width="104"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
<span style="font-family: inherit;">BR-00001<o:p></o:p></span></div>
</td>
</tr>
<tr>
<td style="padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;"><b>Aquila</b><b><o:p></o:p></b></span></div>
</td>
<td style="padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">056 5580 0460<o:p></o:p></span></div>
</td>
<td style="padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div align="right" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: right;">
<span style="font-family: inherit;">9,095<o:p></o:p></span></div>
</td>
<td style="padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
<span style="font-family: inherit;">Agent<o:p></o:p></span></div>
</td>
<td style="padding: 0in 5.4pt 0in 5.4pt; width: 77.95pt;" valign="top" width="104"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
<span style="font-family: inherit;">AG-00001<o:p></o:p></span></div>
</td>
<td style="padding: 0in 5.4pt 0in 5.4pt; width: 77.95pt;" valign="top" width="104"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
<span style="font-family: inherit;">DR-00001<o:p></o:p></span></div>
</td>
</tr>
<tr>
<td style="background: #F2F2F2; mso-background-themecolor: background1; mso-background-themeshade: 242; padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;"><b>Tyrone</b><b><o:p></o:p></b></span></div>
</td>
<td style="background: #F2F2F2; mso-background-themecolor: background1; mso-background-themeshade: 242; padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">0916 103 0684<o:p></o:p></span></div>
</td>
<td style="background: #F2F2F2; mso-background-themecolor: background1; mso-background-themeshade: 242; padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div align="right" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: right;">
<span style="font-family: inherit;">5,822<o:p></o:p></span></div>
</td>
<td style="background: #F2F2F2; mso-background-themecolor: background1; mso-background-themeshade: 242; padding: 0in 5.4pt 0in 5.4pt; width: 77.9pt;" valign="top" width="104"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
<span style="font-family: inherit;">User<o:p></o:p></span></div>
</td>
<td style="background: #F2F2F2; mso-background-themecolor: background1; mso-background-themeshade: 242; padding: 0in 5.4pt 0in 5.4pt; width: 77.95pt;" valign="top" width="104"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
<span style="font-family: inherit;">UR-00001<o:p></o:p></span></div>
</td>
<td style="background: #F2F2F2; mso-background-themecolor: background1; mso-background-themeshade: 242; padding: 0in 5.4pt 0in 5.4pt; width: 77.95pt;" valign="top" width="104"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
<span style="font-family: inherit;">AG-00001</span><span style="font-family: Arial, Helvetica, sans-serif;"><o:p></o:p></span></div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
<br /></div>
<h3 style="text-align: left;">
<span style="color: orange;">TreeView Structure</span></h3>
<h1>
<o:p></o:p></h1>
<div class="MsoNormal">
<br /></div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.85pt;" valign="top" width="156"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
</td>
<td style="border-left: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.85pt;" valign="top" width="156"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
Name<o:p></o:p></div>
</td>
<td style="border-left: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.9pt;" valign="top" width="156"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
Phone<o:p></o:p></div>
</td>
<td style="border-left: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.9pt;" valign="top" width="156"><div align="center" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: center;">
CurrentBalance<o:p></o:p></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.85pt;" valign="top" width="156"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">Administrator<o:p></o:p></span></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.85pt;" valign="top" width="156"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">Hakeem<o:p></o:p></span></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.9pt;" valign="top" width="156"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">076 4876 6579<o:p></o:p></span></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.9pt;" valign="top" width="156"><div align="right" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: right;">
<span style="font-family: inherit;">6,026<o:p></o:p></span></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.85pt;" valign="top" width="156"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;"> Branch<o:p></o:p></span></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.85pt;" valign="top" width="156"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">Lucian<o:p></o:p></span></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.9pt;" valign="top" width="156"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">055 9658 5713<o:p></o:p></span></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.9pt;" valign="top" width="156"><div align="right" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: right;">
<span style="font-family: inherit;">9,741<o:p></o:p></span></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.85pt;" valign="top" width="156"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;"> Distributor<o:p></o:p></span></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.85pt;" valign="top" width="156"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">Felix<o:p></o:p></span></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.9pt;" valign="top" width="156"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">076 2291 6071<o:p></o:p></span></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.9pt;" valign="top" width="156"><div align="right" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: right;">
<span style="font-family: inherit;">8,852<o:p></o:p></span></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.85pt;" valign="top" width="156"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;"> Agent<o:p></o:p></span></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.85pt;" valign="top" width="156"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">Aquila<o:p></o:p></span></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.9pt;" valign="top" width="156"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">056 5580 0460<o:p></o:p></span></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.9pt;" valign="top" width="156"><div align="right" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: right;">
<span style="font-family: inherit;">9,095<o:p></o:p></span></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.85pt;" valign="top" width="156"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;"> User<o:p></o:p></span></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.85pt;" valign="top" width="156"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">Tyrone<o:p></o:p></span></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.9pt;" valign="top" width="156"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: inherit;">0916 103 0684<o:p></o:p></span></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 116.9pt;" valign="top" width="156"><div align="right" class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: right;">
<span style="font-family: inherit;">5,822</span><o:p></o:p></div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
As you can see the TreeView structure follows the parent
child relation hierarchy. However I’ve shown you a single node example here but
in reality one node can have multiple child nodes then these child nodes can have
multiple child nodes and so on and so forth. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
So the first thing that comes to my mind is run a recursive
function on this data and bind those data to one of thousands free JQuery
TreeView scattered around the web. But to be frank I don’t like the idea of the
recursion. I am not going to say that it increase my data manipulation time,
thing is this time I won’t going to use recursion.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
So I googled for some JQuery TreeView widgets on the web and
finally came across a great JQuery widgets library which has a fantastic
TreeView widget that just fits my requirements. So the name of the widget
library is jQWidgets. You can surf their official website on this link<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<a href="http://www.jqwidgets.com/">http://www.jqwidgets.com/</a><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
If you go to the Demo section you will see that they have
over 42 widget ready for you. One of those is jqxTreeGrid widget. I read the
documentation there and came across some fantastic features the widget
provides. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
So let’s build a demo application.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<h3 style="text-align: left;">
<span style="color: orange;">Binding data to jqxTreeGrid from ASP.net web method</span> </h3>
<h1>
<o:p></o:p></h1>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Open Visual Studio and create an ASP.net empty web forms
application. I named it jqxTreeGridDemo.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8O24YymUFfBFl7DfnRRXBJ5vbrOvSty6Lyg3KyajVf8Kjcik-h3kEDYbCnSewox30MyaOt91zPOcWeAkm-81m4uTUYjlEiifHzCK7AoVt0KC1C3mrZKde-JNZJMpH9axQJETgMEjo4Uc/s1600/solution.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8O24YymUFfBFl7DfnRRXBJ5vbrOvSty6Lyg3KyajVf8Kjcik-h3kEDYbCnSewox30MyaOt91zPOcWeAkm-81m4uTUYjlEiifHzCK7AoVt0KC1C3mrZKde-JNZJMpH9axQJETgMEjo4Uc/s1600/solution.png" height="200" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Go to the official site of jQWidgets and in the download section,
download the non-commercial version from there. The scripts will be downloaded
as a zip file. Let’s unzip it and from the unzipped folder copy three folders
and add to your project. These folders are <o:p></o:p></div>
<div class="MsoNormal">
<br />
<br />
<ul style="text-align: left;">
<li><span style="text-indent: -0.25in;">jqwidgets</span></li>
<li><span style="text-indent: -0.25in;">scripts</span></li>
<li><span style="text-indent: -0.25in;">styles</span></li>
</ul>
<br />
<div class="MsoListParagraph" style="mso-list: l0 level1 lfo1; text-indent: -.25in;">
<o:p></o:p></div>
<div class="MsoListParagraph" style="mso-list: l0 level1 lfo1; text-indent: -.25in;">
<o:p></o:p></div>
</div>
<div class="MsoListParagraphCxSpFirst" style="text-align: left; text-indent: -0.25in;">
<span style="text-indent: -0.25in;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSCcvDnZG1Fi-GzweJeptatMUAox_AbAi7Q2TH1wOYfBnsZxWgxImSn0Wi9frdOC6SVGBsyUBAlx7qK3HmAxyyM9GwnqvlcAbHhRieUxjExIwWWdQy0a0tpvUXXpLKcTQgq3Y9kr3u5F8/s1600/reference.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSCcvDnZG1Fi-GzweJeptatMUAox_AbAi7Q2TH1wOYfBnsZxWgxImSn0Wi9frdOC6SVGBsyUBAlx7qK3HmAxyyM9GwnqvlcAbHhRieUxjExIwWWdQy0a0tpvUXXpLKcTQgq3Y9kr3u5F8/s1600/reference.png" height="338" width="640" /></a></div>
<div class="MsoListParagraphCxSpFirst" style="text-align: left; text-indent: -0.25in;">
<span style="text-indent: -0.25in;"><br /></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Now create a new web form in the project. I named it
jqxWidget.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
To create a list of sample user data, Lets create a complex
User datatype. Means create a POCO class named User inside the model folder. The
class will have these following properties<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">namespace</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> jqxTreeGridDemo.Models<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">{<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">class</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">User</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">string</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> Name { </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">get</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">set</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">string</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> Phone { </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">get</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">set</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">decimal</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> CurrentBalance { </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">get</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">set</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">string</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> UserType { </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">get</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">set</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">string</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> UserCode { </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">get</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">set</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">string</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> ParentCode { </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">get</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">set</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 125%;">}</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 125%;"><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 125%;"><br /></span></div>
<div class="MsoNormal">
Let’s go to the code behind of our form and declare a web
method. The web method will simply return our predefined sample data in a json
format to our UI. Remember to declare your web method as a static member
otherwise you won’t able to get data from it with an Ajax call.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Building and sending a list of collection in json format
will require a small library. So fire up the NuGet package manager and install
the package called JSON.net. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHzClOnPQ0duXnEoBDfoAFFL0AcJaa65SAtmg8fGYgw5hxe2EJRu1nhHZmTHY2RfMgB8pWXtuOzGWdtoOSp1bPvc6P37JuUkEGJaDnllzF7Hl6PABEj1u4AiauTPtbMBlO9BfW7Ip-oD4/s1600/json.net.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHzClOnPQ0duXnEoBDfoAFFL0AcJaa65SAtmg8fGYgw5hxe2EJRu1nhHZmTHY2RfMgB8pWXtuOzGWdtoOSp1bPvc6P37JuUkEGJaDnllzF7Hl6PABEj1u4AiauTPtbMBlO9BfW7Ip-oD4/s1600/json.net.png" height="424" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Okay so our web method will look like this<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 0.5in;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> [</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">WebMethod</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">]<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> <b>[</b></span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ScriptMethod</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">(UseHttpGet = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">true</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">)]<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">static</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">string</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> GetData()<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">List</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">User</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">> users = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">new</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">List</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">User</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">new</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">User</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {Name = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Hakeem"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, Phone = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"076 4876 6579"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, CurrentBalance = 6026, UserType
= </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Administrator"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, UserCode = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"AD-00001"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">},<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">new</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">User</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {Name = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Lucian"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, Phone = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"055 9658 5713"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, CurrentBalance = 9741, UserType
= </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Branch"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, UserCode = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"BR-00001"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, ParentCode = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"AD-00001"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">},<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">new</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">User</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {Name = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Felix"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">,
Phone = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"076
2291 6071"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">,
CurrentBalance = 8852, UserType = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Distributor"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, UserCode = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"DR-00001"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, ParentCode = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"BR-00001"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">},<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">new</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">User</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {Name = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Aquila"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, Phone = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"056 5580 0460"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, CurrentBalance = 9095, UserType
= </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Agent"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, UserCode = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"AG-00001"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, ParentCode = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"DR-00001"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">},<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">new</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">User</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {Name = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Tyrone"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, Phone = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"0916 103 0684"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, CurrentBalance = 5822, UserType
= </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"User"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, UserCode = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"UR-00001"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, ParentCode = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"AG-00001"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">},<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">new</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">User</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {Name = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Jasper"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, Phone = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"0916 103 0684"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, CurrentBalance = 9935 , UserType
= </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Branch"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, UserCode = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"BR-00002"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, ParentCode = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"AD-00001"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">},<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">new</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">User</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {Name = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Erasmus"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, Phone = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"0314 951 0576"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, CurrentBalance = 5636 , UserType
= </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Distributor"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, UserCode = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"DR-00002"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, ParentCode = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"BR-00002"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">},<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">new</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">User</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {Name = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Elton"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, Phone = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"0887 799 4296"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, CurrentBalance = 6448 , UserType
= </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Distributor"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, UserCode = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"DR-00003"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, ParentCode = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"BR-00002"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">},<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">new</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">User</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {Name = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Colt"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, Phone = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"07624 841017"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, CurrentBalance = 5425, UserType
= </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Agent"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, UserCode = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"AG-00002"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, ParentCode = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"DR-00003"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">},<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">new</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">User</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {Name = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Phillip"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, Phone = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"070 7469 2182"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, CurrentBalance = 8344, UserType
= </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"User"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, UserCode = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"UR-00002"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, ParentCode = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"AG-00001"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">},<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">new</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">User</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {Name = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Lucian"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, Phone = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"055 9658 5713"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, CurrentBalance = 9741, UserType
= </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"User"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, UserCode = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"UR-00003"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, ParentCode = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"AG-00001"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">},<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">new</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">User</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {Name = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Aron"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, Phone = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"0800 722148"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, CurrentBalance = 5527, UserType
= </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"User"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, UserCode = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"UR-00004"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, ParentCode = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"AG-00002"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">},<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> };<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">string</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> data = </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">JsonConvert</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.SerializeObject(users);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">return</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> data;<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 125%;"> }</span><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Now let’s get back to the UI (jqxTreeGrid.aspx). Give a
title to the page and add the scripts reference as follow<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">head</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">runat</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="server"></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">title</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">jqxTreeGrid Demo</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">title</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">link</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">href</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="jqwidgets/styles/jqx.base.css"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">rel</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="stylesheet"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">/></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">src</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="scripts/jquery-1.10.2.min.js"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">src</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="jqwidgets/jqxcore.js"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">src</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="jqwidgets/jqxdata.js"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">src</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="jqwidgets/jqxbuttons.js"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">src</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="jqwidgets/jqxscrollbar.js"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">src</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="jqwidgets/jqxdatatable.js"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">src</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="jqwidgets/jqxtreegrid.js"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 125%; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; line-height: 125%; mso-bidi-language: BN-BD; mso-highlight: white;">head</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 125%; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 125%; mso-bidi-language: BN-BD;"><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 125%; mso-bidi-language: BN-BD; mso-highlight: white;"><br /></span></div>
<div class="MsoNormal">
Now the main part. Create a script section after those
reference declared above and past this code<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
$(document).ready(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">() {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> onSuccess(data) {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">var</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> users = data.d;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">var</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> source =<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
{<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
dataType: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"json"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
dataFields: [<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
{ name: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'UserType'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, type: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'string'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
{ name: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'Name'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, type: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'string'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
{ name: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'Phone'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, type: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'string'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
{ name: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'CurrentBalance'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, type: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'number'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
{ name: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'UserCode'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, type: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'string'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> { name: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'ParentCode'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, type: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'string'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
],<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
hierarchy:<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
{<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
keyDataField: { name: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'UserCode'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
parentDataField: { name: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'ParentCode'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
},<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
id: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'UserCode'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
localData: users<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
};<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">var</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> dataAdapter = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">new</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> $.jqx.dataAdapter(source);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
$(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"#treeGrid"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">).jqxTreeGrid(<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
{<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> width: 700,<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
height: 390,<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
source: dataAdapter,<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
ready: </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> () {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
$(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"#treeGrid"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">).jqxTreeGrid(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'expandRow'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'2'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
},<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
columns: [<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
{ text: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'User
Type'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, dataField: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'UserType'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, width: 150 },<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
{ text: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'Name'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, dataField: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'Name'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, width: 150 },<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
{ text: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'Phone'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, dataField: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'Phone'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, width: 200 },<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> { text: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'Current Balance'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, dataField: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'CurrentBalance'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, width: 200, cellsalign: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'right'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, cellsFormat: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"c2"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
]<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
});<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
$.ajax({<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
type: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"GET"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
url: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"jqxTreeGrid.aspx/GetData"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
contentType: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"application/json;
charset=utf-8"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
dataType: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"json"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
success: onSuccess,<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
failure: </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">(response) {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">
alert(response.d);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> });<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> });<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 125%;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 125%; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; line-height: 125%; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 125%; mso-bidi-language: BN-BD; mso-highlight: white;">></span><o:p></o:p></div>
<div class="MsoNormal">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 125%; mso-bidi-language: BN-BD; mso-highlight: white;"><br /></span></div>
<div class="MsoNormal">
As you can see at the bottom I’m initiating an Ajax call to
my web method declared in the code behind. Since our backend code will return JSON
data only when an HTTP GET is initiated, I set the Ajax request type to <span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 125%; mso-bidi-language: BN-BD; mso-highlight: white;">"GET"</span>.
Then we have the URL and returned data type declared. On a success request we
have a callback. The callback function will rearrange the data according to our
setting. I leave rest up to you because it’s easy to understand what’s going on
there after having the response data. Just look at the <span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 125%;">hierarchy</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 125%;"> </span>property and we will get the point.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
And in the html all you need to do is to declare a <span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 125%; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; line-height: 125%; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 125%; mso-bidi-language: BN-BD; mso-highlight: white;">></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; line-height: 125%; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 125%; mso-bidi-language: BN-BD; mso-highlight: white;">></span> tag
with the id of <span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 125%; mso-bidi-language: BN-BD; mso-highlight: white;">treeGrid</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 125%; mso-bidi-language: BN-BD;"> </span>like below<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">body</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">form</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">id</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="form1"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">runat</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="server"></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">id</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="treeGrid"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">form</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 125%; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; line-height: 125%; mso-bidi-language: BN-BD; mso-highlight: white;">body</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 125%; mso-bidi-language: BN-BD; mso-highlight: white;">></span><o:p></o:p></div>
<div class="MsoNormal">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 125%; mso-bidi-language: BN-BD; mso-highlight: white;"><br /></span></div>
<div class="MsoNormal">
So everything is done. Set the jqxTreeGrid.aspx page as
default starting page and run. You will get an output like this one.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtmPwpInS9TWZLYzF9XJ-c3tx9547a88HuVvEuV7Vw0CCNLkqx62mGq_wjY8-0A1bMO4MJb3y40n0xx-1xCelCnvDp_8aWEaj3uNAO8NgttW4i_tUY63b66inSZ2u4CVfnmjHLJ3r8RDs/s1600/grid.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtmPwpInS9TWZLYzF9XJ-c3tx9547a88HuVvEuV7Vw0CCNLkqx62mGq_wjY8-0A1bMO4MJb3y40n0xx-1xCelCnvDp_8aWEaj3uNAO8NgttW4i_tUY63b66inSZ2u4CVfnmjHLJ3r8RDs/s1600/grid.png" height="438" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Git repository for this example can be found here </div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<a href="https://github.com/fiyazbinhasan/jQWidgets-TreeGrid">https://github.com/fiyazbinhasan/jQWidgets-TreeGrid</a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Thanks for reading this post. I will see you again.</div>
</div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0tag:blogger.com,1999:blog-4653907606648805941.post-25721255642858528412014-12-31T22:00:00.000+06:002015-01-01T05:11:07.420+06:00Up and running with ASP.net vNext<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: center;">
<span style="background-color: white; color: #76a5af; font-family: Helvetica Neue, Arial, Helvetica, sans-serif; font-size: x-large;">Up and running with ASP.net vNext</span></h2>
<div class="MsoTitle">
<o:p></o:p></div>
<h3 style="text-align: center;">
<span style="color: orange; font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Setting up environment, writing c# code in Brackets and running in command prompt. </span></h3>
<h1>
<o:p></o:p></h1>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
For so long now you have been working on OSX and UNIX, but
want to taste some Microsoft’s cutting edged technologies. By which I mean you
want to end up writing some code in C#. Now the burning question is, how am I
going to even write C# code without Visual Studio? And moreover my OS doesn’t
support running Microsoft’s products. Well! You don’t have to whine anymore
because I’ve got a good news for you. If
you attended the Microsoft’s virtual event called Connect(); earlier November
2014, you may have come across knowing that ASP.net 5 has gone open source. It
is known as ASP.net vNext. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Event videos can be found in this link below <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<a href="http://channel9.msdn.com/Events/Visual-Studio/Connect-event-2014" target="_blank">http://channel9.msdn.com/Events/Visual-Studio/Connect-event-2014</a><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Link to the GitHub repository for ASP.net vNext is down
below<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<a href="https://github.com/aspnet/home#getting-started">https://github.com/aspnet/home#getting-started</a><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
If you’ve already browsed the repository and read the
documentation, you may have seen the minimum requirements and tools to run
ASP.net vNext applications in OSX and UNIX operating systems.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
In short all you have to do is to install two things in
order to create an environment in which you can run C# applications. One of
those is KVM (K Version Manager) which basically provides you with .net
framework libraries. And the second one is KRE (K Runtime Environment) which is
just a runtime environment provider for the framework. It’s just like you have
to install JDK and JRE for building and running JAVA applications. So all the
hard work is done and time to write some C#.<o:p></o:p><br />
<br /></div>
<div class="MsoNormal">
Before that lets say I don’t have Visual Studio installed in
my windows (Of course you can’t install this mind blowing IDE in OSX and UNIX).
However I want to take the full advantage of IntelliSense supported in Visual
Studio. Let’s take some tiny steps in building our own Visual Studio. First of
all choose any advance text editing tool you like. Not just any though, to have
the full IntelliSense support you’ve to choose between these advance text
editing tools. Don’t worry Sublime Text is one of them and the rest are <o:p></o:p></div>
<div class="MsoListParagraphCxSpFirst" style="text-align: left; text-indent: -0.25in;">
<br />
<span style="font-family: Symbol; text-indent: -0.25in;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><span style="text-indent: -0.25in;">Atom</span><br />
<span style="font-family: Symbol; text-indent: -0.25in;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><span style="text-indent: -0.25in;">Brackets</span><br />
<span style="font-family: Symbol; text-indent: -0.25in;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><span style="text-indent: -0.25in;">Emacs</span><br />
<span style="font-family: Symbol; text-indent: -0.25in;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><span style="text-indent: -0.25in;">Vim</span><!--[if !supportLists]--><o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -.25in;">
<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l0 level1 lfo1; text-indent: -.25in;">
<o:p></o:p></div>
<div class="MsoListParagraphCxSpLast" style="mso-list: l0 level1 lfo1; text-indent: -.25in;">
<o:p></o:p></div>
<div class="MsoListParagraphCxSpLast" style="mso-list: l0 level1 lfo1; text-indent: -.25in;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
I
choose Brackets since it has some features that fits my needs. Okay so I’ve
installed Brackets and fired it up. Here what you will see at the first run.<o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNq6Xb7dyEc4lVYbwxNHStf97l9fYOE3mJ8-kDzkirTnP8yJcdWNOBE5jckiKYGzovTyalrQ3k6AUPiJ2K3iQ1-YftAHCQRKHY4SV-CFRcdzGCYOWuJXromjh-3efYw2QMX10DucCVFJ8/s1600/brfirst.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNq6Xb7dyEc4lVYbwxNHStf97l9fYOE3mJ8-kDzkirTnP8yJcdWNOBE5jckiKYGzovTyalrQ3k6AUPiJ2K3iQ1-YftAHCQRKHY4SV-CFRcdzGCYOWuJXromjh-3efYw2QMX10DucCVFJ8/s1600/brfirst.png" height="340" width="640" /></a></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
Let’s
click on the icon that says Extension Manager. In this window you can install
some extensions for Brackets which will ultimately make your development life
easier.</div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
So
why would I go to the Extension Manger window? Of course for installing an
extension. But which one? The name of the extension is OmniSharp. </div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx6lFJT7FCRkydPiU_Iu8LPDuoCZyW4betrmVCy78xXRLXTyPbMAEy63xvw41v7IykiV9_ySSyD_CmhPWJOFc_gamUXs7C5rM5dcfeAkwpaLu7t5IMnv85QYGXjd5Anr9n5yAevyRWLZg/s1600/omnnisharp.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx6lFJT7FCRkydPiU_Iu8LPDuoCZyW4betrmVCy78xXRLXTyPbMAEy63xvw41v7IykiV9_ySSyD_CmhPWJOFc_gamUXs7C5rM5dcfeAkwpaLu7t5IMnv85QYGXjd5Anr9n5yAevyRWLZg/s1600/omnnisharp.png" height="360" width="640" /></a></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
You can visit
the official website of this project by going to <o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<a href="http://www.omnisharp.net/">http://www.omnisharp.net/</a><o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
As
you will see the tag line, it says<o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
OmniSharp
- Cross platform .NET development<o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
.NET
in Your Editor of Choice<o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
So
it’s just an extension provider for your favorite text editor which will enable
the IntelliSense support for .net applications. It provides more features than
just the IntelliSense support. I leave the rest for you to discover. So far so
good.<o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
You
are almost ready, in windows let’s run the command prompt in administrative
mode. Copy and paste the following command and hit enter<o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="background: rgb(247, 247, 247); margin-bottom: 0.0001pt;">
<span style="border: none windowtext 1.0pt; color: #333333; font-family: Consolas; font-size: 10.5pt; mso-bidi-language: BN-BD; mso-border-alt: none windowtext 0in; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US; padding: 0in;">@powershell -NoProfile -ExecutionPolicy unrestricted
-Command "iex ((new-object
net.webclient).DownloadString('https://raw.githubusercontent.com/aspnet/Home/master/kvminstall.ps1'))"<o:p></o:p></span></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
This
command will install the KVM (k Version Manager) in your system.<o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj379Oau3LbwsZcTjJM4XR4tKenzxRyv3LqICDCVlD0JZKd123HOcbjyUAr6HtS9HWoujWKfABS9gqw2tdrDc4S94gNxMMWC1HCVCrXEqDKyWm9GIdgVTGjS7Wyai5ocVzCx_MQJYIdeV4/s1600/KVM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj379Oau3LbwsZcTjJM4XR4tKenzxRyv3LqICDCVlD0JZKd123HOcbjyUAr6HtS9HWoujWKfABS9gqw2tdrDc4S94gNxMMWC1HCVCrXEqDKyWm9GIdgVTGjS7Wyai5ocVzCx_MQJYIdeV4/s1600/KVM.png" height="320" width="640" /></a></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
Again
to install the KRE (K Runtime Environment), fire up another command prompt and run the following command<o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<span style="color: #333333; font-family: Consolas; font-size: 10.5pt; line-height: 125%;">kvm
upgrade</span><o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<span style="color: #333333; font-family: Consolas; font-size: 10.5pt; line-height: 125%;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhayqG9VHghGZpBcc1Y0WGFpntwap7fMKECBI-5DdHTlkpRTh68Oa3ia12EYrepGjidhmxwBoIE3iyALApUBSwsusaDhzd0p8s_jOaH9S3yLchK8LB4ZYEgdV7mhSxBTkg_NTU1e5MUAkw/s1600/KRE.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhayqG9VHghGZpBcc1Y0WGFpntwap7fMKECBI-5DdHTlkpRTh68Oa3ia12EYrepGjidhmxwBoIE3iyALApUBSwsusaDhzd0p8s_jOaH9S3yLchK8LB4ZYEgdV7mhSxBTkg_NTU1e5MUAkw/s1600/KRE.png" height="322" width="640" /></a></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<span style="color: #333333; font-family: Consolas; font-size: 10.5pt; line-height: 125%;"><br /></span></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<span style="color: #333333; font-family: Consolas; font-size: 10.5pt; line-height: 125%;"><br /></span></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
Now
clone the Asp.net vNext home repository into your desktop.<o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzgFf7ORYHz8AjTbgZV2I7ttGw7M5BsCBrYl5ImjvcCoyzPhYJk08crXt1xWJWTBX0Y7_NvYFmUtvlAFi0jfJrBLmt5FXLeBAvyhA46xjmshArYLSNo22ZYyamzcWuSQcHXpxmpMM1NTE/s1600/clone.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzgFf7ORYHz8AjTbgZV2I7ttGw7M5BsCBrYl5ImjvcCoyzPhYJk08crXt1xWJWTBX0Y7_NvYFmUtvlAFi0jfJrBLmt5FXLeBAvyhA46xjmshArYLSNo22ZYyamzcWuSQcHXpxmpMM1NTE/s1600/clone.png" height="338" width="640" /></a></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
If
you browse the Home folder, you will find three subfolders under the samples
folder. These are <o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoListParagraphCxSpFirst" style="mso-list: l1 level1 lfo2; text-align: justify; text-indent: -.25in; text-justify: inter-ideograph;">
</div>
<span style="font-family: Symbol; text-indent: -0.25in;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><span style="text-indent: -0.25in;">ConsoleApp</span><br />
<span style="font-family: Symbol; text-indent: -0.25in;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><span style="text-indent: -0.25in;">HelloMVC</span><br />
<span style="font-family: Symbol; text-indent: -0.25in;">·<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><span style="text-indent: -0.25in;">HelloWeb</span><br />
<div>
<div style="text-indent: -24px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMeF21NL0TGaSskK4iWcETLckKon3Eo_pWPXTkkqo8tNNr0GiyUvEs6wUd4fe3mcgv4O0cSLfPUSEMVo6_gjD9wEGUBSg0BvQh5OvKNifojWY6RwXyhay0JME9-mZRqY-GQbkZ8zkOuRY/s1600/structure.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMeF21NL0TGaSskK4iWcETLckKon3Eo_pWPXTkkqo8tNNr0GiyUvEs6wUd4fe3mcgv4O0cSLfPUSEMVo6_gjD9wEGUBSg0BvQh5OvKNifojWY6RwXyhay0JME9-mZRqY-GQbkZ8zkOuRY/s1600/structure.png" height="127" width="200" /></a></div>
<div style="text-indent: -24px;">
<br /></div>
<div>
<div style="text-indent: -24px;">
<br /></div>
<!--[if !supportLists]--><o:p></o:p><br />
<div class="MsoListParagraphCxSpMiddle" style="mso-list: l1 level1 lfo2; text-align: justify; text-indent: -.25in; text-justify: inter-ideograph;">
<o:p></o:p></div>
<div class="MsoListParagraphCxSpLast" style="mso-list: l1 level1 lfo2; text-align: justify; text-indent: -.25in; text-justify: inter-ideograph;">
<o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
Well,
if you want to write a console application you will work in the ConsoleApp
folder, the HelloMVC is for creating an Asp.net MVC app and the HelloWeb is
just a basic web application skeleton which will just show a static page if you
run it. <o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
Now
let’s make a traditional “Hello World” application. Before that let’s go inside
of the ConsoleApp folder from the command prompt and run the command below<o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<span style="color: #333333; font-family: Consolas; font-size: 10.5pt; line-height: 125%;">kpm
restore<o:p></o:p></span></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<span style="color: #333333; font-family: Consolas; font-size: 10.5pt; line-height: 125%;"><br /></span></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
It
will restore the packages required by that sample. All the command does is to
simply look at the project.json file and download and add the dependencies
provided there. Just like nuget package manager. <o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU-XLWwh6gqIE3CMBYpF8TQn85PHUAtHyVJjsLDwuRC3J603LagA24bED5TuOncYASfp5A6LUGeIKk9-bdWfD3aDWiRoxVdklUEbp738v0B1x2BxEl9fmeN0ynEid69e5R7Ud3cncS0cs/s1600/kpm+restore.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU-XLWwh6gqIE3CMBYpF8TQn85PHUAtHyVJjsLDwuRC3J603LagA24bED5TuOncYASfp5A6LUGeIKk9-bdWfD3aDWiRoxVdklUEbp738v0B1x2BxEl9fmeN0ynEid69e5R7Ud3cncS0cs/s1600/kpm+restore.png" height="513" width="640" /></a></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
Now
open the ConsoleApp folder in brackets and modify the Program.cs file inside
that. Change the text inside the Console.WriteLine method to “Hello from ASP.NET vNext!” and
save it.<o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhckOUJccprbAOvo6fcuMRWgwujVG78fklo6q3mJACKtE2NB68TUkKk22bgmAphEAmpMzvIY5WnK1DF1P57KipAzx_67ljOzaPMbnmUR49k-l8iG4dnVKtuaGKqyx_Cl5u-CW3v-PfxRlQ/s1600/consoleapp.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhckOUJccprbAOvo6fcuMRWgwujVG78fklo6q3mJACKtE2NB68TUkKk22bgmAphEAmpMzvIY5WnK1DF1P57KipAzx_67ljOzaPMbnmUR49k-l8iG4dnVKtuaGKqyx_Cl5u-CW3v-PfxRlQ/s1600/consoleapp.png" height="286" width="640" /></a></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
Finally
it’s time to run the console application. To do that just type the command
below in the command prompt<o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<span style="color: #333333; font-family: Consolas; font-size: 10.5pt; line-height: 125%;">k
run<o:p></o:p></span></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<span style="color: #333333; font-family: Consolas; font-size: 10.5pt; line-height: 125%;"><br /></span></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
It
will build and run the console application inside the command prompt and you
will get your “Hello from ASP.NET vNext!” string printed on the console.<o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbbNB26lSXim5mEOcJvULLPuO9bQATtyLpcBe_QfsGKUBm74HS7URekNdG9NhMKoTPREMxBrnlQwEcJr4X5HfYNjX2VDdkfn9C1vTjUn_CaxaSEBTfGhfxLHYL6944aNMmRSCVdvHJ_uE/s1600/consolerun.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbbNB26lSXim5mEOcJvULLPuO9bQATtyLpcBe_QfsGKUBm74HS7URekNdG9NhMKoTPREMxBrnlQwEcJr4X5HfYNjX2VDdkfn9C1vTjUn_CaxaSEBTfGhfxLHYL6944aNMmRSCVdvHJ_uE/s1600/consolerun.png" height="434" width="640" /></a></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<br /></div>
<h3 style="text-align: left;">
<span style="color: orange; font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Building and Running an Asp.net MVC application</span></h3>
<div>
<span style="color: orange; font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="MsoNormal">
Just like the console application, let’s change our
directory and go inside HelloMVC folder and run the command below to restore
the packages required by the sample.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<span style="color: #333333; font-family: Consolas; font-size: 10.5pt; line-height: 125%;">kpm
restore<o:p></o:p></span></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<span style="color: #333333; font-family: Consolas; font-size: 10.5pt; line-height: 125%;"><br /></span></div>
<div class="MsoNormal">
Now open the folder in Brackets and you will see a MVC
application skeleton with a simple POCO class named User inside the Models
folder, a HomeController inside the controllers and Index.cshtml inside the
Home folder under the Views folder. We also have a _Layout.cshtml file under
shared folder which basically just works like a master page for your
application. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1hhXAVPMtRI7z2aemPOtnrOkh70clW3yDWWLC5SrxltgYnsr1SySCQQL7L6FS_Neyvp2fM7Vi8NUxq6w9pwEUjvAr3mGTCKPTmI3ecijvkZERLDHEQoorUMpITuvJGd5CU-16UuqFAo8/s1600/mvcstructure.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1hhXAVPMtRI7z2aemPOtnrOkh70clW3yDWWLC5SrxltgYnsr1SySCQQL7L6FS_Neyvp2fM7Vi8NUxq6w9pwEUjvAr3mGTCKPTmI3ecijvkZERLDHEQoorUMpITuvJGd5CU-16UuqFAo8/s1600/mvcstructure.png" height="182" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Rather wasting time, let’s create a POCO class of our own
called Employee and add this properties down there.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhATvKGy0a21pGkmn4uWcThgX7syX83bPkHzHHBRFAwBlZyHs0qGFU6FModrvHFJiI0yFrLhJnHo3EwofGCxWM2ixsh2vTzHkaNUJWSWlwmZHYUtWh7ZOoZgCBol_rmt3T_VY45qfe_Bz4/s1600/model.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhATvKGy0a21pGkmn4uWcThgX7syX83bPkHzHHBRFAwBlZyHs0qGFU6FModrvHFJiI0yFrLhJnHo3EwofGCxWM2ixsh2vTzHkaNUJWSWlwmZHYUtWh7ZOoZgCBol_rmt3T_VY45qfe_Bz4/s1600/model.png" height="342" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Now create a controller named EmployeesController and define
an Index method which will be responsible for returning a list of predefined
employees into the view.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheZdyIvOgseRQskplu01KyD_NCwTp7BQ67_VSMhJlfNef_QULTRKEnCBcIjK-vMfhZHkMtVodlN0KRONAGF7xTXuysfYCTxu66eeACm1HFAWalaEt-_4BbiBwPzSeXbbydkicGv8Ecqd0/s1600/controller.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheZdyIvOgseRQskplu01KyD_NCwTp7BQ67_VSMhJlfNef_QULTRKEnCBcIjK-vMfhZHkMtVodlN0KRONAGF7xTXuysfYCTxu66eeACm1HFAWalaEt-_4BbiBwPzSeXbbydkicGv8Ecqd0/s1600/controller.png" height="336" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Time to create the view in which we will show the list of
employees in a tabular manner. Create an Employees folder under Views and add
an Index.cshtml file there. Write the code below <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ekI9kQhdqW1zpXnpnwRHRfANVE48jsYPF6z5ZX6I4-1v0QSDsKqQnuhOatknU4V6N5FTBx0d7oLsrxLcABLJeZ2r4ZlfToImlueaEoqoOBAErmR8y_j9zOdNmhqOSr7aBe9vOKeu1vk/s1600/view.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ekI9kQhdqW1zpXnpnwRHRfANVE48jsYPF6z5ZX6I4-1v0QSDsKqQnuhOatknU4V6N5FTBx0d7oLsrxLcABLJeZ2r4ZlfToImlueaEoqoOBAErmR8y_j9zOdNmhqOSr7aBe9vOKeu1vk/s1600/view.png" height="444" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="text-align: justify;">Our
simple MVC application is ready to run. Running a web application is slightly
different from running a console app, instead of </span><span style="color: #333333; font-family: Consolas; font-size: 10.5pt; line-height: 125%; text-align: justify;">k run </span><span style="text-align: justify;">you will have
to type the command below and hit enter</span></div>
<div class="MsoNormal">
<span style="text-align: justify;"><br /></span></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<o:p></o:p></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<span style="color: #333333; font-family: Consolas; font-size: 10.5pt; line-height: 125%;">k
web<o:p></o:p></span></div>
<div class="MsoNormal" style="text-align: justify; text-justify: inter-ideograph;">
<span style="color: #333333; font-family: Consolas; font-size: 10.5pt; line-height: 125%;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0t4EqpjG8HIDJKXKCqupt8Qej2jP428Ck9zPhPl_zHkdbAakFhscmgsSrHU3TWWyPTcADOZ951B803HBsb3DmdYU3ZqTlOKQr2L-e-vaR0Z0tZtXAGcIXGd22V0_hvqezWSzKywtENio/s1600/webrun.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0t4EqpjG8HIDJKXKCqupt8Qej2jP428Ck9zPhPl_zHkdbAakFhscmgsSrHU3TWWyPTcADOZ951B803HBsb3DmdYU3ZqTlOKQr2L-e-vaR0Z0tZtXAGcIXGd22V0_hvqezWSzKywtENio/s1600/webrun.png" height="320" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
The command will create a server and will an open a
listening port on <a href="http://localhost:5001/"><span style="background: white; font-family: "Helvetica",sans-serif;">http://localhost:5001</span></a><span style="background: white; color: #333333; font-family: "Helvetica",sans-serif;"><o:p></o:p></span></div>
<div class="MsoNormal">
Open your favorite browser and browse the link. It will show
you the home page. Let’s see our Tabular Employee list. For that go to <a href="http://localhost:5001/Employees"><span style="background: white; font-family: "Helvetica",sans-serif;">http://localhost:5001/Employees</span></a><span style="background: white; color: #333333; font-family: "Helvetica",sans-serif;"> . </span><span style="background-color: white;">There you will see your Tabluar employee list.</span></div>
<div class="MsoNormal">
<span style="background-color: white;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipPZBBHzY56l0NsnHRK6YHDPRXrKocQiKbG8CB46KLUMdTqMRWT2WoLd4FVrF90uMaAjNA2x9X8mevFamSKPyIZ3yjPCJdeS_ra571RSfgotCpjfg09RmldpUWJ4iUS-wXzCkaoEnUc4o/s1600/webbrowse.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipPZBBHzY56l0NsnHRK6YHDPRXrKocQiKbG8CB46KLUMdTqMRWT2WoLd4FVrF90uMaAjNA2x9X8mevFamSKPyIZ3yjPCJdeS_ra571RSfgotCpjfg09RmldpUWJ4iUS-wXzCkaoEnUc4o/s1600/webbrowse.png" height="342" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="background: white;">So here you go. I’ve shown you how you
can both modify, build and run your own Console and ASP.net MVC application
with the help of ASP.net vNext.<o:p></o:p></span><br />
<span style="background: white;"><br /></span></div>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
<span style="background: white;">I hope you enjoyed the post. I’ll come
again with interesting posts like this. Till then Happy Coding and Happy New
Year!</span><o:p></o:p></div>
</div>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0tag:blogger.com,1999:blog-4653907606648805941.post-31298065101417810542014-09-05T00:41:00.003+06:002014-09-05T00:43:11.526+06:00Providers that make your life easy (Part III)<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="border-top: solid #9E5E9B 1.0pt; border: none; mso-border-top-themecolor: accent6; mso-element: para-border-div; padding: 1.0pt 0in 0in 0in;">
<div class="MsoTitle" style="text-align: right;">
<span class="MsoSubtleEmphasis">Chapter – VI<o:p></o:p></span></div>
</div>
<div align="right" class="MsoNormal" style="text-align: right;">
<span style="font-size: 16.0pt; line-height: 115%;">Providers that make your life easy (Part III)<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Finally we are ready to talk about <i>Angular.js</i>
providers. To be precise there are five types of providers by which you can
provide services or information as data <i>[don’t mix up services with Angular’s
own service provider]</i> throughout your application. All you have to do is to
define a service type in your application once and use that for lifetime
anywhere in your app. Service Types are<o:p></o:p></div>
<div class="MsoListParagraphCxSpFirst" style="margin-left: .75in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Wingdings; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;"><br /></span></div>
<div class="MsoListParagraphCxSpFirst" style="margin-left: .75in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<span style="font-family: Wingdings; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">§<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span><!--[endif]-->Factory<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .75in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-family: Wingdings; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">§<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span><!--[endif]-->Service<o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .75in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-family: Wingdings; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">§<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span><!--[endif]-->Provider <o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: .75in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-family: Wingdings; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">§<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span><!--[endif]-->Value<o:p></o:p></div>
<div class="MsoListParagraphCxSpLast" style="margin-left: .75in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-family: Wingdings; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">§<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span><!--[endif]-->Constant<o:p></o:p></div>
<div class="MsoListParagraphCxSpLast" style="margin-left: .75in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<br /></div>
<div class="MsoNormal">
Objects are main delivery vehicles to ride through different
parts of your application and deliver information or services. Angular service
providers are ways of creating service objects in some different ways. <o:p></o:p></div>
<h1>
<br /></h1>
<h1>
Factory<o:p></o:p></h1>
<div class="MsoNormal">
First in the list is the factory. As its’ name goes, creating
services with it follows factory function pattern. We discussed about factory
function as a way of creating an object in first part. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<i>[Read about creating an object using factory function in
this link <o:p></o:p></i></div>
<div class="MsoNormal">
<a href="http://fiyazhasan.blogspot.com/2014/08/chapter-vi-providers-that-make-your.html"><i>http://fiyazhasan.blogspot.com/2014/08/chapter-vi-providers-that-make-your.html</i></a><i>]<o:p></o:p></i></div>
<div class="MsoNormal">
<i><br /></i></div>
<div class="MsoNormal">
Nothing new here except for some syntactical sugar on top of
the factory function. So if you have an <i>Angular </i>module defined in your
app, creating a service using the factory service in that module is something
like this,<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">var</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> app = angular.module(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'app'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, []);<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">app.factory(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'movieFactory'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">,</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">() {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">return</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> movies: [<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> { title: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Die Hard"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, role: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Officer John McClane"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, released: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"1988"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> { title: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Unbreakable"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, role: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"David Dunn"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, released: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"2000"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> { title: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"The Sixth Sense"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, role: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Dr. Malcolm Crowe"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, released: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"1999"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> { title: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Armageddon"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, role: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Harry Stamper"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, released: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"1998"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> { title: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Twelve Monkeys"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, role: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"James Cole"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, released: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"1995"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> ]<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> };<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">});<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">app.controller(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'movieController'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> ($scope, movieFactory) {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> $scope.movies = movieFactory.movies;<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">});<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Up there I’ve got a module named <span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">app</span> and we declared a
factory service provider in that. Also we have a controller there. In the above
example I’ve just made a service provider with the help of angular factory
provider. We exposed a movies service with our factory. We simply created a
movies array of object literals and returned it.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Now if any controller wants to use our movies service, it
will have to inject the movieFactory first into the controller <i>[see the
movieController function parameter]</i>. Then we bind the movies acquired from
our movieFactory's movies array into our $scope.movies model. That’s it we are
good to go, if we write our html as follows,<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ng-controller</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="movieController"></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">em</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">My Favourite Bruce Willis Movies</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">em</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ng-repeat</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="movie in movies"></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">{{</span></b><span style="background: white; color: purple; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">movie.title</span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">}}</span></b><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">{{</span></b><span style="background: white; color: purple; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">movie.role</span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">}}</span></b><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">{{</span></b><span style="background: white; color: purple; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">movie.released</span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">}}</span></b><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">hr</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">/></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD;"><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;"><br /></span></div>
<div class="MsoNormal">
We will get an output like,</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWby5hwc0SM6oxUVLxMJAKdljiN2zElwjyT9OBpMSWAH4FUUMhldd9fN_eUEDsF_RoMWODBx_84cL-AftXqnGsKNZJOURFdHUDUUNzsKXc1E4gqNMJLTfN_UbRS42dKnJb3gtJrYaoImE/s1600/service+output+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWby5hwc0SM6oxUVLxMJAKdljiN2zElwjyT9OBpMSWAH4FUUMhldd9fN_eUEDsF_RoMWODBx_84cL-AftXqnGsKNZJOURFdHUDUUNzsKXc1E4gqNMJLTfN_UbRS42dKnJb3gtJrYaoImE/s1600/service+output+1.png" height="332" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h1>
Service<o:p></o:p></h1>
<div class="MsoNormal">
So factory service provider is a good way of exposing a
service. But you may not want to use the factory pattern as a way of exposing a
service. Rather you may want to take advantage of the constructor function
pattern as a way of creating a service, which is simply called service.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<i>[Read about creating an object with construction function
in this link<o:p></o:p></i></div>
<div class="MsoNormal">
<a href="http://fiyazhasan.blogspot.com/2014/09/providers-that-make-your-life-easy-part.html"><i>http://fiyazhasan.blogspot.com/2014/09/providers-that-make-your-life-easy-part.html</i></a><i> ]<o:p></o:p></i></div>
<div class="MsoNormal">
<i><br /></i></div>
<div class="MsoNormal">
If you use constructor function pattern your service
provider will look like,<o:p></o:p></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">var</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> app = angular.module(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'app'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, []);<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">app.service(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'movieService'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">,</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">() {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.movies = [<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> { title: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Die Hard"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, role: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Officer John McClane"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, released: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"1988"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> { title: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Unbreakable"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, role: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"David Dunn"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, released: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"2000"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> { title: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"The Sixth Sense"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, role: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Dr. Malcolm Crowe"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, released: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"1999"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> { title: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Armageddon"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, role: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Harry Stamper"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, released: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"1998"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> { title: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Twelve Monkeys"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, role: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"James Cole"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, released: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"1995"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> ];<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">});<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">app.controller(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'movieController'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> ($scope, movieService) {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> $scope.movies = movieService.movies;<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">});<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Which is just the syntactical sugar over<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">var</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> app = angular.module(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'app'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, []);<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> movieService() {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.movies = [<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> { title: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Die Hard"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, role: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Officer John McClane"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, released: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"1988"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> { title: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Unbreakable"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, role: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"David Dunn"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, released: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"2000"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> { title: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"The Sixth Sense"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, role: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Dr. Malcolm Crowe"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, released: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"1999"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> { title: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Armageddon"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, role: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Harry Stamper"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, released: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"1998"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> { title: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Twelve Monkeys"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, role: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"James Cole"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, released: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"1995"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> ];<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">}<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">app.factory(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'movieFatory'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> () {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">return</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">new</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> movieService();<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">});<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">app.controller(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'movieController'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> ($scope, movieFatory) {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> $scope.movies = movieFatory.movies;<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">});</span></div>
<h1>
<br /></h1>
<h1>
Provider<o:p></o:p></h1>
<div class="MsoNormal">
Then we’ve a skeleton way of creating a service which is
called provider. Angular’s provider exposes a get function by which we can get
a reference of our service. Using provider for building the movies service will
look like,<o:p></o:p></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">var</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> app = angular.module(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'app'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, []);<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> movieService() {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.movies = [<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> { title: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Die Hard"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, role: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Officer John McClane"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, released: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"1988"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> { title: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Unbreakable"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, role: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"David Dunn"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, released: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"2000"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> { title: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"The Sixth Sense"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, role: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Dr. Malcolm Crowe"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, released: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"1999"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> { title: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Armageddon"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, role: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Harry Stamper"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, released: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"1998"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> { title: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Twelve Monkeys"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, role: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"James Cole"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, released: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"1995"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> ];<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">}<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">app.provider(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'movieProvider'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">() {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.$get = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> getMovieService () {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">return</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">new</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> movieService();<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> };<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">});<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">app.controller(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'movieController'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> ($scope, movieProvider) {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> $scope.movies = movieProvider.movies;<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">});</span></div>
<h1>
<br /></h1>
<h1>
Constant & Value<o:p></o:p></h1>
<div class="MsoNormal">
Finally we’ve our two providers. They are value and constant
providers. They are almost same except for the fact that constants cannot be
changed once it is set and values cannot be injected in any configurations <i>[we
will discuss about how to inject constants in Angular configuration later].<o:p></o:p></i></div>
<div class="MsoNormal">
So let me finish by giving you two simple examples of these
two. For declaring a constant service we will write,<o:p></o:p></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal">
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">app.value(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">'actorName'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">, </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">'Bruce Willis'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">);</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">app.controller(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'movieController'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> ($scope, movieProvider, actorName) {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> $scope.movies = movieProvider.movies;<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> $scope.actor = actorName;<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">});<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal">
Here, we’ve created a value service provider which will
provide us an actor name in our controller so that we could use it in our view
like</div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ng-controller</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="movieController"></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">em</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">My Favourite <b>{{</b></span><span style="background: white; color: purple; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">actor</span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">}}</span></b><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> Movies</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">em</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ng-repeat</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="movie in movies"></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">{{</span></b><span style="background: white; color: purple; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">movie.title</span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">}}</span></b><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">{{</span></b><span style="background: white; color: purple; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">movie.role</span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">}}</span></b><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">{{</span></b><span style="background: white; color: purple; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">movie.released</span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">}}</span></b><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">hr</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">/></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD;"><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;"><br /></span></div>
<div class="MsoNormal">
And last of all we can create a constant service provider
similarly like the value provider service as<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">app.constant(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">'actorName'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">, </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">'Bruce Willis'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">);</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">app.controller(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'movieController'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> ($scope, movieProvider, actorName) {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> $scope.movies = movieProvider.movies;<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> $scope.actor = actorName;<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">});<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal">
And the html is same as it’s in the value service provider.
Later we will see how we can inject configuration settings in an Angular app
through constant service providers.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
I guess now you are clear about this hard to catch topics of
Angular. I tried to manage simple example of them for you. Hope you like them.
See you in the next post with a new topic.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
<br /></div>
</div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0tag:blogger.com,1999:blog-4653907606648805941.post-42366405884130891282014-09-01T23:05:00.000+06:002014-09-04T13:14:32.704+06:00Providers that make your life easy (Part II)<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="border-top: solid #9E5E9B 1.0pt; border: none; mso-border-top-themecolor: accent6; mso-element: para-border-div; padding: 1.0pt 0in 0in 0in;">
<div class="MsoTitle" style="text-align: right;">
<span class="MsoSubtleEmphasis">Chapter – VI<o:p></o:p></span></div>
</div>
<div align="right" class="MsoNormal" style="text-align: right;">
<span style="font-size: 16.0pt; line-height: 115%;">Providers that make your life easy (Part II)<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Okay, in the previous post I've shown you how to create an
object using JavaScript factory functions. So far so good. Now let me show you
another way of creating an object in JavaScript. This work around includes
creating an object using constructor functions. Following this pattern you
would create an object like below,<o:p></o:p></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">var</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> Actor = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> (firstName, lastName,
catchPhrase) {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.firstName = firstName;<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.lastName = lastName;<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.catchPhrase = catchPhrase;<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.sayCatchPhrase = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">() {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">return</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.firstName + </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"
"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> + </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.lastName + </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">" says "</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> + </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.catchPhrase;<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> };<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">var</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> clint = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">new</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> Actor(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">"Client"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">, </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">"Eastwood"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">, </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">"Go ahead.
Make my day"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">);</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><br /></span></div>
<div class="MsoNormal">
Except for some minor changes everything is almost
same as before. As you can see when we create an object using the constructor
function we always keep the variable’s <i>[variable to which the constructor function
holds its reference]</i> first letter capitalized. Also we have used<span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span><i><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">this</span></i><i><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD;">.</span></i><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD;"> </span>and then the property name of the object. Rather than
using a colon (:) to assign a property value to one of the passed in parameter,
here we simply assign it using an equal (=) sign.<span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;">
</span>Last but not
the least we called that constructor function by creating a new instance of it <i>[see
the</i><i><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span></i><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">new</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD;"> </span><i>keyword at the start of the constructor function call]</i>. Now if we
write <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">clint.sayCatchPhrase();</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
The output is same as before<o:p></o:p></div>
<div class="MsoNormal">
<span style="color: #008800; font-family: Consolas; font-size: 10.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US;"><br /></span></div>
<div class="MsoNormal">
<span style="color: #008800; font-family: Consolas; font-size: 10.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US;">"Clint Eastwood says Go ahead. Make my day”<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
So what is the main difference between these
two patterns for creating a JavaScript object? If we create an object with constructor
function, the object is born with a type. Means our <span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">clint</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span>is an <span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">Actor</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span>type.
You can check it in browser’s developer console by simply writing<o:p></o:p></div>
<div class="MsoNormal">
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><br /></span></div>
<div class="MsoNormal">
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">clint </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">instanceof</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> Actor</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Which will return true. But creating an object with a factory
function doesn't have a type. Also you would use the constructor function
pattern when creating an object of a type is too frequent.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
In my next post we will take a deep dive into the
wonderful world of <i>Angular.js</i> providers. Till then stay tuned!<o:p></o:p></div>
</div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0tag:blogger.com,1999:blog-4653907606648805941.post-8211947023653303392014-08-31T21:48:00.003+06:002014-10-06T00:30:33.267+06:00Providers that make your life easy (Part I)<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="border-top: solid #9E5E9B 1.0pt; border: none; mso-border-top-themecolor: accent6; mso-element: para-border-div; padding: 1.0pt 0in 0in 0in;">
<div class="MsoTitle" style="text-align: right;">
<span class="MsoSubtleEmphasis">Chapter – VI<o:p></o:p></span></div>
</div>
<div align="right" class="MsoNormal" style="text-align: right;">
<span style="font-size: 16.0pt; line-height: 115%;">Providers that make your life easy (Part I)<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
In the previous post I've shown you how you can implement
business logics in your controllers and use them in different parts of your
application just by calling them. But as we all know too much code in one place is never a good idea.
And it is considered to be a good habit not to write a whole amount of business
logics in a controller cause you may have to use those same logics again in
another controller. So doing the same thing over and over again is an overkill
and also error prone.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
So in this chapter I’m going to show you how <i>Angular.js </i>providers
can make your coding life cycle easier by separating these business logics from your
controllers and prevent from injecting bugs in your application.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Ok sounds fine, but there is a catch! Before I make your
head spin with those topics of <i>Angular, </i>let’s take a step back to some
object oriented JavaScript. You may ask yourself why? The answer is be patient
my friend!<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
So let’s start by creating a simple object in JavaScript.
There are many ways of creating an object in JavaScript but I’m going to show
you the easiest and most granted way. And that is known as creating an object
by object literals. First of all I want to create an <i>arnoldSchwarzenegger</i>
(A Hollywood Actor) object. The object will have a property for holding the
first name of the actor, a property for the last name, a property for the catch
phrase and last of all a property which will make a string with all of those previous
properties and show it to the application users. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Creating an object literal is as easy as pie. It is just
some key value pair. All you have to do is to define a key <i>[a string
representing the property name]</i> and a value associated with it. So from
that concept our Arnold Schwarzenegger object literal will look like this,<o:p></o:p></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">var</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> arnoldSchwarzenegger = {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> firstName: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Arnold"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> lastName: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Schwarzenegger"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> catchPhrase: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Hasta la vista, baby"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> <a href="https://www.blogger.com/null" name="OLE_LINK2"></a><a href="https://www.blogger.com/null" name="OLE_LINK1">sayCatchPhrase</a>:
</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> () {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">return</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.firstName + </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">" "</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> + </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.lastName + </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"
says " </span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">+ </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.catchPhrase;<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 0.5in;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">};<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 0.5in;">
<br /></div>
<div class="MsoNormal">
Now if you call the sayCatchPhrase property like this<o:p></o:p></div>
<div class="MsoNormal">
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><br /></span></div>
<div class="MsoNormal">
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">arnoldSchwarzenegger.sayCatchPhrase();</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
You will get the string given below <o:p></o:p></div>
<div class="MsoNormal">
<span style="color: #008800; font-family: Consolas; font-size: 10.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US;"><br /></span></div>
<div class="MsoNormal">
<span style="color: #008800; font-family: Consolas; font-size: 10.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US;">"Arnold Schwarzenegger says Hasta la vista,
baby"<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Remember to add those first brackets when you call <i>sayCatchPhrase</i>.
Since JavaScript don’t have methods for an object, you can bypass this rule by
encapsulating a function within a property.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Now it’s time to create the clintEastwood object. All is
same as before.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">var</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> clintEastwood = {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> firstName: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Clint"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> lastName: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Eastwood"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> catchPhrase: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Go ahead. Make my day"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> sayCatchPhrase: </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> () {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">return</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.firstName + </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">" "</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> + </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.lastName + </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"
says "</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> + </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.catchPhrase;<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 0.5in;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">};<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal">
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">clintEastwood.sayCatchPhrase();</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><br /></span></div>
<div class="MsoNormal">
<span style="color: #008800; font-family: Consolas; font-size: 10.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US;">"Clint Eastwood says Go ahead. Make my day”<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Now let’s create another one. Wait a sec!!! You may ask
yourself why am I doing the same thing over and over again. Why don’t I just
define a class and declare those properties in that class. Then when the time
comes I just instantiate an object of that class and use those properties. Well
you are right about the fact that we are doing the same thing over and over
again but to our utter luck we don’t have the concept of class in JavaScript. <span style="color: #008800; font-family: Consolas; font-size: 10.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US;"><o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
But don’t worry because where there is a will there is a
way. Functions are like the first class citizen in JavaScript language. We can
do almost anything with functions. And we can also create an object within a
function and return that object. Functions like these are called factory
functions.<span style="color: #008800; font-family: Consolas; font-size: 10.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US;"><o:p></o:p></span></div>
<div class="MsoNormal">
So creating and returning an actor object with a factory
function looks like this,<span style="color: #008800; font-family: Consolas; font-size: 10.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">var</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> actor = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> (firstName, lastName,
catchPhrase) {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">return</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> firstName: firstName,<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> lastName: lastName,<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> catchPhrase: catchPhrase,<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> sayCatchPhrase: </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> () {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">return</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.firstName + </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"
"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> + </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.lastName + </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">" says "</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> + </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.catchPhrase;<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> };<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin: 0in 0in 0.0001pt 0.5in;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">};</span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p><br /></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">var</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> clint = actor(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Client"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Eastwood"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Go ahead. Make my day"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">);<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
</div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">clint.sayCatchPhrase();</span>
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="color: #008800; font-family: Consolas; font-size: 10.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US;">"Clint Eastwood says Go ahead. Make my day”<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="color: #008800; font-family: Consolas; font-size: 10.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-fareast-font-family: "Times New Roman"; mso-fareast-language: EN-US;"><br /></span></div>
<div class="MsoNormal">
As you can see I've declared a function with some
parameters. In that function we set the passed in parameters in an object
literal and then return that to hold the reference into <i>actor </i>variable.
Then all we did is called the <i>actor</i> function with some parameters.<br />
<br /></div>
<div class="MsoNormal">
I hope you like<span style="background-color: white;">d </span>the way I create an object with factory function to restrict myself from doing
the same thing again and again. There is another way <span style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial;">by which</span> we can create an object. But that <span style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial;">will be discussed</span> in the
next part. <span style="font-size: 12.0pt; line-height: 115%;"><o:p></o:p></span></div>
</div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0tag:blogger.com,1999:blog-4653907606648805941.post-17455779685731582412014-08-28T01:11:00.002+06:002014-09-04T13:16:44.434+06:00Alarming Delegates (Advanced)<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoTitle">
<div style="text-align: right;">
<span style="font-size: 20.0pt;">Alarming Delegates (Advanced)<o:p></o:p></span></div>
</div>
<div style="border-bottom: solid #EA6312 1.0pt; border: none; mso-border-bottom-alt: solid #EA6312 .5pt; mso-border-bottom-themecolor: accent2; mso-border-bottom-themecolor: accent2; mso-element: para-border-div; padding: 0in 0in 2.0pt 0in;">
<h1 style="text-align: right;">
<span style="font-size: 16.0pt;">Creating an alarm system using delegates<o:p></o:p></span></h1>
</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
So here goes a post about c# delegates, which is considered
to be one of the hardest concept in c#. So I decided to show you a simple
example which I guess will clear the concept of delegates for you. <o:p></o:p></div>
<div class="MsoNormal">
<br />
Delegates are like function pointers in C++ and callback
functions in JavaScript. Functions can be encapsulated using delegates. As you
already know that c# is an event based programming language, you will be happy
to know that behind the scene all events are basically delegates. So sooner or
later you will find yourself learning delegates.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
‘Nuff said! Let’s talk about the example which we are going
to build. Our example is very simple one. All we are going to build is a simple
console app, which will work like a clock. It will only count the seconds, so
you can call it a second’s clock. In this simple app you will have to set an
alarm for an upcoming second. The app will continuously check the current
second against the second set at compile time and will show an alarming message
if the condition is matched.<o:p></o:p></div>
<div class="MsoNormal">
<br />
Now let’s talk about how we are going to build it using
delegates. For simplicity let’s create a <span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">Clock</span> class first. For now
the class only contains a single <span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">DateTime</span> property named <span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">Alarm</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;">.</span><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">class</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">Clock</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">{<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 0.5in;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">DateTime</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> Alarm { </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">get</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">set</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">}</span> <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
We will use this auto property to set an alarm time in
seconds in near future.<br />
<br />
<br />
<o:p></o:p></div>
<div class="MsoNormal">
We all know that Class and Struct are some ways of creating
user defined types. Likewise delegates can be used to define a type which can
only encapsulate functions. Signature of a delegate type is more like a
function declaration. To declare a delegate, you simply have to follow the
signature given below,<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">access_modifier</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">delegate_keyword</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">reurn_type</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">delegate_name</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">(</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">type</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> parameter1,……);</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
So, let’s go and create our own delegate as <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">delegate</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">void</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">ClockAlarm</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">(</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">Clock</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> clock,</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;"> string</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> name</span></span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">);</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
As you can see our newly created delegate, <span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">ClockAlarm</span><span style="color: #2b91af; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD;"> </span>can take a <span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">Clock</span><span style="color: #2b91af; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD;"> </span>object and a string as parameters and can return a <span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">void</span> type. Everything is set.<br />
<br />
So I
successfully declared a delegate but there is no use of it.<span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span> Let’s go to our <span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">Main</span> method in <span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">Program</span><span style="color: #2b91af; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD;"> </span>class and write some magical code. Let’s start by
creating an instance of our <span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">Clock</span><span style="color: #2b91af; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD;"> </span>class and
assign a <i>seconds</i> value of a near future for the <span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">Alarm</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span>property. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">var</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> clock = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">new</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">Clock</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">();<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">clock.Alarm = </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">DateTime</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">.Now.AddSeconds(5);</span><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Now it’s time to encapsulate a function with our <span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">ClockAlarm</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span>delegate<span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;">. </span>You may be
thinking now that <i>ok so I have a delegate to which I can
attach a function. But what will be the signature and definition of the
attaching function?</i> I know you are geek enough and figured out the
attaching functions’ signature. Yes you are right!!! its signature is same as our <span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">ClockAlarm</span><span style="color: #2b91af; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD;"> </span>delegate. If we try to attach a function whose signature mismatches with our <span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">ClockAlarm</span><span style="color: #2b91af; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD;"> </span>delegate signature, it will give you a compile time
error.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Next let’s create our attaching or subscribing function
with definition as below</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">private</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">static</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">void</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> Wakeup(</span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">Clock</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> clock)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">{<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 0.5in;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">while</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> (</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">true</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 0.5in;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">Thread</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.Sleep(1000);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">DateTime</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> currentTime = </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">DateTime</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.Now;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" style="margin: 0in 0in 0.0001pt 0.5in; text-indent: 0.5in;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">if</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> (currentTime.Second == clock.Alarm.Second)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">Console</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.WriteLine(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Please
wake up!!!!"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">);</span><br />
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"> break</span></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">;</span><br />
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" style="margin: 0in 0in 0.0001pt 1in;">
<span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">Console</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.WriteLine(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Clock is ticking!!!"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 0.5in;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">}<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">} </span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"><br /></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
The code is very simple all we did is created a while loop which will first send the system to sleep for one second
and wake it up. After that it will assign the current <span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">DateTime </span>value to the
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">currentTime </span>variable. After that the if clause checks if the current second matches the <span style="background: white; font-family: Consolas; font-size: 9.5pt;">Alarm</span><span style="font-family: Consolas; font-size: 9.5pt;">
</span>property
value which was passed in the function object. If the clause is true then it
prints the message <span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Please
wake up!!!!" </span>and breaks out of the loop otherwise it will continuously prints <span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Clock is ticking!!!" </span>message. </div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br />
Now its time to create an instance of our delegate and then attach the subscribing function to it.<br />
<br />
<span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ClockAlarm </span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">clockAlarm;</span><br />
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"><span style="background: white; font-family: Consolas; font-size: 9.5pt;">clockAlarm = Wakeup;</span></span><br />
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span> </span><br />
Last of all we will have to invoke the delegate with the required parameters. To do that we will simply have to write<br />
<br />
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"><span style="background: white; font-family: Consolas; font-size: 9.5pt;">clockAlarm(clock,</span></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Fiyaz"</span>); </span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br />
So I guess you got the point. With the help of a delegate we are making a function subscribing to an event which is basically for now is simply an alarm notification. Now if you run the program you’ll something like this,</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp0VV1UCbGb9o3OZNOpEF7hUdUTBPyWGE9CK846a_rhB7OTTvxz6cNkciWZ3IuCATObGpLq1lU3Ipe__Iw-UJFfXjLSIJ5svSvjixUQR39veRtL9Rtk5_HcyuLrFmF2uJzrj8Eh1nSW4s/s1600/blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp0VV1UCbGb9o3OZNOpEF7hUdUTBPyWGE9CK846a_rhB7OTTvxz6cNkciWZ3IuCATObGpLq1lU3Ipe__Iw-UJFfXjLSIJ5svSvjixUQR39veRtL9Rtk5_HcyuLrFmF2uJzrj8Eh1nSW4s/s1600/blog.png" height="161" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVgDoom2RT9SUCu6VXtozUKFJ54PkDLE3UHKhHStIeRm6cuwNsPxJJj81iWvRvpKX9P2qTx68zN1OSbqGrTGnah14HbZHeE0p6fS3vu9nJyyIQKQiogySLqS28uI1mV88CAdEGJ9Hlkhg/s1600/Delegates.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br /></a></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
We can attach more than one subscribing
functions to our delegate which is a process of multicasting delegates. More about
delegate multicasting in the next post.<o:p></o:p></div>
<br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
</div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0tag:blogger.com,1999:blog-4653907606648805941.post-21120206107191830502014-08-19T01:28:00.001+06:002014-09-04T13:14:32.700+06:00Make Your Code Modular Buddy! (Modules)<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="border-top: solid #9E5E9B 1.0pt; border: none; mso-border-top-themecolor: accent6; mso-element: para-border-div; padding: 1.0pt 0in 0in 0in;">
<div class="MsoTitle" style="text-align: right;">
<span class="MsoSubtleEmphasis">Chapter – V<o:p></o:p></span></div>
</div>
<div align="right" class="MsoNormal" style="text-align: right;">
<span style="font-size: 16.0pt; line-height: 115%;">Make Your Code Modular Buddy! (Modules)<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Unlike the <i>Hello World Program</i>, in real life an
enterprise level application gets bigger and bigger day by day as the client’s
requirements flown in from here and there. Managing these kind of applications
are easy when some heavyweight enterprise languages like C#, Java etc. are
there for you. These heavyweight languages provides some features, where a
client side language like JavaScript often lakes these features. Features like <i>Class
</i>and <i>Namespace</i> are absent in JavaScript. But since every problem has
a solution, with the help of JavaScript functions we can have both of those
features. The simplest way to create a namespace in <i>JavaScript </i>is to use
a self-invocating anonymous function. Likewise we can use a factory function
which works as a constructor function that returns a singleton object. But
enough of these advance features. Let’s see what <i>Angular</i> provides us to
implement the concept of <i>Namespaces and Class</i>. Angular has a feature
called module by which we can introduce <i>Namespaces</i> in our code. By using
<i>module</i>s we can keep the global namespace <i>[Global Scope]</i> clean.
This makes testing our code easier and also sharing of code between
applications easier <i>[You can make your own modules and use it in different
applications]</i>. For an example let’s create a simple module and encapsulate
some basic functionalities into the module.<o:p></o:p></div>
<div class="MsoNormal">
Since separating the scripts from the <i>HTML </i>files is a
good practice. A simple <i>Anguler</i> module can be written as follows in the <i>app.js</i>
file:<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">var</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> app = angular.module(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'app'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, []);<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">app.controller(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'messageController'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">($scope) {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> $scope.data = {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> message: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Fiyaz Hasan"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> };<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">});<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">app.controller(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'mathController'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">,</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">($scope) {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> $scope.data = {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> number: 9,<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> squareRoot: </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> () {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">return</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> Math.sqrt(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.number);<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> };<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">});<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
The important part here is that we declared an app <i>Namespace</i>
with the help of <span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">angular.module(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">'app'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">, []);</span> Here the first parameter represents the <i>Namespace
</i>identifier and the empty [] third braces means that we can inject
dependencies into the module.<i>[More about dependencies will be discussed
later]. </i>Except that<i> </i>nothing is so special here. All I did is I created two
app specific controllers that can only be accessed when a <i>DOM </i>references
the module.<br />
<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
The controllers serve the same functionality as the
previous post’s controllers serve. Now goes the HTML layout,<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">!DOCTYPE</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">html</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">html</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">lang</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="en"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ng-app</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="app"></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">head</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">title</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">Angular Module</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">title</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">head</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">body</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ng-controller</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="messageController"></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">input</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">type</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="text"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ng-model</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="data.message"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">/></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">{{</span></b><span style="background: white; color: purple; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">data.message</span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">}}</span></b><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ng-controller</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="mathController"></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">input</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">type</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="text"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ng-model</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="data.number"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">/></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">{{</span></b><span style="background: white; color: purple; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">data.squareRoot()</span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">}}</span></b><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">src</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="scripts/angular.js"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">src</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="scripts/App/app.js"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">body</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">html</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
As you can see all are as before except at the top I have
referenced the app module into the <i>ng-app </i>directive. And we are done.
Now our HTML document will only responds to the different functionality
described in the app module.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Now let’s talk about how we have kept our global namespace
clean by using module. To show an example I've created another <i>Angular
module </i>called app2 and the script is as follows,<o:p></o:p></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">var</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> app2 = angular.module(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'app2'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, []);<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">app2.controller(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'messageController'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> ($scope) {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> $scope.data = {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> message: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Circle circumference"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> };<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">});<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;">app2.controller(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">'mathController'</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">, </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> ($scope) {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> $scope.data = {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> radius: 3,<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> circumference: </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> () {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">return</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> 2 * Math.PI * </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.radius;<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> };<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">});</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Up in the script again I've two controllers whose names are
as same as app modules controller but in app2 module they serve different
purposes. As you can see the first one <i>[messageController]</i> is identical
to the previous <i>[messageController] </i>one in the app module where the
second controller <i>[mathController]</i> returns the circumference of a circle
with a given radius. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Again I've created another HTML file called index2.html and
the layout is like this,<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">!DOCTYPE</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">html</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">html</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">lang</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="en"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ng-app</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="app2"></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">head</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">title</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">Angular Module</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">title</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">head</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">body</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ng-controller</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="messageController"></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">input</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">type</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="text"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ng-model</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="data.message"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">/></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">{{</span></b><span style="background: white; color: purple; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">data.message</span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">}}</span></b><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ng-controller</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="mathController"></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">input</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">type</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="text"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ng-model</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="data.radius"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">/></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">{{</span></b><span style="background: white; color: purple; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">data.circumference()</span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">}}</span></b><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">src</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="scripts/angular.js"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">src</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="scripts/App/app.js"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">body</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">html</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
From the script shown above I guess you've already figured
out the rest. In app2 <i>module </i>we have those two controllers with the same
name again as we have in the app <i>module </i>but I kept the controller name
same. As we can see that identical controllers didn't come in each other’s way because
they are attached to different modules. Since two <i>HTML </i>documents
reference two different modules the behavior that the app gets depend on the
different module functionalities. The outputs are shown below.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b><i>OUTPUT:</i></b><b><i><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD;"><o:p></o:p></span></i></b></div>
<div class="MsoNormal">
<b><i><br /></i></b></div>
<div class="MsoNormal">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQO-WKgp-L3Otc-BaCzYRi3YG4fIpvk1inkK230T0I8VW6JUUyoYp_F3E-nliS_wuZegNTQTYtwTPNhaizawX7ItVfaSw10rOMXzPyUQkbN3V1lld3TpY6l1MpK5esrjvMJOo_UTAqOF4/s1600/url1.png" imageanchor="1" style="clear: left; float: left; font-size: 16px; line-height: 18.399999618530273px; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQO-WKgp-L3Otc-BaCzYRi3YG4fIpvk1inkK230T0I8VW6JUUyoYp_F3E-nliS_wuZegNTQTYtwTPNhaizawX7ItVfaSw10rOMXzPyUQkbN3V1lld3TpY6l1MpK5esrjvMJOo_UTAqOF4/s1600/url1.png" /></a><span style="font-size: 12.0pt; line-height: 115%; mso-bidi-language: BN-BD; mso-fareast-language: EN-US; mso-no-proof: yes;"><v:shapetype coordsize="21600,21600" filled="f" id="_x0000_t75" o:preferrelative="t" o:spt="75" path="m@4@5l@4@11@9@11@9@5xe" stroked="f">
<v:stroke joinstyle="miter">
<v:formulas>
<v:f eqn="if lineDrawn pixelLineWidth 0">
<v:f eqn="sum @0 1 0">
<v:f eqn="sum 0 0 @1">
<v:f eqn="prod @2 1 2">
<v:f eqn="prod @3 21600 pixelWidth">
<v:f eqn="prod @3 21600 pixelHeight">
<v:f eqn="sum @0 0 1">
<v:f eqn="prod @6 1 2">
<v:f eqn="prod @7 21600 pixelWidth">
<v:f eqn="sum @8 21600 0">
<v:f eqn="prod @7 21600 pixelHeight">
<v:f eqn="sum @10 21600 0">
</v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:formulas>
<v:path gradientshapeok="t" o:connecttype="rect" o:extrusionok="f">
<o:lock aspectratio="t" v:ext="edit">
</o:lock></v:path></v:stroke></v:shapetype><v:shape id="Picture_x0020_1" o:spid="_x0000_i1028" style="height: 19.5pt; mso-wrap-style: square; visibility: visible; width: 188.25pt;" type="#_x0000_t75">
<v:imagedata o:title="" src="file:///C:\Users\Fiyaz\AppData\Local\Temp\msohtmlclip1\01\clip_image001.png">
</v:imagedata></v:shape></span><span style="font-size: 12.0pt; line-height: 115%;"> </span><span style="font-size: 12.0pt; line-height: 115%; mso-bidi-language: BN-BD; mso-fareast-language: EN-US; mso-no-proof: yes;"><v:shape id="Picture_x0020_5" o:spid="_x0000_i1027" style="height: 21pt; mso-wrap-style: square; visibility: visible; width: 179.25pt;" type="#_x0000_t75"><v:imagedata o:title="" src="file:///C:\Users\Fiyaz\AppData\Local\Temp\msohtmlclip1\01\clip_image002.png"></v:imagedata></v:shape></span><span style="font-size: 12.0pt; line-height: 115%;"><o:p></o:p></span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNwnQailBFoU_nMls1phLTgPsblAdTaweL4JDKSzIgeBRCoVacujbYYhmBHVfQzIKGYEn2UctIJEKi7iNU9ydv3XJ3feDpyLju9iez1f5CRgcIOTe0qBjVnPmT9q93e_Rsq9bGX1DGf4U/s1600/url2.png" imageanchor="1" style="font-size: 16px; line-height: 18.399999618530273px; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNwnQailBFoU_nMls1phLTgPsblAdTaweL4JDKSzIgeBRCoVacujbYYhmBHVfQzIKGYEn2UctIJEKi7iNU9ydv3XJ3feDpyLju9iez1f5CRgcIOTe0qBjVnPmT9q93e_Rsq9bGX1DGf4U/s1600/url2.png" /></a></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%; mso-bidi-language: BN-BD; mso-fareast-language: EN-US; mso-no-proof: yes;"><v:shape id="Picture_x0020_2" o:spid="_x0000_i1026" style="height: 152.25pt; mso-wrap-style: square; visibility: visible; width: 141.75pt;" type="#_x0000_t75">
<v:imagedata o:title="" src="file:///C:\Users\Fiyaz\AppData\Local\Temp\msohtmlclip1\01\clip_image003.png">
</v:imagedata></v:shape></span><span style="font-size: 12.0pt; line-height: 115%;"> </span></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4s38la7Qh9A0KYwLZY2BpBQavb4v1LFxGJffaM14J_I3X6QfaJfbG7AsnLaBH6wlVBNKcT5ArCaXz6tLVaH_i8ZAM9uQ0EYZ1AXD31YJEWfEIPyeGua0yJuiz0PKJ4odjXo97nlwK6k0/s1600/outputmodule1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4s38la7Qh9A0KYwLZY2BpBQavb4v1LFxGJffaM14J_I3X6QfaJfbG7AsnLaBH6wlVBNKcT5ArCaXz6tLVaH_i8ZAM9uQ0EYZ1AXD31YJEWfEIPyeGua0yJuiz0PKJ4odjXo97nlwK6k0/s1600/outputmodule1.png" /></a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVOziVMbbwtL51YUP8KQncD6PXfiMwFrQrIaPQZDZsMT6esuZigdSWy6O6U7IQ3jVhTlNSrRLoP94EIGIbYSkwF6juT6kdrlqUfMZ6laLdC942jmKxLL7os-ltbYzG3tdX0cryTlvL7lU/s1600/outputmodule2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVOziVMbbwtL51YUP8KQncD6PXfiMwFrQrIaPQZDZsMT6esuZigdSWy6O6U7IQ3jVhTlNSrRLoP94EIGIbYSkwF6juT6kdrlqUfMZ6laLdC942jmKxLL7os-ltbYzG3tdX0cryTlvL7lU/s1600/outputmodule2.png" /></a></div>
<span style="font-size: 12.0pt; line-height: 115%;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-size: 12.0pt; line-height: 115%;"><br /></span></div>
<span style="font-size: 12.0pt; line-height: 115%;">
<br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-size: 12.0pt; line-height: 115%;"><br /></span></div>
<span style="font-size: 12.0pt; line-height: 115%;">
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
</span><span style="font-size: 12.0pt; line-height: 115%; mso-bidi-language: BN-BD; mso-fareast-language: EN-US; mso-no-proof: yes;"><v:shape id="Picture_x0020_6" o:spid="_x0000_i1025" style="height: 152.25pt; mso-wrap-style: square; visibility: visible; width: 141.75pt;" type="#_x0000_t75">
<v:imagedata o:title="" src="file:///C:\Users\Fiyaz\AppData\Local\Temp\msohtmlclip1\01\clip_image003.png">
</v:imagedata></v:shape></span><span style="font-size: 12.0pt; line-height: 115%;"><o:p></o:p></span></div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com1tag:blogger.com,1999:blog-4653907606648805941.post-36736602416028282572014-08-09T16:25:00.000+06:002014-09-04T13:14:32.702+06:00Control Your App’s Behavior (Controller)<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="border-top: solid #9E5E9B 1.0pt; border: none; mso-border-top-themecolor: accent6; mso-element: para-border-div; padding: 1.0pt 0in 0in 0in;">
<div class="MsoTitle" style="text-align: right;">
<span class="MsoSubtleEmphasis">Chapter – IV<o:p></o:p></span></div>
</div>
<div align="right" class="MsoNormal" style="text-align: right;">
<span style="font-size: 16.0pt; line-height: 115%;">Control Your App’s Behavior (Controller)<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
In our previous <i>Hello World </i>example we simply defined
a model <i>[i.e. data.message]</i> in our ng-model directive then we set some
value on it and at the same time get the value from it. But how about we pass a
predefined message to show at start up. Let me clarify what I’m saying. Let’s
modify our <i>Hello World Program </i>to look like this, <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">!DOCTYPE</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">html</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">html</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">lang</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="en"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ng-app</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">head</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">meta</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">charset</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="UTF-8"></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">title</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">Angular Controller</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">title</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">head</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt;">></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ng-controller</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="messageController"></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">input</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">type</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="text"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ng-model</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="data.message"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">/></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">{{</span></b><span style="background: white; color: purple; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">data.message</span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">}}</span></b><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">src</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> messageController($scope) {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> $scope.data = {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> message: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Fiyaz Hasan"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> };<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> };<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">body</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">></span><br />
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">html</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">></span></div>
</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b><i>OUTPUT:</i></b><b><i><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD;"><o:p></o:p></span></i></b></div>
<div class="MsoNormal">
<!--[if gte vml 1]><v:shapetype id="_x0000_t75"
coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe"
filled="f" stroked="f">
<v:stroke joinstyle="miter"/>
<v:formulas>
<v:f eqn="if lineDrawn pixelLineWidth 0"/>
<v:f eqn="sum @0 1 0"/>
<v:f eqn="sum 0 0 @1"/>
<v:f eqn="prod @2 1 2"/>
<v:f eqn="prod @3 21600 pixelWidth"/>
<v:f eqn="prod @3 21600 pixelHeight"/>
<v:f eqn="sum @0 0 1"/>
<v:f eqn="prod @6 1 2"/>
<v:f eqn="prod @7 21600 pixelWidth"/>
<v:f eqn="sum @8 21600 0"/>
<v:f eqn="prod @7 21600 pixelHeight"/>
<v:f eqn="sum @10 21600 0"/>
</v:formulas>
<v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/>
<o:lock v:ext="edit" aspectratio="t"/>
</v:shapetype><v:shape id="Picture_x0020_3" o:spid="_x0000_i1026" type="#_x0000_t75"
style='width:153pt;height:70.5pt;visibility:visible;mso-wrap-style:square'>
<v:imagedata src="file:///C:\Users\Fiyaz\AppData\Local\Temp\msohtmlclip1\01\clip_image001.png"
o:title=""/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6oUhQIoaOLVtHoDQDkAYk3GakBY3ILChHf6QaPvtqzgo4eOm90LdtL4oISaPsLVvlwpjzSk9tVYQemya0woTNgk0GMdX4njGvUPKFWsmtEYHMjn-KCXEzi0F4tnrl-kTR81Fd8kZRux4/s1600/outputcontroller1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6oUhQIoaOLVtHoDQDkAYk3GakBY3ILChHf6QaPvtqzgo4eOm90LdtL4oISaPsLVvlwpjzSk9tVYQemya0woTNgk0GMdX4njGvUPKFWsmtEYHMjn-KCXEzi0F4tnrl-kTR81Fd8kZRux4/s1600/outputcontroller1.png" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br />
<div class="MsoNormal">
All we've done here is shifted the <i>input </i>the <i>h1 </i>tag
in a new <i>div</i> tag. Then we've inserted a new <i>Angular</i> directive
called ng-controller in that <i>div</i>. Angular controllers are just functions with
some extra ordinary capabilities. From a simplest viewpoint, a controller in a
MVC application routes an incoming request <i>[e.g. an URL typed in the
browsers address bar]</i> to a specific business logic section where the
request is parsed and a response is sent back after some logic manipulations.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
So, with our ng-controller set to the string <i>messageController</i>,<i>
</i>we are saying that in our script we've a function called <i>messageController
</i>which is responsible for setting the message property of the data object.
As you can see I’ve set the message property value to my name.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Now you can ask that how am I getting the data object’s
message property value without returning the object from the function? Look at
the <i>messageController </i>function again. As you can see I’m passing a variable
named $scope to our <i>messageController </i>function. Well it’s not like I've
came up with a variable name like $scope to pass to my controller function, actually
it’s an <i>Angular </i>defined variable or we can say a provider <i>[We will
talk about providers later].</i> With this $scope provider we are just sending
the scope of a controller to be active. Which means that only the <i>div</i>
containing <i>ng-controller=”messageController” </i>will flow the data object’s
property values of <i>messageController </i>function. It’s more like we are
defining a specific functionality for a specific area within our document.
Likewise we are able to define controllers as much as we need for our apps to
serve different functionalities for different sections in the document. For
example let's create another controller which will do some math on a number passed
from our UI. The final code look like this,<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">!DOCTYPE</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">html</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">html</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">lang</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="en"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ng-app</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">head</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">meta</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">charset</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="UTF-8"></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">title</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">Angular Controller</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">title</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">head</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">body</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ng-controller</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="messageController"></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">input</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">type</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="text"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ng-model</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="data.message"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">/></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">{{</span></b><span style="background: white; color: purple; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">data.message</span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">}}</span></b><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ng-controller</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="mathController"></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">input</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">type</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="text"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">ng-model</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="data.number"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">/></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">{{</span></b><span style="background: white; color: purple; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">data.squareRoot()</span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">}}</span></b><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">div</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">src</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> messageController($scope) {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> $scope.data = {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> message: </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">"Fiyaz Hasan"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> };<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> };<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> mathController($scope) {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> $scope.data = {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> number: 9,<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> squareRoot: </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">function</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> () {<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">return</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> Math.sqrt(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">.number);<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> };<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> };<o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">body</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">html</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">><o:p></o:p></span></div>
</div>
<div class="MsoNormal">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;"><br /></span></div>
<div class="MsoNormal">
If you run your app you will see something like this in you
browsing window,</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b><i>OUTPUT:<o:p></o:p></i></b></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%; mso-bidi-language: BN-BD; mso-fareast-language: EN-US; mso-no-proof: yes;"><!--[if gte vml 1]><v:shape
id="Picture_x0020_4" o:spid="_x0000_i1025" type="#_x0000_t75" style='width:143.25pt;
height:147pt;visibility:visible;mso-wrap-style:square'>
<v:imagedata src="file:///C:\Users\Fiyaz\AppData\Local\Temp\msohtmlclip1\01\clip_image002.png"
o:title=""/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span><span style="font-size: 12.0pt; line-height: 115%;"><o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNB-XRQBKvpgsSCw-R4X0xWyJpotIk_n_Zp-iJfLUnPE5b_ObbWYDo5ddqru3P5_1eUCk55oSS1X4K3J1ooBxJv-mWEfWrACI7BDsZQzsEzBpuThlr63VfCxpreDnZOnhfTXbkN3BojKQ/s1600/output+controller+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNB-XRQBKvpgsSCw-R4X0xWyJpotIk_n_Zp-iJfLUnPE5b_ObbWYDo5ddqru3P5_1eUCk55oSS1X4K3J1ooBxJv-mWEfWrACI7BDsZQzsEzBpuThlr63VfCxpreDnZOnhfTXbkN3BojKQ/s1600/output+controller+2.png" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br />
<div class="MsoNormal">
So, in our new controller instead of getting a static property
value, we perform a square root function on the number passed from the UI. Look
carefully at<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">{{</span></b><span style="background: white; color: purple; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">data.squareRoot()</span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt;">}}</span></b><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">><o:p></o:p></span></div>
<div align="left" class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal">
As you can see you are executing a method in the data object
called squareRoot. Syntax written in {{ }} is called expression. You can execute
any kind of property value or functions in the {{ expression }}. You can also
add some filtering and sorting expressions which we will see later.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
I guess from now you know how to work with <i>Angular</i> controller.
I will see you in the next post.<span style="font-size: 12.0pt; line-height: 115%;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal">
<br /></div>
</div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0tag:blogger.com,1999:blog-4653907606648805941.post-70603218250739457262014-08-03T02:03:00.001+06:002014-09-04T13:14:32.709+06:00Hello from Angular (Data Binding)<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="border-top: solid #9E5E9B 1.0pt; border: none; mso-border-top-themecolor: accent6; mso-element: para-border-div; padding: 1.0pt 0in 0in 0in;">
<div class="MsoTitle" style="text-align: right;">
<span class="MsoSubtleEmphasis">Chapter – III<o:p></o:p></span></div>
</div>
<div align="right" class="MsoNormal" style="text-align: right;">
<span style="font-size: 16.0pt; line-height: 115%;">Hello from Angular (Data Binding)<o:p></o:p></span></div>
<div align="right" class="MsoNormal" style="text-align: right;">
<span style="font-size: 16.0pt; line-height: 115%;"><br /></span></div>
<div class="MsoNormal">
<i>[If you are finding it
difficult to grasp on what I wrote so far, don’t worry! Stick with me. I will
take baby steps to make you familiar with Angular.js and after seeing some
simple examples, you will understand what I’m trying to achieve here with
Angular.js]<o:p></o:p></i></div>
<div class="MsoNormal">
<i><br /></i></div>
<div class="MsoNormal">
So let’s see what we've got as our first example. If I’m
right, when I said our first example. You are thinking like, “No!!! Not the
hello world again!!!!” Actually you are right it’s our very old friend <i>Hello
World Program</i>. But this time it’s not about printing the string “Hello
World” on a button click rather we’ll bind a DOM element <i>[</i><span style="background: white; font-family: Helvetica, sans-serif;">e.g.<i>
</i></span><i><h1></h1>] </i>to a input element <i>[</i><span style="background: white; font-family: Helvetica, sans-serif;">e.g.<i>
</i></span><i><input type=”text”/>] </i>and update the text in <i>h1</i>
tag according to the text typed in the <i>input</i> field. And all of this will
be happening in real time. It’s a very simple example of<i> Angular.js Data
Binding</i>. So before we dive into some coding let’s have the very basic
starter template for our <i>Angular.js Hello World App</i>. For that, first we
will have to download the <i>Angular.js</i> library from <a href="https://angularjs.org/">https://angularjs.org/</a>. If you already
clicked the big download button there then you are seeing a floating panel like
this,<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPDk4JsvkHVlzl4MvFsj5RfHw_8OdHSX74PQYiIUYpkKfs-rX6VmutCiDIVw5-_O0l4f7fzWBa7Zow0XF1uNHESBzprBEgd0OM-8M3clAtct8oLXBKCD0NC6lQh9zDF-sCDaGhbjBJGWM/s1600/downlaod.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPDk4JsvkHVlzl4MvFsj5RfHw_8OdHSX74PQYiIUYpkKfs-rX6VmutCiDIVw5-_O0l4f7fzWBa7Zow0XF1uNHESBzprBEgd0OM-8M3clAtct8oLXBKCD0NC6lQh9zDF-sCDaGhbjBJGWM/s1600/downlaod.png" height="200" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<o:p></o:p><br />
<div class="MsoNormal">
At the time of writing this post the 1.3.x (latest) was in
beta version. So we will work with 1.2.3 (legacy) version. As you can see we also
have a CDN (Content Delivery network) link. I’m going to use the CDN link
because I’ve got a stable internet connection. So our basic template will look
like this,<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<a href="https://www.blogger.com/null" name="OLE_LINK6"></a><a href="https://www.blogger.com/null" name="OLE_LINK5"><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span></a><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">!DOCTYPE</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">html</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">html</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">lang</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="en"></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">head</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">meta</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">charset</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="UTF-8"></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">title</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;">Angular Starter Template</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">title</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">head</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">body</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><a href="https://www.blogger.com/null" name="OLE_LINK4"></a><a href="https://www.blogger.com/null" name="OLE_LINK3"><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span></a><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">input</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">type</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="text"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">/></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">src</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">script</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">body</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">html</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="background: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Okay as you can see its all HTML up there. Next we will have
to tell this HTML file to behave like an Angular.js app. This is the most
important part of all since it instantiate the Angular.js library into your
HTML file. To do that we’ll have to use an <i>Angular Directive</i> called <i>ng-app
</i>in the opening <i><html> </i>tag like this,<span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">html</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">lang</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">="en"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">ng-app</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD;"><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;"><br /></span></div>
<div class="MsoNormal">
So, you have an Angular.js app. Next you will add another
directive called <i>ng-model</i> to you app and this time it is going into the
<i><input type=”text”/> </i>tag<i>.</i> It should look like this,<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">input</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">type</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">="text"</span><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span><span style="background: white; color: red; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">ng-model</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">="data.message"/><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;"><br /></span></div>
<div class="MsoNormal">
Doing so, we are requesting our dear friend Angular to
create a POJO (Plain Old JavaScript Object) named <i>data</i> with a property
named <i>message </i>behind the curtains.<o:p></o:p><br />
<br /></div>
<div class="MsoNormal">
Last of all we will have to bind the <i><h1></h1>
</i>to the model we’ve just created. To do so write the following into the <i>h1
</i>tag<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;"><</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">></span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">{{</span></b><span style="background: white; color: purple; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">data.message</span><b><span style="background: white; font-family: Consolas; font-size: 9.5pt; line-height: 115%;">}}</span></b><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;"></</span><span style="background: white; color: maroon; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">h1</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;">></span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD;"><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-bidi-language: BN-BD; mso-highlight: white;"><br /></span></div>
<div class="MsoNormal">
With this syntax we are telling Angular to attach the <i>message</i>
property of our <i>data </i>object to the <i><h1></h1></i>. Since
we are having a two way binding here, so when we type something in the text box, it sets the <i>message </i>property to our typed string and at the same time it
gets the <i>message </i>property value and shows it in the <i>h1</i> tag. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
And we are finished. Browse your HTML file with your
favorite browser. Type something in the text box and see what happens.
Awesome!!! Right??? I’m pasting my output here. Mine is something like this,<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXBwOhkyGuUEQIGw0-w0Yn_vIvmVy8GPRMjyZBoGROy90fI-OogSQMJvLaoUGJBh8ax_rlPqSiIhh4YVD43qI2qoWf-vb5ys_apT1Y5hu04KjSTYdJhYlCVLkSKSOK4ERQZgDD-m5hQf4/s1600/output.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXBwOhkyGuUEQIGw0-w0Yn_vIvmVy8GPRMjyZBoGROy90fI-OogSQMJvLaoUGJBh8ax_rlPqSiIhh4YVD43qI2qoWf-vb5ys_apT1Y5hu04KjSTYdJhYlCVLkSKSOK4ERQZgDD-m5hQf4/s1600/output.png" height="104" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<!--[if gte vml 1]><v:shape id="Picture_x0020_2"
o:spid="_x0000_i1025" type="#_x0000_t75" style='width:240.75pt;height:78.75pt;
visibility:visible;mso-wrap-style:square'>
<v:imagedata src="file:///C:\Users\Fiyaz\AppData\Local\Temp\msohtmlclip1\01\clip_image003.png"
o:title=""/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--><o:p></o:p></div>
<div class="MsoNormal">
I hope you get it, see you in the next post.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
<br /></div>
</div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0tag:blogger.com,1999:blog-4653907606648805941.post-55155716590269654252014-07-19T12:45:00.002+06:002014-09-04T13:14:32.707+06:003D’s of Angular.js<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="border-top: solid #9E5E9B 1.0pt; border: none; mso-border-top-themecolor: accent6; mso-element: para-border-div; padding: 1.0pt 0in 0in 0in;">
<div class="MsoTitle" style="text-align: right;">
<span class="MsoSubtleEmphasis">Chapter – II<o:p></o:p></span></div>
</div>
<div align="right" class="MsoNormal" style="text-align: right;">
<span style="font-size: 16.0pt; line-height: 115%;">3D’s of Angular.js<o:p></o:p></span></div>
<h1>
Data Binding<o:p></o:p></h1>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;">One of the
core feature you will want in every presentation or client side development
framework is data binding. Unlike any other frameworks angular provides two way
data binding. In angular all you will have to do is to connect the view to a
model. And you are done! Later in your application if the model changes the
view get changed and if the view changes the model get changed. This feature
was so much needed because before that developers have to write additional
codes to update the views and models separately. Now there is less code and
less code is always good!<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<h1>
Directives<o:p></o:p></h1>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;">Directives
are like your custom HTML. Angular has many built in directives that makes your
HTML declarative. Some of them are ng-view, ng-model, ng-controller etc. You
can build your own directives and to make a custom HTML element, attribute or
class. By default all directives that you create are attributes if you don’t
define its mode. We will take a deeper dive into directives later.<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<h1>
Dependency Injection<o:p></o:p></h1>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;">Dependency
injection is how your angular modules talk to different services throughout the
applications <i>[We will talk about modules and services later]</i>. As I
already said you can use other library like jquery with angular. To do that you
will have to inject the library dependency where you will be needed it.
Angular’s own services are separated into different files. To use these different
services throughout different modules, you will have to inject the
dependencies. For example if you want to use angular’s animation service you
will have to inject the ngAnimate into your application module. <o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
<br /></div>
</div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0tag:blogger.com,1999:blog-4653907606648805941.post-79473368733452156662014-07-16T01:40:00.001+06:002014-09-04T13:14:32.711+06:00What and Why’s of Angular.js<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="border-top: solid #9E5E9B 1.0pt; border: none; mso-border-top-themecolor: accent6; mso-element: para-border-div; padding: 1.0pt 0in 0in 0in;">
<div class="MsoTitle" style="text-align: right;">
<span class="MsoSubtleEmphasis">Chapter – I<o:p></o:p></span></div>
</div>
<div align="right" class="MsoNormal" style="text-align: right;">
<span style="font-size: 16.0pt; line-height: 115%;">What and Why’s of Angular.js<o:p></o:p></span></div>
<h1>
What is Angular.js<o:p></o:p></h1>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;">Today I’m
going to talk about a very popular client side web application framework called
Angular.js. With the initial release in 2009 this super heroic JavaScript
framework is still getting developed by the Google community and offering some mind-blowing
features which developers wanted for so long. Built with only JavaScript this
framework offers us to implement MV* (Model-View-Whatever) in our web
application development to overcome development and testability overheads. <o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<h1>
Why Angular.js<o:p></o:p></h1>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;">To take total
advantage of a framework, first we must know why the framework was even created
in the first place. Since the client side development is getting cheaper and
users are getting demanding day by day, giving the user a great experience is a
matter of concern for the developers. Design and usability both play a great
role nowadays. Delivering a rich client side environment only with raw JavaScript
is painful and frustrating unless we use correct tools and techniques. And then
Angular.js comes to rescue us. Staring from organizing your code, Angular can
teach your HTML to behave dynamic and be friend with other framework such as
Jquery. This ultimately makes your development process easy and fun. <o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<br /></div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0tag:blogger.com,1999:blog-4653907606648805941.post-88898432377844229252014-01-05T02:13:00.002+06:002014-09-04T13:40:46.598+06:00A security capsule can save your program’s life (Part.3)<div dir="ltr" style="text-align: left;" trbidi="on">
So, let me show how easy it is to implement encapsulation in C#. I will start from the very old fashion to create a encapsulated field then will show the easiest way. Basically to encapsulate a field level variable we would simply declare a setter and a getter method. With the help of the setter method we would set a value for our field level variable and with the getter method we would extract the value from our field level variable set by the setter method. So open the project we have been working on so far and do the followings<br />
<div>
<ul style="text-align: left;">
<li>Open the User class.</li>
<li style="text-align: justify;">We have four field level variables. i.e. </li>
</ul>
<div>
public string Name;</div>
<div>
public string Email;</div>
<div>
public string Mobile;</div>
<div>
public bool HideMobileNo = true;</div>
</div>
<div>
<ul style="text-align: left;">
<li>Lets make a setter and getter method for the Name variable first.</li>
<li>The setter and getter methods look like this</li>
</ul>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 0.5in;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"> public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">void</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> SetName(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">string</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> name)</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">.Name = name;</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> }</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">string</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> GetName()</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">return</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">.Name;</span></div>
<div class="MsoNormal">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt; line-height: 107%;"> }</span><o:p></o:p></div>
<ul style="text-align: left;">
<li>And also same for the rest like this</li>
</ul>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 0.5in;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"> public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">void</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> SetEmail(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">string</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> email)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">.Email = email;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">string</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> GetEmail()<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">return</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">.Email;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">void</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> SetMobile(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">string</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> mobile)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">.Mobile = mobile;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">string</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> GetMobile()<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">return</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">.Mobile;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">void</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> SetHideMobileNo(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">bool</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> hideMobileNo)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">.HideMobileNo = hideMobileNo;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">bool</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> GetHideMobileNo()<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">return</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">this</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">.HideMobileNo;<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt; line-height: 107%;"> }</span><o:p></o:p></div>
<div class="MsoNormal">
<br />
So what we have done here is simply removed any kind of hard coded value in the field level variable and declare a setter and a getter method for each and every fields. By doing that we have omitted the possibility of any kind of mistakes. By mistakes I mean, forget to set a value for a field level variable or getting a wrong value from the field level variable. So this is the very old fashioned way to encapsulate fields.<br />
<br />
In C# we can easily encapsulate a field with the help of Property. Means that we can declare our variables like Property in C#. We have been working with these property from the start of our project. For example, We set the Name property for one of our textBox to nameTextBox. Each property has a get and set method internally. So we don't have to go through the headache of declaring two methods for each fields. Rather we can do as followings.<br />
<br />
<span style="background-color: white; color: blue; font-family: Consolas; font-size: 9.5pt;">private</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; color: blue; font-family: Consolas; font-size: 9.5pt;">string</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> _name;</span><br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">string</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> _email;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">string</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> _mobile;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">bool</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> _hideMobileNo;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">string</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> Name<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">get</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> { </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">return</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">
_name; }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">set</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> { _name = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">value</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">string</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> Email<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">get</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> { </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">return</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">
_email; }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">set</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> { _email = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">value</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">string</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> Mobile<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">get</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> { </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">return</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">
_mobile; }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">set</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> { _mobile = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">value</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">bool</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> HideMobileNo<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">get</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> { </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">return</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">
_hideMobileNo; }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">set</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> { _hideMobileNo = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">value</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 0.5in;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> }</span><br />
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"><br /></span>
<br />
<div style="text-indent: 0px;">
See that each property has a <span style="background-color: white; color: blue; font-family: Consolas; font-size: 9.5pt;">get</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span>and <span style="background-color: white; color: blue; font-family: Consolas; font-size: 9.5pt;">set </span>method internally. The <span style="background-color: white; color: blue; font-family: Consolas; font-size: 9.5pt;">set </span>sets the value passed to property to the field variable contained in keyword <span style="background-color: white; color: blue; font-family: Consolas; font-size: 13px;">value</span>. And the <span style="background-color: white; color: blue; font-family: Consolas; font-size: 9.5pt;">get </span>returns the value that has been just set. This kind of property is called read and write property. We can also declare logic inside <span style="background-color: white; color: blue; font-family: Consolas; font-size: 9.5pt;">set</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span>and <span style="background-color: white; color: blue; font-family: Consolas; font-size: 9.5pt;">get</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">. </span>For example we can remove white spaces from the Name property when user enters his/her name like this</div>
<div style="text-indent: 0px;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;"> public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">string</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> Name<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">get</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> { </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">return</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">
_name; }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">set</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> _name = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">value</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> _name = _name.Trim();<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<o:p></o:p></div>
<div style="text-indent: 0px;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt; text-indent: 0.5in;"> </span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt; text-indent: 0.5in;">}</span> </div>
<div style="text-indent: 0px;">
<br /></div>
<div style="text-indent: 0px;">
Here Trim() is a function which removes additional white spaces from string.</div>
<div style="text-indent: 0px;">
<br /></div>
<div style="text-indent: 0px;">
So read and write property is useful when there is a possibility of implementing a logic associated with a field. But most of the time additional business logic are implemented in separated class to follow the separation of concern pattern. So we can declare auto property like this</div>
<div style="text-indent: 0px;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">string</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> Name { </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">get</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">set</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">string</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> Email { </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">get</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">set</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">string</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> Mobile { </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">get</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">set</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div style="text-indent: 0px;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">bool</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> HideMobileNo { </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">get</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-bidi-language: BN-BD; mso-highlight: white;">set</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">; }</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br />
<div style="text-indent: 0px;">
So, Lets go back to our project and implement the User class like this<br />
<br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 48px;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;"> public</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">class</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #2b91af; font-family: Consolas; font-size: 9.5pt;">User</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 48px;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 48px;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">public</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">string</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> Name { </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">get</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">; </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">set</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 48px;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">public</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">string</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> Email { </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">get</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">; </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">set</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 48px;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">public</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">string</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> Mobile { </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">get</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">; </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">set</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 48px;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">public</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">bool</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> HideMobileNo { </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">get</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">; </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">set</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 48px;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 48px;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">public</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">string</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> GetMobileNo()<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 48px;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 48px;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">if</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> (HideMobileNo == </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">true</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 48px;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 48px;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">return</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #a31515; font-family: Consolas; font-size: 9.5pt;">"N/A"</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 48px;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 48px;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">else</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 48px;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 48px;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">return</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> Mobile;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 48px;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 48px;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div>
</div>
<br />
<div>
</div>
<br />
<div class="MsoNormal" style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: left; text-indent: 48px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
<div style="margin: 0px;">
<br /></div>
</div>
</div>
<div style="text-indent: 0px;">
Now go to the Form1.class and rewrite the code as followings<br />
<br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;"> public</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">partial</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">class</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #2b91af; font-family: Consolas; font-size: 9.5pt;">Form1</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> : </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #2b91af; font-family: Consolas; font-size: 9.5pt;">Form</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">private</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #2b91af; font-family: Consolas; font-size: 9.5pt;">User</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> user;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">private</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #2b91af; font-family: Consolas; font-size: 9.5pt;">ListViewItem</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> item;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">public</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> Form1()<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> InitializeComponent();<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> user = </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">new</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #2b91af; font-family: Consolas; font-size: 9.5pt;">User</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">();<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> user.Name = </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #a31515; font-family: Consolas; font-size: 9.5pt;">"Fiyaz"</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> user.Email = </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #a31515; font-family: Consolas; font-size: 9.5pt;">"fiyazhasan@yahoo.com"</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> user.Mobile = </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #a31515; font-family: Consolas; font-size: 9.5pt;">"0171-XXXXXXX"</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> user.HideMobileNo = setPrivateCheckBox.Checked;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: green; font-family: Consolas; font-size: 9.5pt;">//Tweak the listview design</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> userListView.View = </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #2b91af; font-family: Consolas; font-size: 9.5pt;">View</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">.Details;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> userListView.LabelEdit = </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">true</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> userListView.AllowColumnReorder = </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">true</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> userListView.FullRowSelect = </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">true</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> userListView.GridLines = </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">true</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> userListView.Sorting = </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #2b91af; font-family: Consolas; font-size: 9.5pt;">SortOrder</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">.Ascending;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: green; font-family: Consolas; font-size: 9.5pt;">//Creating a listview item</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> item = </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">new</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #2b91af; font-family: Consolas; font-size: 9.5pt;">ListViewItem</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">(user.Name);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> item.SubItems.Add(user.Email);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> item.SubItems.Add(user.GetMobileNo());<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: green; font-family: Consolas; font-size: 9.5pt;">//Adding the listview columns</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> userListView.Columns.Add(</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #a31515; font-family: Consolas; font-size: 9.5pt;">"Name"</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">, -2, </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #2b91af; font-family: Consolas; font-size: 9.5pt;">HorizontalAlignment</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">.Left);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> userListView.Columns.Add(</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #a31515; font-family: Consolas; font-size: 9.5pt;">"Email"</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">, -2, </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #2b91af; font-family: Consolas; font-size: 9.5pt;">HorizontalAlignment</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">.Left);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> userListView.Columns.Add(</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #a31515; font-family: Consolas; font-size: 9.5pt;">"Phone"</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">, -2, </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #2b91af; font-family: Consolas; font-size: 9.5pt;">HorizontalAlignment</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">.Left);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: green; font-family: Consolas; font-size: 9.5pt;">//Add the items to the ListView.</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> userListView.Items.AddRange(</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">new</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #2b91af; font-family: Consolas; font-size: 9.5pt;">ListViewItem</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">[] { item });<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">private</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">void</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> ClearTextBoxes()<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> nameTextBox.Text = </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #a31515; font-family: Consolas; font-size: 9.5pt;">""</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> emailTextBox.Text = </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #a31515; font-family: Consolas; font-size: 9.5pt;">""</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> mobileTextBox.Text = </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #a31515; font-family: Consolas; font-size: 9.5pt;">""</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">private</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">void</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> submitButton_Click_1(</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">object</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> sender, </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #2b91af; font-family: Consolas; font-size: 9.5pt;">EventArgs</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> e)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: green; font-family: Consolas; font-size: 9.5pt;">//Create a new user instance with new values</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> user = </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">new</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #2b91af; font-family: Consolas; font-size: 9.5pt;">User</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">();<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> user.Name = nameTextBox.Text;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> user.Email = emailTextBox.Text;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> user.Mobile = mobileTextBox.Text;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> user.HideMobileNo = setPrivateCheckBox.Checked;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: green; font-family: Consolas; font-size: 9.5pt;">//Create a listview item</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> item = </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">new</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #2b91af; font-family: Consolas; font-size: 9.5pt;">ListViewItem</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">(user.Name);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> item.SubItems.Add(user.Email);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> item.SubItems.Add(user.GetMobileNo());<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: green; font-family: Consolas; font-size: 9.5pt;">//Add the newly created item</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> userListView.Items.AddRange(</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">new</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #2b91af; font-family: Consolas; font-size: 9.5pt;">ListViewItem</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;">[] { item });<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: green; font-family: Consolas; font-size: 9.5pt;">//Clear the text from the textbox</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> ClearTextBoxes();<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">private</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">void</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> setPrivateCheckBox_CheckedChanged_1(</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">object</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> sender, </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #2b91af; font-family: Consolas; font-size: 9.5pt;">EventArgs</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> e)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> user.HideMobileNo = setPrivateCheckBox.Checked;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">private</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">void</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> cancelButton_Click(</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: blue; font-family: Consolas; font-size: 9.5pt;">object</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> sender, </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; color: #2b91af; font-family: Consolas; font-size: 9.5pt;">EventArgs</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> e)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> ClearTextBoxes();<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> }</span><br />
<div style="text-indent: 0px;">
<span style="background-color: white; font-family: Consolas; font-size: 9.5pt; text-indent: 48px;"> }</span></div>
</div>
<br />
Now run the program it will behave as it was supposed to.<br />
<br />
<div style="text-align: left;">
So we saw that why encapsulation is an important factor in object oriented programming and also learn how to implement encapsulation in coding. Hope you liked all three parts on OOP encapsulation. Stay geeky. I'll be back soon. :)</div>
</div>
</div>
</div>
</div>
<ul style="text-align: left;">
</ul>
<ul style="text-align: left;">
</ul>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0tag:blogger.com,1999:blog-4653907606648805941.post-21273367240143380932013-10-12T23:34:00.001+06:002014-09-04T13:40:46.590+06:00A security capsule can save your program’s life (Part.2)<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal">
In the previous post we have created an application. But
there was a little bug in our program. Let’s find the bug. How about we run the
program once again? And this time we provide the TextBoxes with some
information and uncheck the Private CheckBox to see the mobile number of the
user and click submit. Oops!!! It is still “N/A” in the ListView’s mobile column
but it was not what we expected, Right!!! Cause we unchecked the Private
CheckBox in the form. So what was the problem? The problem was not with our UI
but with the implementation of our code. Let me show you where we actually made
a mistake. Recall that we explicitly set the Boolean value of HideMobileNo to
true. Now go back to our code behind the Form. Look carefully from the top. See
that in the Form constructor we have instantiated a user object and gave some
values for the fields so that at runtime at least one item is placed in the
ListView control. Now go to our code of the Submit button. See that we are
again instantiating the user object but now we are sending the values for the
object’s field from respective TextBoxes. At last when we go to our CheckBox’s
checked changed event we can see that we are passing the current check state of
our CheckBox to user.SetMobileAsPublic method. If you have got this far then
you know what the problem really is. The problem occurs actually when we create
an instance of user object in the submit button’s code but didn’t set the Boolean
field HideMobileNo to false if someone unchecked the Private CheckBox. What we
really did here is we completely rely on our CheckBox’s check changed event.
But if we look carefully we will see that we are not setting the HideMobileNo field
of our object created in the button code to a true value rather we have
actually done it for the object we have just created in the Form constructor.
So when we submit a new user object in our program we may or may not change the
Private CheckBox state in the UI but we accidently change the HideMobileNo field
value of previously created object. So we never get a mobile number when we
unchecked the Private CheckBox rather we always get a “N/A” in the ListView’s
Phone column.<o:p></o:p><br />
<br /></div>
<div class="MsoNormal">
Here we didn’t intended to face such a bug but at the end of
the day we did have one in our program. That’s because programs always don’t run
in the way that we want it to be. And we introduce bugs in program in the
process of doing so without taking cautions. <o:p></o:p><br />
<br /></div>
<div class="MsoNormal">
To overcome such problems object oriented programming (OOP)
introduces a concept called Encapsulation. As with the name goes, we simply
encapsulate our field variables with the help of some methods. The methods are actually
a way of setting/getting values of our field variables. <o:p></o:p></div>
<br />
<div class="MsoNormal">
So, in the next post I will show you how can we implement
encapsulation in our code. Till then stay tuned. <span style="font-family: Wingdings; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-char-type: symbol; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-symbol-font-family: Wingdings;">J</span><o:p></o:p></div>
</div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0tag:blogger.com,1999:blog-4653907606648805941.post-40567754418900553612013-10-12T03:51:00.001+06:002014-09-04T13:40:46.596+06:00A security capsule can save your program’s life (Part.1)<div dir="ltr" style="text-align: left;" trbidi="on">
We are now familiar with the definition of encapsulation but
we yet don’t know how to implement it in our code to prevent any kind of <span style="color: red;">Misuse </span>and <span style="color: red;">Bugs</span><b><span style="color: red;"> </span></b>in our code.
Let me give an example. I think everyone knows what Facebook is. In Facebook,
when we create an account we provide different kind of information, so that
another Facebook user can know a little bit about us before connecting with us.
When a user successfully creates an account, Facebook community hides your
phone number (one of additional information given at account creation) by
default. This is for your security purpose only. If we go to the account contact
section, we can easily set it back to public so that the phone number is
visible when someone searches us. So why
don’t we build a new program with this scenario in our mind. Let’s start.<br />
<div class="MsoNormal" style="text-align: left;">
</div>
<ul style="text-align: left;">
<li>Open Visual Studio. (I’m using visual studio 2012. But other
versions will be fine enough).</li>
<li>Open File -> New -> Project.</li>
<li>Select Windows from installed templates and select Windows
Form Application.</li>
<li>Give a name to your project and press Ok.</li>
<li>IDE will create a form for you.</li>
<li>From the toolbox on the left drag and drop controls to
create the UI given below.</li>
</ul>
<o:p></o:p><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIVxT_viMRTIqaxFM2oQjisA9L0lAq5CTsi54IF3AXEEJm5QH3VaHf0wq5Qx7lI7jSKfAYKGeTp4x51osBShu1nzEmyzrfLkBDs8nwEnGF4opStkBIQRJDrAwuFr40uoxaeuMIm96iwyE/s1600/Untitled.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIVxT_viMRTIqaxFM2oQjisA9L0lAq5CTsi54IF3AXEEJm5QH3VaHf0wq5Qx7lI7jSKfAYKGeTp4x51osBShu1nzEmyzrfLkBDs8nwEnGF4opStkBIQRJDrAwuFr40uoxaeuMIm96iwyE/s1600/Untitled.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Fig: The main UI</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="MsoNormal">
So, we have created a registration form where a user can
give his name, email and phone number and click Submit button to enter his/her info
in the ListView Control. We want our new user’s phone number to be private by
default. So we create a CheckBox control with its checked property set to true. <o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Now,<o:p></o:p></div>
<div class="MsoNormal" style="text-align: left;">
</div>
<ul style="text-align: left;">
<li>Select Project from menu bar and select add class or press (alt+shift+c
).</li>
<li>Add a new class named User.</li>
<li>Write the following code in the class.</li>
</ul>
<div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 0.25in;">
<div style="text-align: left;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">class</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">User</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div style="text-align: left;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="margin: 0in 0in 0.0001pt 0.5in;">
<div style="text-align: left;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">string</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> Name;<o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div style="text-align: left;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">string</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> Email;<o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div style="text-align: left;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">string</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> Mobile;<o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div style="text-align: left;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">bool</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> HideMobileNo = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">true</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div style="text-align: left;">
<br /></div>
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div style="text-align: left;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">void</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> SetMobileNoAsPublic(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">bool</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> isPublic)<o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div style="text-align: left;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div style="text-align: left;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> HideMobileNo = isPublic;<o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div style="text-align: left;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div style="text-align: left;">
<br /></div>
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div style="text-align: left;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">string</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> GetMobileNo()<o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div style="text-align: left;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div style="text-align: left;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">if</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> (HideMobileNo == true)<o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div style="text-align: left;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div style="text-align: left;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">return</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"N/A"</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div style="text-align: left;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div style="text-align: left;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">else</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div style="text-align: left;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div style="text-align: left;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">return</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> Mobile;<o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<div style="text-align: left;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
</div>
<o:p></o:p>
<br />
<div class="MsoNormal">
<div style="text-align: left;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> }</span><br />
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> }</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><o:p></o:p></span></div>
<div style="text-align: left;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><br /></span></div>
<div class="MsoNormal">
What we are really doing here is creating four public field
variable (i.e. Name, Email, Mobile and HideMobileNo). HideMobileNo is a Boolean
variable which initial value is true. Cause we want our phone number to be
private by default. Right!<o:p></o:p></div>
<div class="MsoNormal">
Again we have two public methods. The SetMobileNoAsPublic
method sets the HideMobileNo variable’s value to the method’s parameter value
isPublic. And the GetMobileNo method simply checks the HideMobileNo variable
value and returns N/A (not available) if HideMobileNo value is true or returns the
phone number stored in the Mobile variable. <o:p></o:p></div>
<br />
<div class="MsoNormal">
Now let’s go to our main Form and write the following codes<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">partial</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">class</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">Form1</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> : </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">Form</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">private</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">User</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> user;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">private</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">ListViewItem</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> item;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">public</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> Form1()<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> InitializeComponent();<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> user = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">new</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">User</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">();<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> user.Name = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"Fiyaz"</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> user.Email = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"fiyazhasan@yahoo.com"</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> user.Mobile = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"0171-XXXXXXX"</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">//Tweak
the listview design</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> userListView.View = </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">View</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">.Details;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> userListView.LabelEdit = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">true</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> userListView.AllowColumnReorder = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">true</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> userListView.FullRowSelect = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">true</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> userListView.GridLines = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">true</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> userListView.Sorting = </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">SortOrder</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">.Ascending;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">//Creating
a listview item</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> item = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">new</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">ListViewItem</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">(user.Name);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> item.SubItems.Add(user.Email);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">
item.SubItems.Add(user.GetMobileNo());<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">//Adding
the listview columns</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> userListView.Columns.Add(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"Name"</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">, -2, </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">HorizontalAlignment</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">.Left);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> userListView.Columns.Add(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"Email"</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">, -2, </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">HorizontalAlignment</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">.Left);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> userListView.Columns.Add(</span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"Phone"</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">, -2, </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">HorizontalAlignment</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">.Left);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">//Add
the items to the ListView.</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> userListView.Items.AddRange(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">new</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">ListViewItem</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">[] {
item });<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">private</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">void</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> ClearTextBoxes()<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> nameTextBox.Text = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">""</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> emailTextBox.Text = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">""</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> mobileTextBox.Text = </span><span style="background: white; color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">""</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">private</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">void</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> submitButton_Click(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">object</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> sender, </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">EventArgs</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> e)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">//Create
a new user instance with new values</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> user = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">new</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">User</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">();<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> user.Name = nameTextBox.Text;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> user.Email = emailTextBox.Text;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> user.Mobile = mobileTextBox.Text;<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">//Create
a listview item</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> item = </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">new</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">ListViewItem</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">(user.Name);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> item.SubItems.Add(user.Email);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">
item.SubItems.Add(user.GetMobileNo());<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">//Add
the newly created item</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> userListView.Items.AddRange(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">new</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">ListViewItem</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">[] {
item });<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">//Clear
the text from the textbox</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> ClearTextBoxes();<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">private</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">void</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> setPrivateCheckBox_CheckedChanged(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">object</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> sender, </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">EventArgs</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> e)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> { <o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;">
user.SetMobileNoAsPublic(setPrivateCheckBox.Checked);<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">private</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">void</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> cancelButton_Click(</span><span style="background: white; color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">object</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> sender, </span><span style="background: white; color: #2b91af; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">EventArgs</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> e)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> ClearTextBoxes(); <o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> }</span></div>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> } </span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><br /></span></div>
<div class="MsoNormal">
At the top we are creating two objects. One is of our User
class and the second one is a ListViewItem object of ListViewItem class (built-in
class in .net framework). In the constructor of Form1 class, what we are doing
is<o:p></o:p></div>
<div class="MsoNormal" style="text-align: left;">
</div>
<ul style="text-align: left;">
<li>Instantiating our user object.</li>
<li>Now we are setting default values for our newly instantiated
user objects.</li>
<li>Next we are tweaking some deign for our ListView controls.
Nothings special.</li>
<li>Next as like before we are instantiating item object.</li>
<li>Then we are adding user.Email as first sub item.</li>
<li>Again we are setting the next sub item to the returned value
of <span style="background-color: white;">user.GetMobileNo(</span>).</li>
<li>Recall that we already set a true value for our HideMobileNo
variable.</li>
<li>So the return value will be of course “N/A”.</li>
<li>Then we set three column Titles for our Listview control</li>
<li>Then add our ListViewItem item to our ListView control with
defined designs.</li>
<li>When we debug the program. We get the following result.</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizXZ1eEr56jkMYwXnSGo4B1rH7d0V-GqjIe0i9u92R8xpvyRXc_dDTC7AhZjrXvhcyilpEuGsr0GOCQSwU1EEst3Jdv1m7QAvn8BFyQS2PZCAXLoBDhq5WF6eBU1de9svY50vGIUGBe30/s1600/Untitled1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizXZ1eEr56jkMYwXnSGo4B1rH7d0V-GqjIe0i9u92R8xpvyRXc_dDTC7AhZjrXvhcyilpEuGsr0GOCQSwU1EEst3Jdv1m7QAvn8BFyQS2PZCAXLoBDhq5WF6eBU1de9svY50vGIUGBe30/s1600/Untitled1.png" width="249" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Fig: The first run</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="MsoNormal">
So we ended up with a ListView control with a default value
at runtime. <o:p></o:p></div>
<div class="separator" style="clear: both;">
</div>
<div class="MsoNormal">
Next we are doing the same thing as we have done before in
the constructor. But instead we took values from relevant TextBoxes for our
appropriate user object fields. Now if we press debug we will be able to type
values in the TextBoxes and add the new item in the ListView by click on submit
button. Like this<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Bx2B5w_7NUCxdhewslxF0zXlE6eCgNzFNEOYWfuKCVMEXH2Y7CCn9U5FIOa1NZBaqXKBSuMvTNxBQCN3NIPzM8wVNT9jum7s9VR7bxDWUTiCZ3dsqMKDZeVN6M3-2his2zPZ8Sky8IY/s1600/Untitled2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Bx2B5w_7NUCxdhewslxF0zXlE6eCgNzFNEOYWfuKCVMEXH2Y7CCn9U5FIOa1NZBaqXKBSuMvTNxBQCN3NIPzM8wVNT9jum7s9VR7bxDWUTiCZ3dsqMKDZeVN6M3-2his2zPZ8Sky8IY/s1600/Untitled2.png" width="252" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="MsoNormal" style="text-align: center;">
Fig: Entering values in TextBoxes</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIsjSMiTnFtgUc0jLtA9ERkhbsKV-LiEhnhJtQPZ2v_Fc2kXU6Ln-felYKZM3bMnYpEoOevlAwPSsr8-TBm3AhtRRDGbV36Le1PU49G7WmwmUt2gT9SqzRtdU8ln4Y5oLEHVSZcyowUKQ/s1600/Untitled3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIsjSMiTnFtgUc0jLtA9ERkhbsKV-LiEhnhJtQPZ2v_Fc2kXU6Ln-felYKZM3bMnYpEoOevlAwPSsr8-TBm3AhtRRDGbV36Le1PU49G7WmwmUt2gT9SqzRtdU8ln4Y5oLEHVSZcyowUKQ/s1600/Untitled3.png" width="250" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Fig: Newly added item in ListView</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
The last thing we have
done is in our <span style="background-color: white; background-position: initial initial; background-repeat: initial initial;">setPrivateCheckBox_CheckedChanged</span> event we call our <span style="background: white; mso-highlight: white;">user.SetMobileNoAsPublic method
with the user selected state of</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"> </span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial;">our CheckBox as parameter (i.e. user.SetMobileNoAsPublic(setPrivateCheckBox.Checked);).<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white; background-position: initial initial; background-repeat: initial initial;">So we have a great working
application, Right!!! I’ll prove you wrong but in the next post. So stay tuned.
</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Wingdings;">J</span><span style="background-color: white; background-position: initial initial; background-repeat: initial initial; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div>
<br /></div>
<br />
<o:p></o:p><br />
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
<o:p></o:p></div>
</div>
<div class="MsoNormal">
<o:p></o:p></div>
</div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0tag:blogger.com,1999:blog-4653907606648805941.post-27231551059939890712013-10-09T20:21:00.002+06:002014-09-04T13:40:46.594+06:00Let’s eat some PIE…!!!<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal">
So we have reached to a point where you guys need to know
the three principles of object oriented programming. These are Encapsulation,
Polymorphism and Inheritance and also called (PIE). In this post I’m going to
give some little description about these three principles. I’ll provide more
details about them with coding examples in later posts.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="color: red;">Encapsulation: </span>Using encapsulation in our code we can keep
safe our code and data from outside interference and misuse. This is the most
important principle of all. We can prevent ourselves from introducing a bug in
our program by encapsulating our code.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="color: red;">Polymorphism: </span>In short polymorphism means many forms of a
single object. For very simple example, recall the fact that Carbon (a chemical
element) has two well-known polymorphs - Diamond and Graphite. Both are Carbon
but the behaviors are different due to the internal structures. C# and other
Object oriented language supports polymorphism by changing the behavior of and
object at run-time.<o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="color: red;">Inheritance:</span> Inheritance is a process by which an object
acquires the properties of another object. For example, Lamborghini and Bugatti
are two car companies. Both are capable of designing and selling racing cars. But
they didn't invent the definition of car. To be more precise, we all know that
a car has 4 wheels, runs on fuel, has a steering wheel etc. We can tell with our
eyes closed by listening to these properties that this thing is a car. So a
racing car designed by Lamborghini and Bugatti to be a car, should inherit the
property of a basic car (i.e. it should have 4 wheels, should run on fuel etc.).<o:p></o:p></div>
</div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0tag:blogger.com,1999:blog-4653907606648805941.post-25310559801774238742012-09-22T19:17:00.002+06:002014-09-04T13:16:44.438+06:00What is this (The meaning of (this) keyword) ?<div dir="ltr" style="text-align: left;" trbidi="on">
As you have seen in the (In C# everything is object) post how the button object is created. You may have noticed that in the InitializeComponent() method to set a property of a button object it uses the this.button syntax. So what is the meaning of this this syntax? I know many of you guys don't know about it but always use it inside a method with objects or fields etc. Let me give an example. Maybe this will clear the concept.<br />
<br />
1. Open the IDE.<br />
2. Create a project.<br />
3. Create a Class named Add.<br />
4. Create two integer fields in this class.<br />
5. I named them firstNumber & secondNumber.<br />
6. Now create a method name AddTwoNumbers(int firstNumber,int secondNumber) which will return a integer type value which is just the addition of the firstNumber and secondNumber. Give the method integer type parameters. The parameter should have the same name as the fields.<br />
7. Now set up a UI. Containing two textBox for the first number and second number input, a button that will add the given number after its being pressed , and of couse a last TextBox to show the result of the addition.<br />
8. Double click on the addButton and write the followings:<br />
Add addNumbers=new Add();<br /> int total=0;<br /> total = addNumbers.AddTwoNumbers(Convert.ToInt32(textBox1.Text), Convert.ToInt32(textBox2.Text));<br /> textBox3.Text = total.ToString();<br />
<br />
9. Now go back to the Add Class and write this in the AddTwoNumbers(int firstNumber, int secondNumber)<br />
this.firstNumber = firstNumber;<br /> this.secondNumber = secondNumber;<br /> return this.firstNumber + this.secondNumber; <br />
10. Run the program and give two numbers and press add. tada!!! you just add two numbers<br />
11. The main thing is here that my function parameter and my object fields both have the same names. So how will my compiler distinguish the difference of my object field and my parameters. Thats where the this keyword comes in and solve our problem. The thing is when you omit the this keyword from the beginning of the object fields you just set the value of the parameter to that parameter. Now tell me why the heck will you do that. That doesn't mean anything. So to strictly say that the parameter value will be assigned to the fields, you need to have the this keyword. The this keyword just say that (I want to deal with this object's fields, methods etc only). Otherwise at the debugging you will not see any errors. But due to the fact that the compiler doesn't distinguish between them it will just provide you with a wrong output. The this keyword has a very large effect when you compare two objects. So maybe I cleared the fact that why you use the this keyword. Later you will find more values of the this keyword. </div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0tag:blogger.com,1999:blog-4653907606648805941.post-78405877714751496502012-09-22T01:10:00.000+06:002014-09-04T13:16:44.446+06:00Interesting Applications (Search and Highlight Text in a RichTextBox) <div dir="ltr" style="text-align: left;" trbidi="on">
I promised you that today I'm gonna bring a interesting application. So here it is, in this application user will write something or paste something in the richTextBox control. Then he will provide a search keyword in the search textBox and will press the search button. The application will highlight the occurrence text in richTextBox and also show the number of occurrence in another textBox. So lets build the UI.<br />
My UI looks like this:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSqNSVrj-DSxFciE01Uo6_MC84AwsPfppd5yamwdAe6O7JsZW-SMge4Gydx7k0LPpliDeU6wibmPq3f4lZN7X5av7djYnxZ_XXz66o0GLvxH-L4tzLWGaCr-GaylTlm_a67Fq-ZgwY4l0/s1600/pic1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSqNSVrj-DSxFciE01Uo6_MC84AwsPfppd5yamwdAe6O7JsZW-SMge4Gydx7k0LPpliDeU6wibmPq3f4lZN7X5av7djYnxZ_XXz66o0GLvxH-L4tzLWGaCr-GaylTlm_a67Fq-ZgwY4l0/s1600/pic1.png" /></a></div>
Now lets deal with the business of coding<br />
<br />
1. Double click the searchButton and write down the following code<br />
int total = 0;<br /> string searchKey = searchKeyTextBox.Text;<br /> string article = articleRichTextBox.Text;<br /> int indexPosition = article.ToLower().IndexOf(searchKey.ToLower());<br /> int searchKeyLength = searchKey.Length;<br /><br /> while (indexPosition != -1)<br /> {<br /><br /> articleRichTextBox.Select(indexPosition,searchKeyLength);<br /> articleRichTextBox.SelectionBackColor = Color.LightBlue;<br /> articleRichTextBox.SelectionColor = Color.White;<br /> indexPosition = article.IndexOf(searchKey, indexPosition + searchKeyLength);<br /> total = total + 1;<br /> <br /> }<br /> numberOfOccurrenceTextBox.Text = total.ToString();<br /> searchKeyTextBox.Text = string.Empty;<br />
<br />
2. Now let me describe what is going on here<br />
3. I took a variable name total to trace down the number of search keyword occurrence.<br />
4. I took two string type variables and set the value of one to the text string of the searchKeyTextBox.Text and the second to the articleRichTextBox.Text.<br />
5. I took a integer type variable indexPosition and set the value to<br />
=> article.ToLower().IndexOf(searchKey.ToLower());<br />
6. It just took the value in article string set all the letter in the string to lowercase then it finds out the index (which is of course an integer)of the seacrhKey string (the first occurrence index of the searched word) <br />
7. Here I use the ToLower() method cause if I make all the letter in the article and searchKey to lowercase. I can find the occurrence even if someone use Uppercase when they search.<br />
8. To take the the length of the Searched key I took a variable called searchKeyLength.<br />
9. Then I initiate a while loop.<br />
10. This loop continue until the value of the indexPosition is -1.<br />
11. Why til -1? Cause the IndexOf() method always returns a -1 if it doesn't find any starting index of the given text in the first brackets.(Means the word doesn't exist in the context.<br />
12. Then the code inside the loop articleRichTextBox.Select(indexPosition,searchKeyLength); just select the searched text from its first index to its last index.<br />
13. After That it colorize the Text. Change the color value and see changes.<br />
14. Then it increment the indexPosition to the position after the first occurrence of the searched text.<br />
15. Increment the total.<br />
16. After the loop executes successfully I just paste the value of the total in the occurrenceTextBox.<br />
17. The last line only vanishes the text from the searchKeyTextBox after the searchButton is pressed.<br />
18. There is a problem in the code. What?<br />
19. After debugging if you search a text for the first time it will show the highlighted text in the richTextBox.<br />
20. But when you try with a different word. The first selection will also be there.<br />
21. This problem can be solve by writing three lines at the beginning which will just select all the text set them to default color and then will find the searched text and highlight it.<br />
articleRichTextBox.SelectAll();<br /> articleRichTextBox.SelectionBackColor = Color.White;<br /> articleRichTextBox.SelectionColor = Color.Black;<br />
<br />
Here I provide the full Application. You will find that I named all the objects,variable,functions according to the C# naming convention. Its a good practice for you if you want to be a good programmer.<br />
<a href="https://www.dropbox.com/s/nvplvdn336yj9ny/ArticleWriting.rar" target="_blank">Download Here </a><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0tag:blogger.com,1999:blog-4653907606648805941.post-38473346526003322732012-09-21T21:26:00.001+06:002014-09-04T13:16:44.440+06:00myName My First Object<div dir="ltr" style="text-align: left;" trbidi="on">
We discuss enough about Object and Class, now its time to create our own Class and its Object. To create a class all you have to do is,<br /><br />1. Open the IDE.<br /><br />2. Create a project. Name it whatever you want.<br /><br />3. Under solution Right Click on the project => Add => Class.<br /><br />4. A window will popup. Name the Class Name. Always name the class in Pascal Case. Later I'll post a table on naming conventions. For now Pascal Case in the convention where every First letter of a word is in Upper Case. Like: NameOfMyCompany, MyName etc.<br /><br />5. Press OK. And you will get a Class named Name;<br /><br />6. Suppose our client want a application that will accept a firstName, middleName, lastName in three textBox and will return the full name and the reverse of the full name.<br /><br />7. Finding object field is very important in OOP. You shouldn't have fields that has no values in your program.<br /><br />8. So in our program we should have three fields which are all string field called firstName,middleName, lastName.<br /><br /><br />9. Now we write have to write two method that returns the full name and reversed name respectively.<br /><br />10. So we just blueprinted our problem domain in the Name Class. Why don't we create our UI (User Interface).<br /><br />11. Design a UI like this:<br /><br /><br /><br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4hwIWQYJ30hpVPh1EYmmL5QZViXwmSrqUkHk69VkI-aFM9Wn_sCU6uIfBdyHbNU4cJiy7ssEuElwsPYZkGXg_jg_gUsG1vDpSM3Dl1vMvpP1ogyQL6_Ev-voqZwNswsJtU7aP2a9gE6c/s1600/pic1.png"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4hwIWQYJ30hpVPh1EYmmL5QZViXwmSrqUkHk69VkI-aFM9Wn_sCU6uIfBdyHbNU4cJiy7ssEuElwsPYZkGXg_jg_gUsG1vDpSM3Dl1vMvpP1ogyQL6_Ev-voqZwNswsJtU7aP2a9gE6c/s320/pic1.png" /></a><br /><br />12. Double click on the button.<br /><br />13. Now create an object named myName of our Name class. and initialize it. You will have <br /><br /> Name myName = new Name();<br /><br />14. Now set the value for the class Fields by writing:<br /><br /> myName.firstName = textBox1.Text;<br /><br /> myName.middleName = textBox2.Text;<br /><br /> myName.lastName = textBox3.Text;<br /><br /> textBox4.Text=myName.GetFullName();<br /><br /> textBox5.Text=myName.GetReversedName();<br /><br />15. In the Name Class write this in the GetFullName method<br /><br /> public string GetFullName() <br /><br /> { <br /><br /> return firstName + " " + middleName + " " + lastName; <br /><br /> } <br /><br /><br />16. Now write this in the GetReversedName method<br /><br /> public string GetReverseName() <br /><br /> { <br /><br /> string reverseName = ""; <br /><br /> string fullName = GetFullName(); <br /><br /> for (int index = fullName.Length - 1; index >= 0; index--) <br /><br /> { <br /><br /> reverseName += fullName[index]; <br /><br /> } <br /><br /> return reverseName; <br /><br /> } <br /><br />17. Both methods returns a string. It is the return statement at the bottom of a method.<br /><br />18. Run the program and give three parts of your name in the textBox and Click show.<br /><br />19 Tada!!! You will get your full name and reversed name in the bottom text Box's.<br /><br /> <br /><br />Note 1: I suppose you have some basic language knowledge. The code in the GetReversedName is a code block that just takes the last index letter from the fullName string and place it at the starting index of the reverseName string variable. Then it just completes a for loop that traversed reversely and reverse the value of fullname string. <br />
<br />Note 2: Readers if you want some brief description about variable, array, arraylist, list, queue, stack etc. Please comment. I'll provide important word files on them. Otherwise I'll just go ahead assuming you all know these things. </div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0tag:blogger.com,1999:blog-4653907606648805941.post-3912870025723087142012-09-21T16:48:00.001+06:002014-09-04T13:16:44.442+06:00In C# Everything is an Object<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial,Helvetica,sans-serif;">I assume you read the document and had a basic concept on Object & Class. So how about I told you that everything you drag from the toolbox into the Form creates an object.</span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">For example lets talk about the Button control.</span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">When you drag a button into the Form, you create an instance of the (Button) class. Button class contains some field for the button object and also have some methods. So how you place values in those fields and interact with those method? You already did in the previous examples. When you write (textBox1.Text = "name") you just set a value for the field (public string Text) in the Button class to a string "name". Again when you write (textBox1.Clear();) it just called the method (public void Clear()) and clears everything from the textBox1.</span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">When you create an object you always have to initialize it to work with it in the application. To initialize an object all you have to do is to write:</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"> </span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"> new ClassName();</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: Arial,Helvetica,sans-serif;">For example:</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: Arial,Helvetica,sans-serif;">When you drag a button it just create the object like: Button button1;</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;">But when you start debugging the InitializeComponent(); method initialize the button1 object like this:</span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">this.button1 = new System.Windows.Forms.Button();</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: Arial,Helvetica,sans-serif;">To see this initialization double click on the Form1.Designer.cs and go to the (Windows Form Designer Generated Code) region and expand it. You will find the InitializeComponent(); method under which the command this.button1 = new System.Windows.Forms.Button(); is generated.</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: Arial,Helvetica,sans-serif;">So if you delete the InitializeComponent(); line from the Form1.cs</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;">you would end up with a blank Form. Cause the program will only create a button1 object it will not initialize it. Due to this it will be swapped away from the memory. This is called Object Life Cycle. That is after a object initialization it does the work given to it and when it finished it just die. </span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">So experiment with the controls and drag and drop as much as you can into the form. At each time you will create an object and at debugging you will initialize it by the InitializeComponent(); method.</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: Arial,Helvetica,sans-serif;">NOTE: We use (.) dot after an object to interact with their fields and methods.</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;">Field and Variable are not same. Fields are declared at the top of the Class and if a field is inside of a Method we call it Variable.</span></div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0tag:blogger.com,1999:blog-4653907606648805941.post-23083941186684946992012-09-21T15:50:00.001+06:002014-09-04T13:40:46.592+06:00Object Oriented Programming (OOP)<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial,Helvetica,sans-serif;"><br /><br />Hello friends, Today I'm gonna discuss some basic concepts about the object oriented programming. So first of all we should know about the term "object" in object oriented programming (OOP). What is an object? You don't have to go to the moon to find an object! Turn around and see everything around you is an object. Why? Cause they have some related attributes and some related activities. For example to see how a computer can be an object you should think about two things<br /><br />1.What it has & (attributes)<br /><br />2.What it does (activities)<br /><br /><br />So as we know a computer has a Processor, Motherboard, Hard Drive, Mouse ,Keyboard etc and it displays information, accepts requests and executes these properly, runs antivirus and game programs etc. So computer is an object. <br /><br /><br />For More About Object Oriented Programming. <br /><br /><a href="https://www.dropbox.com/s/xwwzrajyfrx0sjx/4.1.1.%20Introducing%20Object%20Oriented%20Concept.doc">Download this doc file</a> <br /><br />The document describes all basic concept about the object oriented programming. So read it if you want to build a good concept on OOP.</span></div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0tag:blogger.com,1999:blog-4653907606648805941.post-47017918813658147732012-09-20T22:25:00.002+06:002014-09-04T17:40:29.460+06:00Windows Form Controls (Finished)<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial,Helvetica,sans-serif;">Take a look at the attached code. Here I demonstrate a example of the dateTimePicker, radioButton and richTextBox Control.</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><a href="https://www.dropbox.com/s/tfbq972qwinih1j/WindowsFormControls4.rar" target="_blank">Download Here</a></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: Arial,Helvetica,sans-serif;">1. Open the IDE.</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;">2. Add three labels and change the Text Property to Name, Date of Birth and Sex.</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;">3. Add a textBox, a dateTimePicker and two radioButton control horizontally parallel to the labels.</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;">4. Add a button and set Text propery to Submit.</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;">5. Last of all add a richTextBox control at the bottom of the Form.</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;">6. Double click the submit button and add the following codes.</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: Arial,Helvetica,sans-serif;"> string gender;</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"> if(radioButton1.Checked)</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"> {</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"> gender = radioButton1.Text;</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"> }</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"> else</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"> {</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"> gender = radioButton2.Text;</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"> }</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"> richTextBox1.Text = "My Name is " + textBox1.Text + "\nMy Date of Birth is " +</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"> dateTimePicker1.Value.ToLongDateString() +</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"> "\nMy gender is " + gender;</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: Arial,Helvetica,sans-serif;">7. The if else statement checks the states of the radioButton. Then it decide wheather you are a male or female.</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;">8. Then its sets the richTextBox Text property to a string which is a concatenation of the textBox, dateTimePicker control's and gender variable value.</span></div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0tag:blogger.com,1999:blog-4653907606648805941.post-51204473723904822132012-09-20T20:29:00.002+06:002014-09-04T17:40:29.462+06:00Windows Form Controls (Part 3)<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial,Helvetica,sans-serif;">Take a look at the code I provided.</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;">Its an example of CheckBox & Listview.</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><a href="https://www.dropbox.com/s/397v1ikduhlx3td/WindowsFormControls3.rar" target="_blank">Download Here</a></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;">Don't get upset if you don't understand the code. Just see it. I'll describe it tomorrow. </span></div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0tag:blogger.com,1999:blog-4653907606648805941.post-46646921299278673302012-09-20T19:06:00.003+06:002014-09-04T17:40:29.458+06:00Windows Form Controls (Part 2)<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial,Helvetica,sans-serif;">Lets do something more with the previous tutorial. Open up the previous WindowsControlsTutorials solution.</span><br />
<ol style="text-align: left;">
<li><span style="font-family: Arial,Helvetica,sans-serif;">Add a comboBox from the toolbox to the Form.</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Change the Text Property of the button from Show to Add.</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Double click on the button and write this</span></li>
<span style="font-family: Arial,Helvetica,sans-serif;">
comboBox1.Items.Add(textBox1.Text + " " + textBox2.Text + " " + textBox3.Text);
MessageBox.Show("Name Added"); </span>
<li><span style="font-family: Arial,Helvetica,sans-serif;">The first line will add a item in the comboBox1 with the given values in the textBox's. The second line will show a notification through a messageBox that a name has been added successfully in the comboBox.</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Go back to Form1.cs[Design] tab and double click on the comboBox.</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">this will generate the event</span></li>
<span style="font-family: Arial,Helvetica,sans-serif;">
private void comboBox1_SelectedIndexChanged(object sender, EventArgs e) {}
</span>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Write down MessageBox.Show(comboBox1.Text); in the curly braces.</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Start Debugging.</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Give values and press Add.</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">This will enter a item in the comboBox with the given text in the textBox's.</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Add as many names as you like.</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Now select a item from the comboBox.</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">A messageBox will popup and show the Text of the comboBox selected index. </span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">In this tutorial when you cahnge the comboBox selected index the comboBox1_SelectedIndexChanged event fires up and show the index item Text in the messageBox.</span></li>
</ol>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"></span></div>
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRy2aKOfweX7X6AwfwaSggwjJxH_vqD8HMSAGdeVs63tfi_Y_tZ9ET-S4SFMvr4bAUsNF6OPd4AU1f36RbuIrjU96ySgdmI6vZ0-c1VQZ2CVwYMATFy2xDWxU5bmAVaUMqTs-r1Qlt7iU/s1600/ouput+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRy2aKOfweX7X6AwfwaSggwjJxH_vqD8HMSAGdeVs63tfi_Y_tZ9ET-S4SFMvr4bAUsNF6OPd4AU1f36RbuIrjU96ySgdmI6vZ0-c1VQZ2CVwYMATFy2xDWxU5bmAVaUMqTs-r1Qlt7iU/s320/ouput+2.png" width="320" /></a></span></div>
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK4-tOqZqqxmx-Zv2VBi1R6PS8MveE8JNxrTicpquCqcBr3SjnLjTHIauRoA58-RwhqX1LUHD5MqGBpCy_rph6sn8Z_JDgklxgciLKmf01adFjo_6c2LoMFH5Oz3l0YApA3l9hDPnSS9I/s1600/ouput+3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK4-tOqZqqxmx-Zv2VBi1R6PS8MveE8JNxrTicpquCqcBr3SjnLjTHIauRoA58-RwhqX1LUHD5MqGBpCy_rph6sn8Z_JDgklxgciLKmf01adFjo_6c2LoMFH5Oz3l0YApA3l9hDPnSS9I/s320/ouput+3.png" width="320" /></a></span></div>
<div>
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span></div>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0tag:blogger.com,1999:blog-4653907606648805941.post-46487018962712220112012-09-20T18:14:00.000+06:002014-09-04T17:40:29.456+06:00Windows Form Controls (Part 1)<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial,Helvetica,sans-serif;">Since you work on the windows form application, you may have noticed that when an empty form opens up there pops up a tab named toolbox on the left side of the IDE. In this toolbox you can find different types of windows controls to work with in your application. So why don't we discover some of this controls and their properties, attributes and methods. </span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">So here we go....</span><br />
<ol style="text-align: left;">
<li><span style="font-family: Arial,Helvetica,sans-serif;">Start the IDE.</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Create a New Project. Name it WindowsControlsTutorials.</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Right Click on the Form and choose Properties. On the Right Side of the IDE a window will popup showing different properties of the Form. This properties can be changed at any time manually or through the code.</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Try to goofing around with the properties by changing. You will see the changes on the Form.</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">So let me change the Text of the Form1. Scroll to the text region and set the Text to Windows Controls instead of Form1.</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">You will see the Header Text Changed to Windows Controls from Form1.</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Now drag some controls on the Form.</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Drag three labels and release them on the Form. Change the Text property of them to First Name, Middle Name, Last Name.</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Drag three textBox from the toolbox and arrange them with the labels. And add a button at the bottom. Change the Text property to Show. </span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Now double click the show button. It will generate a click event method. There are lots of events available for a controls. Try experimenting with them. They are arranged under the thunderbolt icon of the Properties window. </span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">In the method type</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">MessageBox.Show(textBox1.Text+" "+textBox2.Text+" "+textBox3.Text);</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Click on debug button and give First, Middle and Last name on the textBox and press Show. </span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">A messageBox will popup and will show your full name.Like this.</span></li>
</ol>
<br />
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFcOGLm3GpNDc-XXGtZ-Jy2BkPRqYKoHXy3RQbqiV7sBSv1aulHA3WKkphBcgLXwsspndnChBbo7GIbd2mRP17SCSJWfZ-vw9xCcl68yy30SV8YGVG7arqgulJh6txH3b8WNdr8RO_LOI/s1600/Setups.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFcOGLm3GpNDc-XXGtZ-Jy2BkPRqYKoHXy3RQbqiV7sBSv1aulHA3WKkphBcgLXwsspndnChBbo7GIbd2mRP17SCSJWfZ-vw9xCcl68yy30SV8YGVG7arqgulJh6txH3b8WNdr8RO_LOI/s320/Setups.png" width="320" /></a></span></div>
</div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0tag:blogger.com,1999:blog-4653907606648805941.post-69747298409732239252012-09-20T16:15:00.000+06:002014-09-04T17:40:29.467+06:00Windows Form Application Version of The Hello World Console Application<div dir="ltr" style="text-align: left;" trbidi="on">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]--><span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Normal</w:View>
<w:Zoom>0</w:Zoom>
<w:TrackMoves>false</w:TrackMoves>
<w:TrackFormatting/>
<w:PunctuationKerning/>
<w:ValidateAgainstSchemas/>
<w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
<w:IgnoreMixedContent>false</w:IgnoreMixedContent>
<w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
<w:DoNotPromoteQF/>
<w:LidThemeOther>EN-US</w:LidThemeOther>
<w:LidThemeAsian>X-NONE</w:LidThemeAsian>
<w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript>
<w:Compatibility>
<w:BreakWrappedTables/>
<w:SnapToGridInCell/>
<w:WrapTextWithPunct/>
<w:UseAsianBreakRules/>
<w:DontGrowAutofit/>
<w:SplitPgBreakAndParaMark/>
<w:DontVertAlignCellWithSp/>
<w:DontBreakConstrainedForcedTables/>
<w:DontVertAlignInTxbx/>
<w:Word11KerningPairs/>
<w:CachedColBalance/>
</w:Compatibility>
<w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
<m:mathPr>
<m:mathFont m:val="Cambria Math"/>
<m:brkBin m:val="before"/>
<m:brkBinSub m:val="--"/>
<m:smallFrac m:val="off"/>
<m:dispDef/>
<m:lMargin m:val="0"/>
<m:rMargin m:val="0"/>
<m:defJc m:val="centerGroup"/>
<m:wrapIndent m:val="1440"/>
<m:intLim m:val="subSup"/>
<m:naryLim m:val="undOvr"/>
</m:mathPr></w:WordDocument>
</xml><![endif]--><!--[if gte mso 9]><xml>
<w:LatentStyles DefLockedState="false" DefUnhideWhenUsed="true"
DefSemiHidden="true" DefQFormat="false" DefPriority="99"
LatentStyleCount="267">
<w:LsdException Locked="false" Priority="0" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Normal"/>
<w:LsdException Locked="false" Priority="9" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="heading 1"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 2"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 3"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 4"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 5"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 6"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 7"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 8"/>
<w:LsdException Locked="false" Priority="9" QFormat="true" Name="heading 9"/>
<w:LsdException Locked="false" Priority="39" Name="toc 1"/>
<w:LsdException Locked="false" Priority="39" Name="toc 2"/>
<w:LsdException Locked="false" Priority="39" Name="toc 3"/>
<w:LsdException Locked="false" Priority="39" Name="toc 4"/>
<w:LsdException Locked="false" Priority="39" Name="toc 5"/>
<w:LsdException Locked="false" Priority="39" Name="toc 6"/>
<w:LsdException Locked="false" Priority="39" Name="toc 7"/>
<w:LsdException Locked="false" Priority="39" Name="toc 8"/>
<w:LsdException Locked="false" Priority="39" Name="toc 9"/>
<w:LsdException Locked="false" Priority="35" QFormat="true" Name="caption"/>
<w:LsdException Locked="false" Priority="10" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Title"/>
<w:LsdException Locked="false" Priority="1" Name="Default Paragraph Font"/>
<w:LsdException Locked="false" Priority="11" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtitle"/>
<w:LsdException Locked="false" Priority="22" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Strong"/>
<w:LsdException Locked="false" Priority="20" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Emphasis"/>
<w:LsdException Locked="false" Priority="59" SemiHidden="false"
UnhideWhenUsed="false" Name="Table Grid"/>
<w:LsdException Locked="false" UnhideWhenUsed="false" Name="Placeholder Text"/>
<w:LsdException Locked="false" Priority="1" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="No Spacing"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 1"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 1"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 1"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 1"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 1"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 1"/>
<w:LsdException Locked="false" UnhideWhenUsed="false" Name="Revision"/>
<w:LsdException Locked="false" Priority="34" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="List Paragraph"/>
<w:LsdException Locked="false" Priority="29" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Quote"/>
<w:LsdException Locked="false" Priority="30" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Quote"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 1"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 1"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 1"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 1"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 1"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 1"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 1"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 1"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 2"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 2"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 2"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 2"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 2"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 2"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 2"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 2"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 2"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 2"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 2"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 2"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 2"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 2"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 3"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 3"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 3"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 3"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 3"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 3"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 3"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 3"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 3"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 3"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 3"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 3"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 3"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 3"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 4"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 4"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 4"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 4"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 4"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 4"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 4"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 4"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 4"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 4"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 4"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 4"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 4"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 4"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 5"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 5"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 5"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 5"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 5"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 5"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 5"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 5"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 5"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 5"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 5"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 5"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 5"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 5"/>
<w:LsdException Locked="false" Priority="60" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Shading Accent 6"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false"
UnhideWhenUsed="false" Name="Light List Accent 6"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false"
UnhideWhenUsed="false" Name="Light Grid Accent 6"/>
<w:LsdException Locked="false" Priority="63" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 1 Accent 6"/>
<w:LsdException Locked="false" Priority="64" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Shading 2 Accent 6"/>
<w:LsdException Locked="false" Priority="65" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 1 Accent 6"/>
<w:LsdException Locked="false" Priority="66" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium List 2 Accent 6"/>
<w:LsdException Locked="false" Priority="67" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 1 Accent 6"/>
<w:LsdException Locked="false" Priority="68" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 2 Accent 6"/>
<w:LsdException Locked="false" Priority="69" SemiHidden="false"
UnhideWhenUsed="false" Name="Medium Grid 3 Accent 6"/>
<w:LsdException Locked="false" Priority="70" SemiHidden="false"
UnhideWhenUsed="false" Name="Dark List Accent 6"/>
<w:LsdException Locked="false" Priority="71" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Shading Accent 6"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful List Accent 6"/>
<w:LsdException Locked="false" Priority="73" SemiHidden="false"
UnhideWhenUsed="false" Name="Colorful Grid Accent 6"/>
<w:LsdException Locked="false" Priority="19" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtle Emphasis"/>
<w:LsdException Locked="false" Priority="21" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Emphasis"/>
<w:LsdException Locked="false" Priority="31" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Subtle Reference"/>
<w:LsdException Locked="false" Priority="32" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Intense Reference"/>
<w:LsdException Locked="false" Priority="33" SemiHidden="false"
UnhideWhenUsed="false" QFormat="true" Name="Book Title"/>
<w:LsdException Locked="false" Priority="37" Name="Bibliography"/>
<w:LsdException Locked="false" Priority="39" QFormat="true" Name="TOC Heading"/>
</w:LatentStyles>
</xml><![endif]--><!--[if gte mso 10]>
<style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:"";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin-top:0in;
mso-para-margin-right:0in;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0in;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
</style>
<![endif]-->
<br />
<div class="MsoNormal">
<span style="font-family: Arial,Helvetica,sans-serif;">1. Create a new project of type Windows Forms Application in
the same location as</span></div>
<div class="MsoNormal">
<span style="font-family: Arial,Helvetica,sans-serif;">before with the name HelloWorldWindowsApplcation. </span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilRTjpioUDQno3IOiFMxjZM1uAR5XpnCnbUAthqqhVayYgUXOvx1Nl7Z9wiNRBUGaT_jalSZO2LaVrPSg7Wpdwb51SowMZFstSotVtTzrVUPWbcum_XBuG0mFTwczAwU-gsqkWSeXsSME/s1600/WindowsFormSettings.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilRTjpioUDQno3IOiFMxjZM1uAR5XpnCnbUAthqqhVayYgUXOvx1Nl7Z9wiNRBUGaT_jalSZO2LaVrPSg7Wpdwb51SowMZFstSotVtTzrVUPWbcum_XBuG0mFTwczAwU-gsqkWSeXsSME/s320/WindowsFormSettings.png" width="320" /></a></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"></span></div>
<div class="MsoNormal">
<span style="font-family: Arial,Helvetica,sans-serif;">2. Click OK to create the project. You should see an empty Windows
form. Move the mouse pointer</span></div>
<div class="MsoNormal">
<span style="font-family: Arial,Helvetica,sans-serif;">to the Toolbox bar on the left of the screen, then to the
Button entry of the All Windows Forms</span></div>
<div class="MsoNormal">
<span style="font-family: Arial,Helvetica,sans-serif;">tab, and double-click the entry to add a button to the main
form of the application (Form1).</span></div>
<div class="MsoNormal">
<span style="font-family: Arial,Helvetica,sans-serif;">3. Double-click the button that has been added to the form.</span></div>
<div class="MsoNormal">
<span style="font-family: Arial,Helvetica,sans-serif;">4. The C# code in Form1.cs should now be displayed. Modify
it as follows :</span></div>
<div class="MsoNormal">
<span style="font-family: Arial,Helvetica,sans-serif;">private void button1_Click(object sender, EventArgs e)</span></div>
<div class="MsoNormal">
<span style="font-family: Arial,Helvetica,sans-serif;">{</span></div>
<div class="MsoNormal">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-tab-count: 1;"> </span>MessageBox.Show("Hello
World");</span></div>
<div class="MsoNormal">
<span style="font-family: Arial,Helvetica,sans-serif;">}</span></div>
<div class="MsoNormal">
<span style="font-family: Arial,Helvetica,sans-serif;">5. Run the application.</span></div>
<div class="MsoNormal">
<span style="font-family: Arial,Helvetica,sans-serif;">6. Click the button presented to open a message dialog box,
as shown in Figure</span></div>
<div class="MsoNormal">
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBwvaE-l4GTJCJ9sXD4aCvFWqw3i2k6yjIF7-rAiH9mNkrU7bsTaLJTBWitkkanv-0_F6HGJvjMsnOnbwGIkPkNR7uEB0UMKfSwVdgmV_zRiUKqPaQjXxnl2264hll5jU0B6s0YA71plU/s1600/Output.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBwvaE-l4GTJCJ9sXD4aCvFWqw3i2k6yjIF7-rAiH9mNkrU7bsTaLJTBWitkkanv-0_F6HGJvjMsnOnbwGIkPkNR7uEB0UMKfSwVdgmV_zRiUKqPaQjXxnl2264hll5jU0B6s0YA71plU/s320/Output.png" width="320" /></a></span></div>
<div class="MsoNormal">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="mso-no-proof: yes;"><br /></span></span></div>
<div class="MsoNormal">
<span style="font-family: Arial,Helvetica,sans-serif;">7. Click OK, and then exit the application by clicking the X
in</span></div>
<div class="MsoNormal">
<span style="font-family: Arial,Helvetica,sans-serif;">the top-right corner, as per standard Windows applications.</span></div>
</div>
Anonymoushttp://www.blogger.com/profile/04816620726485999776noreply@blogger.com0