Month: August 2015

Expression in AngularJs (Part2)

ChandradevLeave a comment

Expression_Example

AngularJs expression is used to bind the data in HTML and It is used to write inside the {{  }}. It is the alternative of ng-bind directive. It will display the output where expression has been written.

Sample Code for integer data

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <script src="../Scripts/angular.min.js"></script>
</head>
<body>



<div ng-app="">



 Addition of 2 Num : {{ 10+20 }} 


    </div>



</body>
</html>

Note: Here we have injected ng-app so it is doing addition. If we will remove then it will not work.

Sample code for Multiplication of 2 Num

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <script src="../Scripts/angular.min.js"></script>
</head>
<body>



<div ng-app="" ng-init="Num1=10; Num2=20">


 Multiplication of 2 Num : {{ Num1 * Num2 }} 

    </div>



</body>
</html>

Note: Here ng-init is used to initialize the data.

For String Concatenation Example


<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <script src="../Scripts/angular.min.js"></script>
</head>
<body>



<div ng-app="" ng-init="FirstName='Chandradev'; LastName='Prasad'">


 String Concatenation : {{ FirstName + " " + LastName }} 

    </div>



</body>
</html>

Note : Here same things can do using ng-bind like this





<div ng-app="" ng-init="FirstName='Chandradev';LastName='Prasad'">


 String Concatenation :  <span ng-bind=" FirstName + ' ' + LastName" ></span>   

</div>

Angular Object Example


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="../Scripts/angular.min.js"></script>
</head>
<body>




<div ng-app="" ng-init= "Emp={FirstName :'Chandradev', LastName:'Prasad'}">


 Emp Name :  {{ Emp.LastName }} 

    </div>




</body>
</html>

Array example in Angular


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="../Scripts/angular.min.js"></script>
</head>
<body>




<div ng-app="" ng-init= "Numbers=[1,4,6,8,10]">


 4th Num:  {{ Numbers[3]}} 

    </div>




</body>
</html>

What is the angularJs (Part1)

ChandradevLeave a comment

Hello World

History
1. Angular VS 1.0 release in 2012.
2. Developed by Miško Hevery, a Google employee.
Introduction
• It is JavaScript framework. It is library written in JavaScript.
• It 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.
• By default it supports MVVM or MVC (Model view Controller) design pattern.

Directives in Angular

The ng-app directive defines an AngularJS application.
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
The ng-bind directive binds application data to the HTML view.

Basic Sample Code for Angular Js

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <script src="../Scripts/angular.min.js"></script>
</head>
<body>


<div ng-app="">


Name: <input type="text" ng-model="name" /> 

         <b> Hello: <span ng-bind="name"></span> </b>
    </div>


</body>
</html>

In above example ng-app directive tells AngularJS that the div element is the “owner” of an AngularJS application.
The ng-model directive binds the value of the input field to the application variable name.
The ng-bind directive binds the innerHTML of the paragraph (“b”) element to the application variable name.

ViewData and Viewbag in MVC

ChandradevLeave a comment

1. Both Viewdata and ViewBag are used to pass data from Controller to view. Viewdata is a dictionary of objects that are stored and retrieved using string as keys.

ViewData[“yourKey”]=”Some Value” ;
ViewBag.yourProperty=”Some data”;

2. ViewBag uses the dynamic feature that was introduced in C# 4. It allows an object to have properties dynamically added to it.

3. Both ViewBag and Viewdata does not provide compile time error checking. You will get error only at runtime error.

Note: To pass data from Controller to view, it is always good practice to use strongly typed view model over ViewBag or Viewdata. Strongly typed view models provide compile type error checking.

Sample code for ViewBag

Step1 : Create Controller like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplication7.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ViewResult Index()
        {
            ViewBag.Country = new List<string>()
            {
                "India",
                "Nepal",
                "US",
                "UK"
            };

            return View();
        }
    }
}

Step 2: Write the code in View like this

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <h2>Country List</h2>
</head>
<body>
    <div> 
        <ul>
            @foreach (var strCountry in ViewBag.Country)
            {
                <li>
                    @strCountry 
                </li>
            }
        </ul>
    </div>
</body>
</html>

Sample Code for Viewdata


Step 1: Write the code in Controller like this 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplication7.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ViewResult Index()
        {
            ViewData["Country"] = new List<string>()
            {
                "India",
                "Nepal",
                "US",
                "UK"
            };

            return View();
        }
    }
}

Step 2: Write the code in View like this


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <h2>Country List</h2>
</head>
<body>
    <div> 
        <ul>
            @foreach (var strCountry in (List<string>) ViewData["Country"])
            {
                <li>
                    @strCountry 
                </li>
            }
        </ul>
    </div>
</body>
</html>

What is the CTE in SQL Server ?

ChandradevLeave a comment

1. CTE is the common table expression. This feature comes in sql server 2005 onward.
2. It is the temporary result set and generally it will be the result set of complex Sub Query.
3. CTE offer the same functionality as View.
4. It is defined with WITH Satement.
5. It improves the readability and ease in maintenance of complex queries and sub query.

CTE Simple Example

WITH CTE1
AS
 (
 SELECT 1 as Col1, 2 as Col2
 )
 
Select * from CTE1

Other Example

WITH CTEExample(EmpName,EmpAddress,DeptName) --Column Name for CTE
AS
(
 Select E.EmpName, E.EmpAddress,D.DeptName from tblEmp E Join tblDept D On  E.DeptId=D.DeptId
)
Select * from CTEExample where CTEExample.DeptName='CS'

When to use CTE ?

1. To simplifying the complex query to simple one like View in sql
2. To maintain more readable code
3. To create recursive query.
4. if you need to reference/join the same data set multiple times you can do so by defining a CTE. Therefore, it can be a form of code re-use.
5. To hold the values as Temp Table.

Point to remember

1. CTE Life will expire after first select statement.
2. In CTE, We can write only one Select query.