public boolean isNetworkAvailable(Context context) {
        ConnectivityManager connectivityManager
                = (ConnectivityManager) context.getSystemService(Context.CONNECTIVITY_SERVICE);
        NetworkInfo activeNetworkInfo = connectivityManager.getActiveNetworkInfo();
        return activeNetworkInfo != null && activeNetworkInfo.isConnected();
    }

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

• مودم وای فای را فعال کرده است، ولی اینترنت را در اختیار ندارد که این علل میتواند عدم ثابت شدن چراغ DSL یا راه اندازی مجدد مودم باشد که وای فای زودتر از DSL فعال می‌شود و یا اینکه اشتراک شما تمام شده است یا در شبکه به مشکل برخورد کرده‌اید.
• شما از طریق mobile data قصد اتصال دارید. در این حالت یا اعتبار شما پایان یافته است یا شبکه آنان دچار اختلال است.
• شما در یک محیط اداری هستید که به عنوان مثال سیستمشان توسط روترهای میکروتیک هدایت می‌شود. در این حالت شما میتوانید وارد شبکه بدون کلمه عبور آنان شوید. ولی نیاز دارید که حتما صفحه لاگین را رد نمایید تا اینترنت در اختیار شما قرار بگیرد.

 public boolean IsInternetConnected()
    {
        try {
            Process ipProcess = Runtime.getRuntime().exec("/system/bin/ping -c 1 4.2.2.4");
            int     exitValue = ipProcess.waitFor();
            return (exitValue == 0);
        } catch (IOException e)          { e.printStackTrace(); }
        catch (InterruptedException e) { e.printStackTrace(); }
        return false;
    }

System.Diagnostics.Process.Start("processName");

 public Process exec(String prog) throws java.io.IOException {
        return exec(prog, null, null);
    }

  public abstract int waitFor() throws InterruptedException;

<uses-permission android:name="android.permission.INTERNET"/>

 HttpURLConnection urlConnection = (HttpURLConnection) url.openConnection();
   try {
     InputStream in = new BufferedInputStream(urlConnection.getInputStream());
     if (!url.getHost().equals(urlConnection.getURL().getHost())) {
       // we were redirected! Kick the user out to the browser to sign on?
     ...
   } finally {
     urlConnection.disconnect();
   }
 }

 npm WARN engine rxjs@5.0.0-beta.6: wanted: {"npm":">=2.0.0"} (current: {"node":"v0.10.31","npm":"1.4.9"})

{    "name": "asp-net-mvc5x-angular2x",    "version": "1.0.0",    "author": "DNT",    "description": "",    "scripts": {},    "license": "Apache-2.0",    "dependencies": {        "jquery": "2.2.3",        "angular2": "2.0.0-beta.15",        "systemjs": "^0.19.26",        "es6-promise": "^3.1.2",        "es6-shim": "^0.35.0",        "reflect-metadata": "0.1.2",        "rxjs": "5.0.0-beta.2",        "zone.js": "^0.6.12",        "bootstrap": "^3.3.6"    },    "devDependencies": {        "typescript": "^1.8.9",        "typings": "^0.8.1"    },    "repository": {    }
}

{    "compileOnSave": true,    "compilerOptions": {        "target": "es5",        "module": "system",        "moduleResolution": "node",        "noImplicitAny": false,        "noEmitOnError": true,        "removeComments": false,        "sourceMap": true,        "emitDecoratorMetadata": true,        "experimentalDecorators": true    },    "exclude": [        "node_modules",        "wwwroot",        "typings/main",        "typings/main.d.ts"    ]
}

public int ReturnErrorCodes(int n1)
{
         if(n1==0)
               return -1;
          if(n1<0)
                 return -2;
            if(n1>_max)
                return -3;
            return n1;
}

public int ReturnErrorCodes(int n1)
{
         if(n1==0)
                throw new ZeroException();
          if(n1<0)
                 throw new MinException();
            if(n1>_max)
                throw new MaxException();
            return n1;
}

در مواقعی نیاز است تا محتوایی را به صورت داینامیک به کدهای موجود در یک appAngular  تزریق کنیم و یا محتوای موجود را تغییر دهیم. اگر این محتوای لود شده دارای دایرکتیوهای Angularباشد بعد از لود محتوا متوجه می‌شویم که کدهای Angularما کار نمی‌کنند. چرا؟  اینجاست که نقش compile$  مشخص می‌شود. از طریق compile$ محتوای لود شده مجددا در محدوده تحت مدیریت Angular قرار گرفته و مشکل حل می‌شود. مثال زیر را بررسی می‌کنیم :

app.directive("otcDynamic", function(){
    return {
        link: function(scope, element){
            element.html("<button ng-click='doSomething()'>{{label}}</button>");
        }
    };
});

در کد فوق ما یک دکمه را که در کلیک آن قرار است متدی توسط Angular فراخوانی شود، به صورت داینامیک ایجاد کرده و به المنت مورد نظرمان اضافه کرده‌ایم. دقت داشته باشید که این محتوا ممکن است مثلا توسط درخواست‌های Ajaxاز جایی فراخوانی شود. با کلیک بر روی دکمه‌ی ایجاد شده، متد doSomething اجرا نخواهد شد؛ چرا که Angular قادر به تشخیص HTML تزریق شده نمی‌باشد و در واقع اصلا از وجود کد ما خبری ندارد. برای حل این مشکل از compile$ استفاده می‌کنیم:

app.directive("otcDynamic", function($compile){
    return{
        link: function(scope, element){
            var template = "<button ng-click='doSomething()'>{{label}}</button>";
            var linkFn = $compile(template);
            var content = linkFn(scope);
            element.append(content);
        }
    }
});

با استفاده از compile$ در واقع ما کدهای خود را مجددا تحت مدیریت Angularقرار می‌دهیم. مثال فوق یک مثال ساده از این مبحث بود. در واقع کدهای تزریق شده می‌توانند شامل کل HTMLتحت مدیریت Angular باشد که مثلا از طریق درخواست‌های Ajaxبه‌روز رسانی می‌شوند.

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>@ViewBag.Title - My ASP.NET Application</title>    <link href="~/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />    <link href="~/app/app.component.css" rel="stylesheet"/>    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />    <!-- 1. Load libraries -->    <!-- IE required polyfills, in this exact order -->    <script src="~/node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>    <script src="~/node_modules/es6-shim/es6-shim.min.js"></script>    <script src="~/node_modules/systemjs/dist/system-polyfills.js"></script>    <script src="~/node_modules/angular2/bundles/angular2-polyfills.js"></script>    <script src="~/node_modules/systemjs/dist/system.src.js"></script>    <script src="~/node_modules/rxjs/bundles/Rx.js"></script>    <script src="~/node_modules/angular2/bundles/angular2.dev.js"></script>    <!-- Required for http -->    <script src="~/node_modules/angular2/bundles/http.dev.js"></script>    <!-- Required for routing -->    <script src="~/node_modules/angular2/bundles/router.dev.js"></script>     <!-- 2. Configure SystemJS -->    <script>        System.config({            packages: {                app: {                    format: 'register',                    defaultExtension: 'js'                }            }        });        System.import('app/main')              .then(null, console.error.bind(console));    </script></head><body>    <div>        @RenderBody()        <pm-app>Loading App...</pm-app>    </div>    @RenderSection("Scripts", required: false)</body></html>

import { Component } from 'angular2/core';
@Component({    selector: 'pm-app',    template:`    <div><h1>{{pageTitle}}</h1>        <div>My First Component</div>    </div>    `
})
export class AppComponent {    pageTitle: string = "DNT AngularJS 2.0 APP";
}

 selector: 'pm-app',

    <div>        @RenderBody()        <pm-app>Loading App...</pm-app>    </div>

  template:`<div><h1>{{pageTitle}}</h1><div>My First Component</div></div>
 `

import { Component } from 'angular2/core';

<div>
    @RenderBody()<pm-app>Loading App...</pm-app></div>

 System.import('app/main')

/// <reference path="../node_modules/angular2/typings/browser.d.ts" />
import { bootstrap } from "angular2/platform/browser";
// Our main component
import { AppComponent } from "./app.component";
bootstrap(AppComponent);

 node_modules\angular2\src\core\application_ref.d.ts(171,81): error TS2304: Build: Cannot find name 'Promise'.
node_modules\angular2\src\core\change_detection\differs\default_keyvalue_differ.d.ts(23,15): error TS2304: Build: Cannot find name 'Map'.

template:`<div><h1>{{pageTitle}}</h1><div>My First Component</div></div>
 `

 templateUrl: 'product-list.component.html'

<div class='panel panel-default'>    <div class='panel-heading'>        {{pageTitle}}    </div>    <div class='panel-body'>        <div class='row'>            <div class='col-md-2'>Filter by:</div>            <div class='col-md-4'>                <input type='text' />            </div>        </div>        <div class='row'>            <div class='col-md-6'>                <h3>Filtered by: </h3>            </div>        </div>        <div class='table-responsive'>            <table class='table'>                <thead>                    <tr>                        <th>                            <button class='btn btn-primary'>                                Show Image                            </button>                        </th>                        <th>Product</th>                        <th>Code</th>                        <th>Available</th>                        <th>Price</th>                        <th>5 Star Rating</th>                    </tr>                </thead>                <tbody>                </tbody>            </table>        </div>    </div></div>

import { Component } from 'angular2/core';
@Component({    selector: 'pm-products',    templateUrl: 'app/products/product-list.component.html'
})
export class ProductListComponent {    pageTitle: string = 'Product List';
}

    <div>        @RenderBody()        <pm-app>Loading App...</pm-app>    </div>

import { Component } from 'angular2/core';
@Component({    selector: 'pm-app',    template:`    <div><h1>{{pageTitle}}</h1>        <pm-products></pm-products>    </div>    `
})
export class AppComponent {    pageTitle: string = "DNT AngularJS 2.0 APP";
}

 directives: [ProductListComponent]

import { Component } from 'angular2/core';
import { ProductListComponent } from './products/product-list.component';
@Component({    selector: 'pm-app',    template:`    <div><h1>{{pageTitle}}</h1>        <pm-products></pm-products>    </div>    `,    directives: [ProductListComponent]
})
export class AppComponent {    pageTitle: string = "DNT AngularJS 2.0 APP";
}

{{'Title: ' + pageTitle}}
{{2*20+1}}

{{'Title: ' + getTitle()}}

<h1>{{pageTitle}}</h1>

<h1 innerText={{pageTitle}}></h1>

<table class='table' *ngIf='products && products.length'>

import { Component } from 'angular2/core';
@Component({    selector: 'pm-products',    templateUrl: 'app/products/product-list.component.html'
})
export class ProductListComponent {    pageTitle: string = 'Product List';    products: any[] = [        {            "productId": 2,            "productName": "Garden Cart",            "productCode": "GDN-0023",            "releaseDate": "March 18, 2016",            "description": "15 gallon capacity rolling garden cart",            "price": 32.99,            "starRating": 4.2,            "imageUrl": "app/assets/images/garden_cart.png"        },        {            "productId": 5,            "productName": "Hammer",            "productCode": "TBX-0048",            "releaseDate": "May 21, 2016",            "description": "Curved claw steel hammer",            "price": 8.9,            "starRating": 4.8,            "imageUrl": "app/assets/images/rejon_Hammer.png"        }    ];
}

<tbody>    <tr *ngFor='#product of products'>        <td></td>        <td>{{ product.productName }}</td>        <td>{{ product.productCode }}</td>        <td>{{ product.releaseDate }}</td>        <td>{{ product.price }}</td>        <td>{{ product.starRating }}</td>    </tr></tbody>

 netstat /abo >>c:\output.txt

<img [src]='producr.imageUrl'>

<img src={{producr.imageUrl}}>

<img src='http://www.mysite.com/images/{{producr.imageUrl}}'>

<tbody>    <tr *ngFor='#product of products'>        <td>            <img [src]='product.imageUrl'                 [title]='product.productName'>        </td>        <td>{{ product.productName }}</td>        <td>{{ product.productCode }}</td>        <td>{{ product.releaseDate }}</td>        <td>{{ product.price }}</td>        <td>{{ product.starRating }}</td>    </tr></tbody>

export class ProductListComponent {    pageTitle: string = 'Product List';    imageWidth: number = 50;    imageMargin: number = 2;    products: any[] = [        // as before...    ];
}

<tbody>    <tr *ngFor='#product of products'>        <td>            <img [src]='product.imageUrl'                 [title]='product.productName'                 [style.width.px]='imageWidth'                 [style.margin.px]='imageMargin'>        </td>

<button (click)='toggleImage()'>

export class ProductListComponent {    pageTitle: string = 'Product List';    imageWidth: number = 50;    imageMargin: number = 2;    showImage: boolean = false;

export class ProductListComponent {
    // as before ...    toggleImage(): void {        this.showImage = !this.showImage;    }
}

<button class='btn btn-primary'        (click)='toggleImage()'>    Show Image</button>

<tr *ngFor='#product of products'>    <td>        <img *ngIf='showImage'             [src]='product.imageUrl'             [title]='product.productName'             [style.width.px]='imageWidth'             [style.margin.px]='imageMargin'>    </td>

<button class='btn btn-primary'        (click)='toggleImage()'>    {{showImage ? 'Hide' : 'Show'}} Image</button>

<input [(ngModel)]='listFilter' >

export class ProductListComponent {    pageTitle: string = 'Product List';    imageWidth: number = 50;    imageMargin: number = 2;    showImage: boolean = false;    listFilter: string = 'cart';

<div class='panel-body'>    <div class='row'>        <div class='col-md-2'>Filter by:</div>        <div class='col-md-4'>            <input type='text'                   [(ngModel)]='listFilter' />        </div>    </div>    <div class='row'>        <div class='col-md-6'>            <h3>Filtered by: {{listFilter}}</h3>        </div>    </div>

 {{ product.productCode | lowercase }}

 [title]='product.productName | uppercase'

 {{ product.price | currency | lowercase }}

 {{ product.price | currency:'USD':true:'1.2-2' }}

<td>{{ product.productName }}</td><td>{{ product.productCode | lowercase }}</td><td>{{ product.releaseDate }}</td><td>{{ product.price | currency:'USD':true:'1.2-2'}}</td><td>{{ product.starRating }}</td>

export interface IProduct {    productId: number;    productName: string;    productCode: string;    releaseDate: string;    price: number;    description: string;    starRating: number;    imageUrl: string;
}

import { Component } from 'angular2/core';
import { IProduct } from './product';
@Component({    selector: 'pm-products',    templateUrl: 'app/products/product-list.component.html'
})
export class ProductListComponent {
    // as before ...    products: IProduct[] = [
        // as before ...    ]; 

    // as before ...
}

 @Component({
    //...
    styles: ['thead {color: blue;}']
})

 @Component({
     //...
     styleUrls: ['app/products/product-list.component.css']
})

thead {
  color: #337AB7;
}

@Component({    selector: 'pm-products',    templateUrl: 'app/products/product-list.component.html',    styleUrls: ['app/products/product-list.component.css']
})
export class ProductListComponent {
   //...

 export class ProductListComponent implements OnInit {

 import { Component, OnInit } from 'angular2/core';

ngOnInit(): void {
    console.log('In OnInit');
}

import { PipeTransform, Pipe } from 'angular2/core';
import { IProduct } from './product';
@Pipe({    name: 'productFilter'
})
export class ProductFilterPipe implements PipeTransform {    transform(value: IProduct[], args: string[]): IProduct[] {        let filter: string = args[0] ? args[0].toLocaleLowerCase() : null;        return filter ? value.filter((product: IProduct) =>            product.productName.toLocaleLowerCase().indexOf(filter) != -1) : value;    }
}

<tr *ngFor='#product of products | productFilter:listFilter'>

<input type='text'  [(ngModel)]='listFilter' />

import { Component, OnInit } from 'angular2/core';
import { IProduct } from './product';
import { ProductFilterPipe } from './product-filter.pipe';
@Component({    selector: 'pm-products',    templateUrl: 'app/products/product-list.component.html',    styleUrls: ['app/products/product-list.component.css'],    pipes: [ProductFilterPipe]
})
export class ProductListComponent implements OnInit {
   //...

public static IEnumerable<TResult> Join<TOuter,TInner,TKey,TResult>
(this IEnumerable<TOuter> outer,
IEnumerable<TInner> inner,
Func<TOuter,TKey> outerKeySelector,
Func<TInner,TKey> innerKeySelector,
Func<TOuter,TInner,TResult> resultSelector)

Mashed Potato - Tasty!
Mashed Potato - Not nice :(
Mashed Potato - Pretty good
Crispy Duck - Too hard
Crispy Duck - Loved it

var query =
recipes.Join
(reviews,
outerKey => outerKey.Id,
innerKey => innerKey.RecipeId,
(recipe, review) => recipe.Name + " - " + review.ReviewText);

Reviews for Mashed Potato
 - Tasty!
 - Not nice :(
 - Pretty good
Reviews for Crispy Duck
 - Too hard
 - Loved it
Reviews for Sachertorte

var query =
from recipe in recipes
join review in reviews on recipe.Id equals review.RecipeId
into reviewGroup
select new //انواع بی نام
{
  RecipeName = recipe.Name,
  Reviews = reviewGroup//کلیه بازخورد‌ها مرتبط با یک دستور غذایی
};

Reviews for Mashed Potato
 - Tasty!
 - Not nice :(
 - Pretty good
Reviews for Crispy Duck
 - Too hard
 - Loved it
Reviews for Sachertorte

 public class Ingredient
{
  public string Name { get; set; }
  public int Calories { get; set; }
}

string[] names = { "Flour", "Butter", "Sugar" };
int[] calories = { 100, 400, 500 };
IEnumerable<Ingredient> ingredients =
names.Zip(calories, (name, calorie) =>
new Ingredient
{
  Name = name,
  Calories = calorie
});
foreach (var item in ingredients)
{
Console.WriteLine($"{item.Name} has {item.Calories} calories");
}

Flour has 100 calories
Butter has 400 calories
Sugar has 500 calories

<td>{{ product.starRating }}</td>

import { Component, OnChanges, Input, Output, EventEmitter } from 'angular2/core';
@Component({    selector: 'ai-star',    templateUrl: 'app/shared/star.component.html',    styleUrls: ['app/shared/star.component.css']
})
export class StarComponent implements OnChanges {    @Input() rating: number;    starWidth: number;    @Output() ratingClicked: EventEmitter<string> = new EventEmitter<string>();    ngOnChanges(): void {        this.starWidth = this.rating * 86 / 5;    }    onClick() {        this.ratingClicked.emit(`The rating ${this.rating} was clicked!`);    }
}

<div class="crop"     [style.width.px]="starWidth"     [title]="rating"     (click)='onClick()'>    <div style="width: 86px">        <span class="glyphicon glyphicon-star"></span>        <span class="glyphicon glyphicon-star"></span>        <span class="glyphicon glyphicon-star"></span>        <span class="glyphicon glyphicon-star"></span>        <span class="glyphicon glyphicon-star"></span>    </div></div>

.crop {    overflow: hidden;
}
div {    cursor: pointer;
}

export class StarComponent implements OnChanges {
      @Input() rating: number;

 [rating]='product.starRating'

export class StarComponent implements OnChanges {    @Input() rating: number;    starWidth: number;    @Output() ratingClicked: EventEmitter<string> = new EventEmitter<string>();

<div class="crop"     [style.width.px]="starWidth"     [title]="rating"     (click)='onClick()'>

onClick() {
     this.ratingClicked.emit(`The rating ${this.rating} was clicked!`);
 }

 (ratingClicked)='onRatingClicked($event)'

onRatingClicked(message: string): void {
    this.pageTitle = 'Product List: ' + message;
}

<td>    <ai-star [rating]='product.starRating'             (ratingClicked)='onRatingClicked($event)'>    </ai-star></td>

import { Component, OnInit } from 'angular2/core';
import { IProduct } from './product';
import { ProductFilterPipe } from './product-filter.pipe';
import { StarComponent } from '../shared/star.component';
@Component({    selector: 'pm-products',    templateUrl: 'app/products/product-list.component.html',    styleUrls: ['app/products/product-list.component.css'],    pipes: [ProductFilterPipe],    directives: [StarComponent]
})

 export class MyService {}

 let svc = new MyService();

 constructor(private _myService: MyService){}

import { Injectable } from 'angular2/core';
import { IProduct } from './product';
@Injectable()
export class ProductService {    getProducts(): IProduct[] {        return [            {                "productId": 2,                "productName": "Garden Cart",                "productCode": "GDN-0023",                "releaseDate": "March 18, 2016",                "description": "15 gallon capacity rolling garden cart",                "price": 32.99,                "starRating": 4.2,                "imageUrl": "app/assets/images/garden_cart.png"            },            {                "productId": 5,                "productName": "Hammer",                "productCode": "TBX-0048",                "releaseDate": "May 21, 2016",                "description": "Curved claw steel hammer",                "price": 8.9,                "starRating": 4.8,                "imageUrl": "app/assets/images/rejon_Hammer.png"            }        ];    }
}

import { Component } from 'angular2/core';
import { ProductListComponent } from './products/product-list.component';
import { ProductService } from './products/product.service';
@Component({    selector: 'pm-app',    template:`    <div><h1>{{pageTitle}}</h1>        <pm-products></pm-products>    </div>    `,    directives: [ProductListComponent],    providers: [ProductService]
})
export class AppComponent {    pageTitle: string = "DNT AngularJS 2.0 APP";
}

import { ProductService } from './product.service';
export class ProductListComponent implements OnInit {    pageTitle: string = 'Product List';    imageWidth: number = 50;    imageMargin: number = 2;    showImage: boolean = false;    listFilter: string = 'cart';    constructor(private _productService: ProductService) {    }

private _productService: ProductService;
constructor(productService: ProductService) {
   _productService = productService;
}

 products: IProduct[];

 this.products = _productService.getProducts();

export class ProductListComponent implements OnInit {
products: IProduct[];

constructor(private _productService: ProductService) {
}

ngOnInit(): void {    //console.log('In OnInit');    this.products = this._productService.getProducts();
}

"dependencies": {
    "rxjs": "5.0.0-beta.2"
 },

<!-- Required for http --><script src="~/node_modules/angular2/bundles/http.dev.js"></script>

import { Component } from 'angular2/core';
import { HTTP_PROVIDERS } from 'angular2/http';
import 'rxjs/Rx';   // Load all features
import { ProductListComponent } from './products/product-list.component';
import { ProductService } from './products/product.service';
@Component({    selector: 'pm-app',    template:`    <div><h1>{{pageTitle}}</h1>        <pm-products></pm-products>    </div>    `,    directives: [ProductListComponent],    providers: [        ProductService,        HTTP_PROVIDERS    ]
})
export class AppComponent {    pageTitle: string = "DNT AngularJS 2.0 APP";
}

namespace MVC5Angular2.Models
{    public class Product    {        public int ProductId { set; get; }        public string ProductName { set; get; }        public string ProductCode { set; get; }        public string ReleaseDate { set; get; }        public decimal Price { set; get; }        public string Description { set; get; }        public double StarRating { set; get; }        public string ImageUrl { set; get; }    }
}

using System.Collections.Generic;
using System.Text;
using System.Web.Mvc;
using MVC5Angular2.Models;
using Newtonsoft.Json;
using Newtonsoft.Json.Serialization;
namespace MVC5Angular2.Controllers
{    public class HomeController : Controller    {        // GET: Home        public ActionResult Index()        {            return View();        }        public ActionResult Products()        {            var products = new List<Product>            {               new Product               {                    ProductId= 2,                    ProductName= "Garden Cart",                    ProductCode= "GDN-0023",                    ReleaseDate= "March 18, 2016",                    Description= "15 gallon capacity rolling garden cart",                    Price= (decimal) 32.99,                    StarRating= 4.2,                    ImageUrl= "app/assets/images/garden_cart.png"               },               new Product               {                    ProductId= 5,                    ProductName= "Hammer",                    ProductCode= "TBX-0048",                    ReleaseDate= "May 21, 2016",                    Description= "Curved claw steel hammer",                    Price= (decimal) 8.9,                    StarRating= 4.8,                    ImageUrl= "app/assets/images/rejon_Hammer.png"               }            };            return new ContentResult            {                Content = JsonConvert.SerializeObject(products, new JsonSerializerSettings                {                    ContractResolver = new CamelCasePropertyNamesContractResolver()                }),                ContentType = "application/json",                ContentEncoding = Encoding.UTF8            };        }    }
}

import { Injectable } from 'angular2/core';
import { IProduct } from './product';
import { Http, Response } from 'angular2/http';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class ProductService {    private _productUrl = '/home/products';    constructor(private _http: Http) { }    getProducts(): Observable<IProduct[]> {        return this._http.get(this._productUrl)                         .map((response: Response) => <IProduct[]>response.json())                         .do(data => console.log("All: " + JSON.stringify(data)))                         .catch(this.handleError);    }    private handleError(error: Response) {        console.error(error);        return Observable.throw(error.json().error || 'Server error');    }
}

errorMessage: string;
ngOnInit(): void {    //console.log('In OnInit');    this._productService.getProducts()                        .subscribe(                              products => this.products = products,                              error => this.errorMessage = <any>error);
}

 EXCEPTION: No provider for Http!

<!-- Required for routing --><script src="~/node_modules/angular2/bundles/router.dev.js"></script>

<!DOCTYPE html><html><head><base href="/">

//same as before ...
import { ROUTER_PROVIDERS } from 'angular2/router';
//same as before ... 

@Component({
//same as before …
    providers: [        ProductService,        HTTP_PROVIDERS,        ROUTER_PROVIDERS    ]
})
//same as before ...

<div class='panel panel-primary'><div class='panel-heading'>
        {{pageTitle}}</div></div>

import { Component } from 'angular2/core';

@Component({
    templateUrl: 'app/products/product-detail.component.html'
})
export class ProductDetailComponent  {
    pageTitle: string = 'Product Detail'; 
}

 { path: '/products', name: 'Products', component: ProductListComponent },

//same as before …
import { ROUTER_PROVIDERS, RouteConfig } from 'angular2/router';
//same as before …
 
@Component({
    //same as before …
})
@RouteConfig([
    { path: '/welcome', name: 'Welcome', component: WelcomeComponent, useAsDefault: true },    { path: '/products', name: 'Products', component: ProductListComponent }
])
export class AppComponent {    pageTitle: string = "DNT AngularJS 2.0 APP";
}

import { Component } from 'angular2/core';
@Component({    templateUrl: 'app/home/welcome.component.html'
})
export class WelcomeComponent {    public pageTitle: string = "Welcome";
}

<div class="panel panel-primary">    <div class="panel-heading">        {{pageTitle}}    </div>    <div class="panel-body">        <h3 class="text-center">Default page</h3>    </div></div>

 import { WelcomeComponent } from './home/welcome.component';

@Component({
    //same as before …
    template: `     <div>        <nav class='navbar navbar-default'>            <div class='container-fluid'>                <a class='navbar-brand'>{{pageTitle}}</a>                <ul class='nav navbar-nav'>                    <li><a [routerLink]="['Welcome']">Home</a></li>                    <li><a [routerLink]="['Products']">Product List</a></li>                </ul>            </div>        </nav>        <div class='container'>            <router-outlet></router-outlet>        </div>     </div>    `,
    //same as before …
})

 import { ROUTER_PROVIDERS, RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';

 directives: [ROUTER_DIRECTIVES],

//same as before …

import { ProductDetailComponent } from './products/product-detail.component';
@Component({
    //same as before …
})
@RouteConfig([
    //same as before …
    { path: '/product/:id', name: 'ProductDetail', component: ProductDetailComponent }
])
//same as before …

<td>{{ product.productName }}</td>

<td>    <a [routerLink]="['ProductDetail', {id: product.productId}]">        {{product.productName}}    </a></td>

import { Component, OnInit } from 'angular2/core';
import { ROUTER_DIRECTIVES } from 'angular2/router';
//same as before …
 
@Component({
    //same as before …
    directives: [StarComponent, ROUTER_DIRECTIVES]
})

import { Component } from 'angular2/core';
import { RouteParams } from 'angular2/router';
@Component({    templateUrl: 'app/products/product-detail.component.html'
})
export class ProductDetailComponent {    pageTitle: string = 'Product Detail';    constructor(private _routeParams: RouteParams) {        let id = +this._routeParams.get('id');        this.pageTitle += `: ${id}`;    } 
}

<div class='panel panel-primary'><div class='panel-heading'>
        {{pageTitle}}</div><div class='panel-footer'><a class='btn btn-default' (click)='onBack()' style='width:80px'><i class='glyphicon glyphicon-chevron-left'></i> Back</a></div>    </div>

import { Component } from 'angular2/core';
import { RouteParams, Router } from 'angular2/router';
@Component({    templateUrl: 'app/products/product-detail.component.html'
})
export class ProductDetailComponent {    pageTitle: string = 'Product Detail';    constructor(private _routeParams: RouteParams, private _router: Router) {        let id = +this._routeParams.get('id');        this.pageTitle += `: ${id}`;    }    onBack(): void {        this._router.navigate(['Products']);    }
}

public class RouteConfig
{    public static void RegisterRoutes(RouteCollection routes)    {        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");        routes.MapRoute(            name: "Default",            url: "{controller}/{action}/{id}",            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional },            constraints: new { controller = "Home" } // for catch all to work, Home|About|SomeName        );        // Route override to work with Angularjs and HTML5 routing        routes.MapRoute(            name: "NotFound",            url: "{*catchall}",            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }        );    }
}

App.controller('parentController', ['$rootScope', '$scope', 'authService', 'permissionService', function ($rootScope, $scope, authService, permissionService) {
        $scope.authentication = authService.authentication;

        // isAuthorize Method
        $scope.isAuthorize = permissionService.isAuthorize();

        // rest of codes
}]);

<form #f="ngForm" (ngSubmit)="onSubmit(f.form)">    <div class="panel panel-default">        <div class="panel-heading">            <h3 class="panel-title">                Add Product            </h3>        </div>        <div class="panel-body form-horizontal">            <div class="form-group">                <label for="productName" class="col col-md-2 control-label">Name</label>                <div class="controls col col-md-10">                    <input ngControl="productName" id="productName" required                           #productName="ngForm"                           (change)="log(productName)"                           minlength="3"                           type="text" class="form-control"                           [(ngModel)]="productModel.productName"/>                    <div *ngIf="productName.touched && productName.errors">                        <label class="text-danger" *ngIf="productName.errors.required">                            Name is required.                        </label>                        <label class="text-danger" *ngIf="productName.errors.minlength">                            Name should be minimum {{ productName.errors.minlength.requiredLength }} characters.                        </label>                    </div>                </div>            </div>            <div class="form-group">                <label for="productCode" class="col col-md-2 control-label">Code</label>                <div class="controls col col-md-10">                    <input ngControl="productCode" id="productCode" required                           #productCode="ngForm"                           type="text" class="form-control"                           [(ngModel)]="productModel.productCode"/>                    <label class="text-danger" *ngIf="productCode.touched && !productCode.valid">                        Code is required.                    </label>                </div>            </div>            <div class="form-group">                <label for="releaseDate" class="col col-md-2 control-label">Release Date</label>                <div class="controls col col-md-10">                    <input ngControl="releaseDate" id="releaseDate" required                           #releaseDate="ngForm"                           type="text" class="form-control"                           [(ngModel)]="productModel.releaseDate"/>                    <label class="text-danger" *ngIf="releaseDate.touched && !releaseDate.valid">                        Release Date is required.                    </label>                </div>            </div>            <div class="form-group">                <label for="price" class="col col-md-2 control-label">Price</label>                <div class="controls col col-md-10">                    <input ngControl="price" id="price" required                           #price="ngForm"                           type="text" class="form-control"                           [(ngModel)]="productModel.price"/>                    <label class="text-danger" *ngIf="price.touched && !price.valid">                        Price is required.                    </label>                </div>            </div>            <div class="form-group">                <label for="description" class="col col-md-2 control-label">Description</label>                <div class="controls col col-md-10">                    <textarea ngControl="description" id="description" required                              #description="ngForm"                              rows="10" type="text" class="form-control"                              [(ngModel)]="productModel.description"></textarea>                    <label class="text-danger" *ngIf="description.touched && !description.valid">                        Description is required.                    </label>                </div>            </div>            <div class="form-group">                <label for="imageUrl" class="col col-md-2 control-label">Image</label>                <div class="controls col col-md-10">                    <input ngControl="imageUrl" id="imageUrl" required                           #imageUrl="ngForm"                           type="text" class="form-control"                           [(ngModel)]="productModel.imageUrl"/>                    <label class="text-danger" *ngIf="imageUrl.touched && !imageUrl.valid">                        Image is required.                    </label>                </div>            </div>        </div>        <footer class="panel-footer">            <button [disabled]="!f.valid"                    type="submit" class="btn btn-primary">                Submit            </button>        </footer>    </div></form>

import { Component } from 'angular2/core';
import { Router } from 'angular2/router';
import { IProduct } from './product';
import { ProductService } from './product.service';
@Component({    //selector: 'product-form',    templateUrl: 'app/products/product-form.component.html'
})
export class ProductFormComponent {    productModel = <IProduct>{}; // creates an empty object of an interface    constructor(private _productService: ProductService, private _router: Router) { }    log(productName): void {        console.log(productName);    }    onSubmit(form): void {        console.log(form);        console.log(this.productModel);        this._productService.addProduct(this.productModel)            .subscribe((product: IProduct) => {                console.log(`ID: ${product.productId}`);                this._router.navigate(['Products']);            });    }
}

<div class="form-group">    <label for="description" class="col col-md-2 control-label">Description</label>    <div class="controls col col-md-10">        <textarea ngControl="description" id="description" required                  #description="ngForm"                  rows="10" type="text" class="form-control"                  [(ngModel)]="productModel.description"></textarea>        <label class="text-danger" *ngIf="description.touched && !description.valid">            Description is required.        </label>    </div></div>

<input ngControl="productName" id="productName" required       #productName="ngForm"       (change)="log(productName)"       minlength="3"       type="text" class="form-control"       [(ngModel)]="productModel.productName"/>

<textarea ngControl="description" id="description" required          #description="ngForm"          rows="10" type="text" class="form-control"></textarea><div class="alert alert-danger" *ngIf="description.touched && !description.valid">    Description is required.</div>

.ng-touched.ng-invalid{
    border: 1px solid red;
}

<div class="alert alert-danger" *ngIf="productName.touched && !productName.valid">   Name is required.</div>

<div *ngIf="productName.touched && productName.errors">    <div class="alert alert-danger" *ngIf="productName.errors.required">        Name is required.    </div>    <div class="alert alert-danger" *ngIf="productName.errors.minlength">        Name should be minimum 3 characters.    </div></div>

<div *ngIf="productName.touched && productName.errors">
  {{ productName.errors | json }}

 Name should be minimum {{ productName.errors.minlength.requiredLength }} characters.

<form #f="ngForm" (ngSubmit)="onSubmit(f.form)">

onSubmit(form): void {
   console.log(form);
}

<button [disabled]="!f.valid"        type="submit" class="btn btn-primary">    Submit</button>

//same as before...
import { ProductFormComponent }  from './products/product-form.component';
@Component({
    //same as before…
    template: `
                //same as before…
                    <li><a [routerLink]="['AddProduct']">Add Product</a></li>
               //same as before…
    `,
    //same as before…
})
@RouteConfig([
    //same as before…
    { path: '/addproduct', name: 'AddProduct', component: ProductFormComponent }
])
//same as before...

 productModel = <IProduct>{}; // creates an empty object of an interface

<textarea ngControl="description" id="description" required          #description="ngForm"          rows="10" type="text" class="form-control"          [(ngModel)]="productModel.description"></textarea>

addProduct(product: IProduct): Observable<IProduct> {    let headers = new Headers({ 'Content-Type': 'application/json' }); // for ASP.NET MVC        let options = new RequestOptions({ headers: headers });    return this._http.post(this._addProductUrl, JSON.stringify(product), options)        .map((response: Response) => <IProduct>response.json())        .do(data => console.log("Product: " + JSON.stringify(data)))        .catch(this.handleError);
}

 [HttpPost]
public ActionResult AddProduct(Product product)
{

 import { Headers, RequestOptions } from 'angular2/http';

//Same as before…
import { IProduct } from './product';
import { ProductService } from './product.service';
@Component({
//Same as before…
})
export class ProductFormComponent {    productModel = <IProduct>{}; // creates an empty object of an interface    constructor(private _productService: ProductService, private _router: Router) { }
    //Same as before… 

    onSubmit(form): void {        console.log(form);        console.log(this.productModel);        this._productService.addProduct(this.productModel)            .subscribe((product: IProduct) => {                console.log(`ID: ${product.productId}`);                this._router.navigate(['Products']);            });    }
}

export interface IUser {    id: number;    name: string;    email: string;    password: string;
}

<form>    <div class="form-group">        <label form="name">Username</label>        <input id="name" type="text" class="form-control" />    </div>    <div class="form-group">        <label form="email">Email</label>        <input id="email" type="text" class="form-control" />    </div>    <div class="form-group">        <label form="password">Password</label>        <input id="password" type="password" class="form-control" />    </div>    <button class="btn btn-primary" type="submit">Submit</button></form>

import { Component } from '@angular/core';
import { Control, ControlGroup, Validators } from '@angular/common';
@Component({    selector: 'signup-form',    templateUrl: 'app/users/signup-form.component.html'
})
export class SignupFormComponent {    form = new ControlGroup({        name: new Control('', Validators.required),        email: new Control('', Validators.required),        password: new Control('', Validators.required)    });    onSubmit(): void {        console.log(this.form.value);    }
}

<form [ngFormModel]="form" (ngSubmit)="onSubmit()">    <div class="form-group">        <label form="name">Username</label>        <input id="name" type="text" class="form-control"               ngControl="name"/>        <label class="text-danger" *ngIf="!form.controls['name'].valid">            Username is required.        </label>    </div>    <div class="form-group">        <label form="email">Email</label>        <input id="email" type="text" class="form-control"               ngControl="email" #email="ngForm"/>        <label class="text-danger" *ngIf="email.touched && !email.valid">            Email is required.        </label>    </div>    <div class="form-group">        <label form="password">Password</label>        <input id="password" type="password" class="form-control"               ngControl="password" #password="ngForm"/>        <label class="text-danger" *ngIf="password.touched && !password.valid">            Password is required.        </label>    </div>    <button class="btn btn-primary" type="submit">Submit</button></form>

form = new ControlGroup({    name: new Control('', Validators.required),    email: new Control('', Validators.required),    password: new Control('', Validators.required)
});

 import { Control, ControlGroup, Validators } from '@angular/common';

<form [ngFormModel]="form" (ngSubmit)="onSubmit()">

<label class="text-danger" *ngIf="!form.controls['name'].valid">

    onSubmit(): void {        console.log(this.form.value);    }

//same as before...
import { SignupFormComponent } from './users/signup-form.component';
@Component({
    //same as before…
    template: `
                //same as before…                    <li><a [routerLink]="['AddUser']">Add User</a></li>
               //same as before…
    `,
    //same as before…
})
@RouteConfig([
    //same as before…    
    { path: '/adduser', name: 'AddUser', component: SignupFormComponent }
])
//same as before...

import { Control, ControlGroup, Validators, FormBuilder } from '@angular/common';

form: ControlGroup;
constructor(formBuilder: FormBuilder) {    this.form = formBuilder.group({        name: ['', Validators.required],        email: ['', Validators.required],        password: ['', Validators.required]    });
}

import { Control } from '@angular/common';
export class UsernameValidators {    static cannotContainSpace(control: Control) {        if (control.value.indexOf(' ') >= 0) {            return { cannotContainSpace: true };        }        return null;    }
}

 { required:true }

{
  minlength : {
     requiredLength : 3,
     actualLength : 1
  }
}

 import { UsernameValidators } from './usernameValidators';

 name: ['', Validators.compose([Validators.required, UsernameValidators.cannotContainSpace])],

<div class="form-group">    <label form="name">Username</label>    <input id="name" type="text" class="form-control"           ngControl="name"           #name="ngForm" />    <div *ngIf="name.touched && name.errors">        <label class="text-danger" *ngIf="name.errors.required">            Username is required.        </label>        <label class="text-danger" *ngIf="name.errors.cannotContainSpace">            Username can't contain space.        </label>    </div></div>

import {Control} from '@angular/common';
export class EmailValidators {    static email(control: Control) {        var regEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;        var valid = regEx.test(control.value);        return valid ? null : { email: true };    }
}

 control(value: Object, validator?: ValidatorFn, asyncValidator?: AsyncValidatorFn) : Control

nameShouldBeUnique(control: Control) {    let name: string = control.value;    return new Promise((resolve) => {        this._userService.isUserNameUnique(<IUser>{ "name": name }).subscribe(            (result: IResult) => {                resolve(                    
                    result.result ? null : { 'nameShouldBeUnique': true }                );            },            error => {                resolve(null);            }        );    });
}

this.form = _formBuilder.group({    name: ['', Validators.compose([        Validators.required,        UsernameValidators.cannotContainSpace    ]),        (control: Control) => this.nameShouldBeUnique(control)],

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Headers, RequestOptions } from '@angular/http';
import { IUser } from  './user';
import { IResult } from './result';
@Injectable()
export class UserService {    private _checkUserUrl = '/home/checkUser';    constructor(private _http: Http) { }    private handleError(error: Response) {        console.error(error);        return Observable.throw(error.json().error || 'Server error');    }    isUserNameUnique(user: IUser): Observable<IResult> {        let headers = new Headers({ 'Content-Type': 'application/json' }); // for ASP.NET MVC        let options = new RequestOptions({ headers: headers });        return this._http.post(this._checkUserUrl, JSON.stringify(user), options)            .map((response: Response) => <IResult>response.json())            .do(data => console.log("User: " + JSON.stringify(data)))            .catch(this.handleError);    }
}

export interface IResult {
    result: boolean;
}

namespace MVC5Angular2.Controllers
{    public class HomeController : Controller    {        [HttpPost]        public ActionResult CheckUser(User user)        {            var isUnique = new { result = true };            if (user.Name?.Equals("Vahid", StringComparison.OrdinalIgnoreCase) ?? false)            {                isUnique = new { result = false };            }            return new ContentResult            {                Content = JsonConvert.SerializeObject(isUnique, new JsonSerializerSettings                {                    ContractResolver = new CamelCasePropertyNamesContractResolver()                }),                ContentType = "application/json",                ContentEncoding = Encoding.UTF8            };        }    }
}

@Component({    selector: 'signup-form',    templateUrl: 'app/users/signup-form.component.html',    providers: [ UserService ]
})
export class SignupFormComponent {    constructor(private _formBuilder: FormBuilder, private _userService: UserService) {

<div *ngIf="name.touched && name.errors">    <label class="text-danger" *ngIf="name.errors.required">        Username is required.    </label>    <label class="text-danger" *ngIf="name.errors.cannotContainSpace">        Username can't contain space.    </label>    <label class="text-danger" *ngIf="name.errors.nameShouldBeUnique">        This username is already taken.    </label></div>

<input id="name" type="text" class="form-control"       ngControl="name"       #name="ngForm" /><div *ngIf="name.control.pending">    Checking server, Please wait ...</div>

onSubmit(): void {    console.log(this.form.value);    this.form.find('name').setErrors({        invalidData : true    }); 
}

<div *ngIf="name.touched && name.errors">    <label class="text-danger" *ngIf="name.errors.invalidData">        Check the inputs....    </label></div>

  { name="VahidN", email="email@site.com", password="123"}

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Headers, RequestOptions } from '@angular/http';
import { IUser } from  './user';
import { IResult } from './result';
@Injectable()
export class UserService {    private _addUserUrl = '/home/addUser';    constructor(private _http: Http) { }    private handleError(error: Response) {        console.error(error);        return Observable.throw(error.json().error || 'Server error');    }    addUser(user: IUser): Observable<IUser> {        let headers = new Headers({ 'Content-Type': 'application/json' }); // for ASP.NET MVC        let options = new RequestOptions({ headers: headers });        return this._http.post(this._addUserUrl, JSON.stringify(user), options)            .map((response: Response) => <IUser>response.json())            .do(data => console.log("User: " + JSON.stringify(data)))            .catch(this.handleError);    }
}

[HttpPost]
public ActionResult AddUser(User user)
{    user.Id = 1; //todo: save user and get id from db    return new ContentResult    {        Content = JsonConvert.SerializeObject(user, new JsonSerializerSettings        {            ContractResolver = new CamelCasePropertyNamesContractResolver()        }),        ContentType = "application/json",        ContentEncoding = Encoding.UTF8    };
}

onSubmit(): void {    console.log(this.form.value);    /*this.form.find('name').setErrors({            invalidData : true        });*/    this._userService.addUser(<IUser>this.form.value)        .subscribe((user: IUser) => {            console.log(`ID: ${user.id}`);        });
}

/* Query with related entities using expand */
// query for orders of customers whose name begins "Alfreds"
// include their customers & child details & their detail products
breeze.EntityQuery.from("Orders")
   .where("Customer.CompanyName", "startsWith", "Alfreds")
   .expand("Customer, OrderDetails.Product")
   .using(manager)
   .execute().then(querySucceeded).fail(queryFailed);

// execute query asynchronously on the server
manager.executeQuery(query).then(querySuccess).fail(queryFail);
// execute query synchronously on local cache
var customers = manager.executeQueryLocally(query)