{
    "userIsAuthorizedForCourseTranscripts": false,
    "modules": [
        {
            "title": "Course Overview",
            "clips": [
                {
                    "title": "Course Overview",
                    "playerParameters": "author=scott-allen&name=aspdotnet-core-1-0-fundamentals-m0&mode=live&clip=0&course=aspdotnet-core-1-0-fundamentals",
                    "transcripts": [ ]
                }
            ]
        },
        {
            "title": "Building Your First ASP.NET Core Application",
            "clips": [
                {
                    "title": "Introduction",
                    "playerParameters": "author=scott-allen&name=aspdotnet-core-1-0-fundamentals-m1&mode=live&clip=0&course=aspdotnet-core-1-0-fundamentals",
                    "transcripts": [
                        {
                            "displayTime": 0.0,
                            "text": "Hi! This is Scott, and this course will help you build your first application with ASP.NET Core."
                        },
                        {
                            "displayTime": 7.0,
                            "text": "In this course, we'll be using Visual Studio and the new ASP.NET Framework to build a web application that"
                        }
                    ]
                }
            ]
        }
    ]
}

public class PluralsightCourse
{    public bool UserIsAuthorizedForCourseTranscripts { get; set; }    public PluralsightCourseItems[] Modules { get; set; }
}
public class PluralsightCourseItems
{    public string Title { get; set; }    public PluralsightCourseClip[] Clips { get; set; }
}
public class PluralsightCourseClip
{    public string Title { get; set; }    public string PlayerParameters { get; set; }    public PluralsightCourseClipTranscript[] Transcripts { get; set; }
}
public class PluralsightCourseClipTranscript
{    public float DisplayTime { get; set; }    public string Text { get; set; }
}

public static PluralsightCourse ProcessJsonFile(string jsonData)
{
    return JsonConvert.DeserializeObject<PluralsightCourse>(jsonData);
}

$(document).ready(function () {
    $(document).on('click', '.confirm', function () {
        alert("Clicked Me !");
    });
});

$(document).ready(function () {
    $(document).on('click', '.confirm', function () {
        alert("Clicked Me On nested Page !");
    });
});

$(document).off('click', '.confirm');

$(".confirm").removeAttr("onclick");
$( ".confim").unbind( "click" );

 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)
                 return MinException();
            if(n1>_max)
                return 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
}]);