Install-Package angularjs
<!DOCTYPE html>
<html ng-app>
<head>
<title>Sample 1</title>
</head>
<body>
<div ng-controller="GreetingController">
<p>{{greeting.text}}, World!</p>
</div>
<script src="../Scripts/angular.js"></script>
<script>
function GreetingController($scope) {
$scope.greeting = {
text: "Hello"
};
}
</script>
</body>
</html>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 {
//... 
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"
]
} bower install chosen
{
"name": "asp-net-mvc5x-angular2x",
"version": "1.0.0",
"authors": [
"DNT"
],
"license": "MIT",
"ignore": [
"node_modules",
"bower_components"
],
"dependencies": {
"chosen": "1.4.2"
},
"devDependencies": {
}
} <script src="~/node_modules/jquery/dist/jquery.min.js"></script> <script src="~/node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <script src="~/bower_components/chosen/chosen.jquery.min.js"></script> <link href="~/bower_components/chosen/chosen.min.css" rel="stylesheet" type="text/css" />
declare var jQuery: any;
constructor(private _el: ElementRef) {
} import { Component, ElementRef, AfterViewInit } from "@angular/core";
declare var jQuery: any; // untyped
@Component({
templateUrl: "app/using-jquery-addons/using-jquery-addons.component.html"
})
export class UsingJQueryAddonsComponent implements AfterViewInit {
dropDownItems = ["First", "Second", "Third"];
selectedValue = "Second";
constructor(private _el: ElementRef) {
}
ngAfterViewInit() {
jQuery(this._el.nativeElement)
.find("select")
.chosen()
.on("change", (e, args) => {
this.selectedValue = args.selected;
});
}
} <select>
<option *ngFor="let item of dropDownItems"
[value]="item"
[selected]="item == selectedValue">
{{item}} option
</option>
</select>
<h4> {{selectedValue}}</h4> 
npm install -g typings typings install jquery --save --ambient
/// <reference path="../typings/browser/ambient/jquery/index.d.ts" />
// declare var jQuery: any; // untyped declare var jQuery: JQueryStatic; // typed
interface JQuery {
//...
chosen(options?:any):JQuery;
}
declare module "jquery" {
export = $;
} \/Date(1374222094520)\/
moment("/Date(1198908717056-0700)/"); // December 28 2007 10:11 PM {{ name | uppercase }} {{post.date | jalaliDate:'jYYYY/jMM/jDD hh:mm' }} app.filter('jalaliDate', function () {
return function (inputDate, format) {
var date = moment(inputDate);
return date.fromNow() + " " + date.format(format);
}
}); If you are used to manipulate HTML forms, you probably know that each checkbox is a separate variable (or maybe an ngModel with AngularJS). Demo
Sometimes, it could be usefull to manipulate all these checkboxes as a unique array.
angular.checkboxes module lets you turn your list of checkboxes into a unique destination array, providing :
