Sunday, 29 March 2015

Tutorial on Angular js


            AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write.And it all happens within the browser, making it an ideal partner with any server technology.


 Angular js follows both Library and framework approaches.

The impedance mismatch between dynamic applications and static documents is often solved with:

library - a collection of functions which are useful when writing web apps. Your code is in charge and it calls into the library when it sees fit.
 E.g., jQuery.

frameworks - a particular implementation of a web application, where your code fills in the details. The framework is in charge and it calls into your code when it needs something app specific.
 E.g., durandal, ember, etc.

Angular takes another approach. It attempts to minimize the impedance mismatch between document centric HTML and what an application needs by creating new HTML constructs. Angular teaches the browser new syntax through a construct we call directives.

Advantages of AngularJS

  • AngularJS provides capability to create Single Page Application in a very clean and maintainable way.
  • AngularJS provides data binding capability to HTML thus giving user a rich and responsive experience
  • AngularJS code is unit testable.
  • AngularJS uses dependency injection and make use of separation of concerns.
  • AngularJS provides reusable components.
  • With AngularJS, developer write less code and get more functionality.
  • In AngularJS, views are pure html pages, and controllers written in javascript do the business processing.
  • On top of everything, AngularJS applications can run on all major browsers and smart phones including Android and iOS based phones/tablets.

Disadvantages of AngulaJS

Though AngularJS comes with lots of plus points but same time we should consider the following points:
Not Secure : Being JavaScript only framework, application written in AngularJS are not safe. Server side authentication and authorization is must to keep an application secure.
Not degradable: If your application user disables Javascript then user will just see the basic page and nothing more.

Three major parts Components in AngularJS framework

  1. ng-app : This directive defines and links an AngularJS application to HTML.
  2. ng-model : This directive binds the values of AngularJS application data to HTML input controls.
  3. ng-bind : This directive binds the AngularJS Application data to HTML tags.
Typically, when you create an application you need to set up the initial state for the Angular $scope. You set up the initial state of a scope by attaching properties to the $scope object. The properties contain the view model (the model that will be presented by the view). All the$scope properties will be available to the template at the point in the DOM where the Controller is registered.

In Angular, a Controller is a JavaScript constructor function that is used to augment the Angular Scope.
When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be available as an injectable parameter to the Controller's constructor function as $scope.
 controllers used to:
  • Set up the initial state of the $scope object.
  • Add behavior to the $scope object.
we need to set up the initial state of a scope by attaching properties to the $scope object. The properties contain the view model (the model that will be presented by the view). All the$scope properties will be available to the template at the point in the DOM where the Controller is registered.

Controllers in angular:


       Implement controllers for each view as


               

routing in Angular js:


we have to inject 'ngroute' inbuilt service to use routing concept in our application by using dependency injection

then we need to mention routing as shown above for particular path
$routeprovider contains information of current path so when keyword is used to  check with current path if it matches our mentioned path then redirect to view which was mentioned as template url .


Tip:1) to know json format is correct or not go through this link http://pro.jsonlint.com/
2)for modal pop up in angular js http://jsfiddle.net/92z54z04/1/
http://stackoverflow.com/questions/27416044/simple-popup-by-using-angular-js


Related Links:

Date Picker in Angular js



Monday, 2 March 2015

Regular Validation Expressions In ASP.Net To Validate Input From User

 For Email:

  validationexpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"

 validationexpression="^[\w-\.]{1,}\@([\da-zA-Z-]{1,}\.){1,}[\da-zA-Z-]{2,6}$" 

For  money(accepting decimal and numerics):

 validationexpression="^[0-9]\d*(\.\d+)?$"

For numerics only:

validationexpression="^[0-9]+$"

For Zip:

-->(accept 1 to 10 digits):


validationexpression="\d{1,10}"

-->(accept three conditions for zip-code.

    12345 
    12345-6789 
    12345 1234 

    validationexpression="^\d{5}(?:[-\s]\d{4})?$"

explanation:

  • ^ = Start of the string.
  • \d{5} = Match 5 digits (for condition 1, 2, 3)
  • (?:…) = Grouping
  • [-\s] = Match a space (for condition 3) or a hyphen (for condition 2)
  • \d{4} = Match 4 digits (for condition 2, 3)
  • …? = The pattern before it is optional (for condition 1)
  • $ = End of the string.

For Date:(MM/YY):

validationexpression="^(0?[1-9]|1[0-2])/\d{2}$"

For Phone Number:

--->Validates a U.S. phone number. It must consist of 3 numeric characters, optionally enclosed in parentheses, followed by a set of 3 numeric characters and then a set of 4 numeric characters.


(425) 555-0123

425-555-0123

425 555 0123

1-425-555-0123

validationexpression="^[01]?[- .]?(\([2-9]\d{2}\)|[2-9]\d{2})[- .]?\d{3}[- .]?\d{4}$"


-->Ex:Indian Phone Number validation
+919000000098
or 
09000000098
or 
9000000098
or 
+91-9000000098
or 
9908716458
validationexpression="^((\\+91-?)|0)?[0-9]{10}$"

For Password:

-->Validates a strong password. It must be between 8 and 10 characters, contain at least one digit and one alphabetic character, and must not contain special characters.

validationexpression="(?!^[0-9]*$)(?!^[a-zA-Z]*$)^([a-zA-Z0-9]{8,10})$"

For URL:

validationexpression="^(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&%\$#_]*)?$"

Asp.Net Vlaidations



The validation controls provided bt ASP.NET are:

  • RequiredFiledValidator
  • CompareValidator
  • RangeValidator
  • RegularExpressionValidator
  • CustomValidator
  • ValidationSummary
  • The BaseValidator Class:

    The validation control classes inherit from the BaseValidator class and inherit its properties and methods. Therefore, it would help to take a look at the properties and the methods of this base class, which are common for all the validation controls:
    MembersDescription
    ControlToValidateIndicates the input control to validate.
    DisplayIndicates how the error message is shown.
    EnableClientScriptIndicates whether client side validation will take.
    EnabledEnables or disables the validator.
    ErrorMessageError string.
    TextError text to be shown if validation fails.
    IsValidIndicates whether the value of the control is valid.
    SetFocusOnErrorIt indicates whether in case of an invalid control, the focus should switch to the related input control.
    ValidationGroupThe logical group of multiple validators, where this control belongs.
    Validate()This method revalidates the control and updates the IsValid property.

    The RequiredFieldValidator:

    The RequiredFieldValidator control ensures that the required field is not empty. It is generally tied to a text box to force input into the text box.
    The syntax for the control:
    <asp:RequiredFieldValidator ID="rfvcandidate" 
            runat="server" ControlToValidate ="ddlcandidate"
            ErrorMessage="Please choose a candidate" 
            InitialValue="Please choose a candidate">
    </asp:RequiredFieldValidator>

    The RangeValidator:

    The RangeValidator control verifies that the input value falls within a predetermined range.
    It has three specific properties:
    PropertiesDescription
    Typeit defines the type of the data; the available values are: Currency, Date, Double, Integer and String
    MinimumValueit specifies the minimum value of the range
    MaximumValueit specifies the maximum value of the range
    The syntax for the control:
    <asp:RangeValidator ID="rvclass" 
           runat="server" 
           ControlToValidate="txtclass" 
           ErrorMessage="Enter your class (6 - 12)" 
           MaximumValue="12" 
           MinimumValue="6" Type="Integer">
    </asp:RangeValidator>

    The CompareValidator:

    The CompareValidator control compares a value in one control with a fixed value, or, a value in another control.
    It has the following specific properties:
    PropertiesDescription
    Typeit specifies the data type
    ControlToCompareit specifies the value of the input control to compare with
    ValueToCompareit specifies the constant value to compare with
    Operatorit specifies the comparison operator, the available values are: Equal, NotEqual, GreaterThan, GreaterThanEqual, LessThan, LessThanEqual and DataTypeCheck
    The basic syntax for the control:
    <asp:CompareValidator ID="CompareValidator1" 
            runat="server" 
            ErrorMessage="CompareValidator">
    </asp:CompareValidator>

    The RegularExpressionValidator

    The RegularExpressionValidator allows validating the input text by matching against a pattern against a regular expression. The regular expression is set in the ValidationExpression property.
    The following table summarizes the commonly used syntax constructs for regular expressions:
    Character EscapesDescription
    \bMatches a backspace
    \tMatches a tab
    \rMatches a carriage return
    \vMatches a vertical tab
    \fMatches a form feed
    \nMatches a new line
    \Escape character
    Apart from single character match, a class of characters could be specified that can be matched, called the metacharacters.
    MetacharactersDescription
    .Matches any character except \n
    [abcd]Matches any character in the set
    [^abcd]Excludes any character in the set
    [2-7a-mA-M]Matches any character specified in the range
    \wMatches any alphanumeric character and underscore
    \WMatches any non-word character
    \sMatches whitespace characters like, space, tab, new line etc.
    \SMatches any non-whitespace character
    \dMatches any decimal character
    \DMatches any non-decimal character
    Quantifiers could be added to specify number of times a character could appear
    QuantifierDescription
    *Zero or more matches
    +One or more matches
    ?Zero or one matches
    {N}N matches
    {N,}N or more matches
    {N,M}Between N and M matches
    The syntax for the control:
    <asp:RegularExpressionValidator ID="string"
            runat="server"
            ErrorMessage="string"
            ValidationExpression="string"
            ValidationGroup="string">
    </asp:RegularExpressionValidator>

    The CustomValidator:

    The CustomValidator control allows writing application specific custom validation routines for both the client side and the server side validation.
    The client side validation is accomplished through the ClientValidationFunction property. The client side validation routine should be written in a scripting language, like JavaScript or VBScript, which the browser can understand.
    The server side validation routine must be called from the control.s ServerValidate event handler. The server side validation routine should be written in any .Net language, like C# or VB.Net.
    The basic syntax for the control
    <asp:CustomValidator ID="CustomValidator1" 
           runat="server" 
           ClientValidationFunction=.cvf_func.
           ErrorMessage="CustomValidator">
    </asp:CustomValidator>

    The ValidationSummary Control

    The ValidationSummary control does not perform any validation but shows a summary of all errors in the page. The summary displays the values of the ErrorMessage property of all validation controls that failed validation.
    The following two mutually inclusive properties list out the error message:
    • ShowSummary: shows the error messages in specified format.
    • ShowMessageBox: shows the error messages in a separate window.
    The syntax for the control:
    <asp:ValidationSummary ID="ValidationSummary1" 
           runat="server" 
           DisplayMode = "BulletList" 
           ShowSummary = "true"
           HeaderText="Errors:" />

    Validation Groups:

    Complex pages have different groups of information provided in different panels. In such a situation a need for performing validation separately for separate group, might arise. This kind of situation is handled using validation groups.
    To create a validation group, you should put the input controls and the validation controls into the same logical group by setting their ValidationGroup property.

    Example:

    The following example describes a form to be filled up by all the students of a school, divided into four houses, for electing the school president. We will be using the validation controls to validate the user input.
    The form in Design view:
    form in Design view
    The content file code:
    <form id="form1" runat="server">
    <table style="width: 66%;">
    <tr>
    <td class="style1" colspan="3" align="center">
    <asp:Label ID="lblmsg" 
               Text="President Election Form : Choose your president" 
               runat="server" />
    </td>
    </tr>
    <tr>
    <td class="style3">
    Candidate:
    </td>
    <td class="style2">
    <asp:DropDownList ID="ddlcandidate" runat="server" style="width:239px">
    <asp:ListItem>Please Choose a Candidate</asp:ListItem>
    <asp:ListItem>M H Kabir</asp:ListItem>
    <asp:ListItem>Steve Taylor</asp:ListItem>
    <asp:ListItem>John Abraham</asp:ListItem>
    <asp:ListItem>Venus Williams</asp:ListItem>
    </asp:DropDownList>
    </td>
    <td>
    <asp:RequiredFieldValidator ID="rfvcandidate" 
           runat="server" ControlToValidate ="ddlcandidate"
           ErrorMessage="Please choose a candidate" 
           InitialValue="Please choose a candidate">
    </asp:RequiredFieldValidator>
    </td>
    </tr>
    <tr>
    <td class="style3">
    House:</td>
    <td class="style2">
    <asp:RadioButtonList ID="rblhouse" 
          runat="server" 
          RepeatLayout="Flow">
    <asp:ListItem>Red</asp:ListItem>
    <asp:ListItem>Blue</asp:ListItem>
    <asp:ListItem>Yellow</asp:ListItem>
    <asp:ListItem>Green</asp:ListItem>
    </asp:RadioButtonList>
    </td>
    <td>
    <asp:RequiredFieldValidator ID="rfvhouse" 
           runat="server" 
           ControlToValidate="rblhouse" 
           ErrorMessage="Enter your house name">
    </asp:RequiredFieldValidator>
    <br />
    </td>
    </tr>
    <tr>
    <td class="style3">
    Class:</td>
    <td class="style2">
    <asp:TextBox ID="txtclass" runat="server"></asp:TextBox>
    </td>
    <td>
    <asp:RangeValidator ID="rvclass" 
           runat="server" ControlToValidate="txtclass" 
           ErrorMessage="Enter your class (6 - 12)" MaximumValue="12" 
           MinimumValue="6" Type="Integer">
    </asp:RangeValidator>
    </td>
    </tr>
    <tr>
    <td class="style3">
    Email:</td>
    <td class="style2">
    <asp:TextBox ID="txtemail" runat="server" style="width:250px">
    </asp:TextBox>
    </td>
    <td>
    <asp:RegularExpressionValidator ID="remail" 
          runat="server" 
          ControlToValidate="txtemail" ErrorMessage="Enter your email" 
    ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </asp:RegularExpressionValidator>
    </td>
    </tr>
    <tr>
    <td class="style3" align="center" colspan="3">
    <asp:Button ID="btnsubmit" runat="server" onclick="btnsubmit_Click" 
    style="text-align: center" Text="Submit" style="width:140px" />
    </td>
    </tr>
    </table>
    <asp:ValidationSummary ID="ValidationSummary1" 
          runat="server" 
          DisplayMode ="BulletList" 
          ShowSummary ="true"
          HeaderText="Errors:" />
    </form>
    The code behind the submit button:
    protected void btnsubmit_Click(object sender, EventArgs e)
    {
       if (Page.IsValid)
       {
          lblmsg.Text = "Thank You";
       }
       else
       {
          lblmsg.Text = "Fill up all the fields";
       }
    }