JQuery Datatables برای برنامه نویسان وب یک پلاگین کاربردی و معروف محسوب میشود. Angular Datatables نسخه همگام شده با AngularJs است. کار با این پلاگین خیلی ساده است و کسانی که با کارکرد Datatables آشنایی دارند هیچ مشکلی با نسخه AngularJs نخواهند داشت. از امکانات ویژه این پلاگین میتوان به Binding ساده و خودکار و امکان تغییر Optionها در سمت کنترلر و مدیریت promise اشاره کرد.
"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!
Day One of .NET Conf 2020
For more resources head over to: https://www.dotnetconf.net/
Awesome WinUI
A collection of awesome resources for WinUI / Windows developers.
UI-Router ابزاری برای مسیریابی در AngularJS است که این امکان را برایتان فراهم می‌کند تا بخش‌های برنامه رابط کاربریتان را به شکل یک ماشین حالت ساماندهی کنید. برخلاف سرویس route$ که بر اساس مسیریابی URLها ساماندهی شده و کار می‌کند، UI-Router بر اساس حالت‌ها کار می‌کند، که این حالت‌ها می‌توانند در صورت لزوم مسیریابی هم داشته باشند.
<!doctype html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script>
var myApp = angular.module('myApp', ['ui.router']);
// For Component users, it should look like this:
// var myApp = angular.module('myApp', [require('angular-ui-router')]);
</script>
...
</head>
<body>
...
</body>
</html> <!-- index.html -->
<body>
<div ui-view></div>
<!-- We'll also add some navigation: -->
<a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>
</body> <!-- partials/state1.html --> <h1>State 1</h1> <hr/> <a ui-sref="state1.list">Show List</a> <div ui-view></div>
<!-- partials/state2.html --> <h1>State 2</h1> <hr /> <a ui-sref="state2.list">Show List</a> <div ui-view></div>
<!-- partials/state1.list.html -->
<h3>List of State 1 Items</h3>
<ul>
<li ng-repeat="item in items">{{ item }}</li>
</ul> <!-- partials/state2.list.html -->
<h3>List of State 2 Things</h3>
<ul>
<li ng-repeat="thing in things">{{ thing }}</li>
</ul> myApp.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})
.state('state1.list', {
url: "/list",
templateUrl: "partials/state1.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('state2', {
url: "/state2",
templateUrl: "partials/state2.html"
})
.state('state2.list', {
url: "/list",
templateUrl: "partials/state2.list.html",
controller: function($scope) {
$scope.things = ["A", "Set", "Of", "Things"];
}
})
}]); .state('state1', {
url: "/state1/:id",
templateUrl: "partials/state1.html"
}) $stateParams.id
.state('list', {
parent: "state1",
url: "/list",
templateUrl: "partials/state1.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('list', {
parent: "state2",
url: "/list",
templateUrl: "partials/state2.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
}) .state('state1', {
url: "/state1",
templateUrl: "partials/state1.html",
data:{
foodata: 'addorder'
}
}) $state.current.data.foodata
<!-- index.html -->
<body>
<div ui-view="viewA"></div>
<div ui-view="viewB"></div>
<!-- Also a way to navigate -->
<a ui-sref="route1">Route 1</a>
<a ui-sref="route2">Route 2</a>
</body> myApp.config(function ($stateProvider) {
$stateProvider
.state('index', {
url: "",
views: {
"viewA": { template: "index.viewA" },
"viewB": { template: "index.viewB" }
}
})
.state('route1', {
url: "/route1",
views: {
"viewA": { template: "route1.viewA" },
"viewB": { template: "route1.viewB" }
}
})
.state('route2', {
url: "/route2",
views: {
"viewA": { template: "route2.viewA" },
"viewB": { template: "route2.viewB" }
}
})
}); چند نکته
.state('list', {
parent: "state1",
url: "/list",
templateUrl: "partials/state1.list.html",
controller: "state1ListController as listCtrl1"
}
})
.state('list', {
parent: "state2",
url: "/list",
templateUrl: "partials/state2.list.html",
controller: "state2ListController as listCtrl2"
}
}) حالت‌های انتزاعی
حساسیت به حروف بزرگ و کوچک
Angular 1.4 soon will be finally out and the most shiny new feature is the new router. It’s fantastic news that it will be also used on the future Angular 2.0 as well.
Generate artistic QR code Demo
$ npm install qartjs
This is a simple implementation of QArt as React Component. react-qart
There is a directive available for using qart.js in Angular.js: angular-qart
There is a directive available for using qart.js in Vue.js 2.x : vue-qart
Clean Architecture & DDD Series
A great learning resource for anyone interested in Clean Architecture and Domain-Driven Design (DDD)
