In development world, you may get a requirement from your client, they wants a weekly, quarterly and yearly charts. You always think, how can I make charts with use of angularjs. So today, in this article, we are going to learn
In this example, our requirement is, we have dropdownlist of student names. if user select any student, it will show selected students marks in the form of charts.
Course Introduction Module Introduction Introduction to Angular Angular Architecture Demo: Hello World in Angular The Angular Event Reg Application Angular Seed Summary
<div ng-show="has">
<div ng-repeat="item in items">
<span>{{item.title}}</span>
</div>
</div> <div ng-if="has">
<div ng-repeat="item in items">
<span>{{item.title}}</span>
</div>
</div> پس اگر قصد توسعه SPA با هر فریمورکی مثل angular را داشته باشید، این را در نظر داشته باشید که دیر یا زود هنگام استفاده از افزونه‌های جی‌کوئری به مشکل برخواهید خورد.
بیشتر امکانات تو کار ASP.NET MVC را از دست خواهید داد
به هنگام توسعه‌ی برنامه با استفاده از فریم ورک‌های SPA، امکانات توکار ASP.NET MVC مثل اعتبارسنجی یکپارچه و strongly typed viewها را از دست خواهید داد. شاید یک سری پروژه در Github پیدا کنید که سعی کرده‌اند این‌ها را با یکدیگر سازگار کنند. اما به محض استفاده متوجه می‌شوید که اگر همه‌ی کارها را خودتان با Angular انجام بدهید راحت‌تر هستید تا استفاده از کتابخانه‌های آزمایشی و ناقص.
البته باز هم نمی‌گویم که این‌ها تقصیر AngularJS است. ذات توسعه‌ی SPAها، این گونه است و در توسعه‌ی SPA با هر فریمورکی به این مشکلات برخواهید خورد.
حال که یکسری مشکلات عمومی را بررسی کردیم، بدنیست نگاهی اختصاصی به خود AngularJS بیندازیم.
ضعف طراحی
اگر به تعدای از لینک‌های سایت ihateangular مراجعه کنید می‌بینید که هر کسی نظری دارد: یکی می‌گوید به هیچ وجه Directive ننویسید، یکی دیگر می‌گوید کنترلر ننویسید و تمامی کارها را در directiveهای سفارشی نوشته شده توسط خودتان انجام بدهید، کلا همه جا علیه performance این فریمورک صحبت می‌کنند و همگی به پیچیده بودن آن اذعان دارند.
نتیجه گیری
AngularJS فریمورک خیلی خوبی برای نوشتن برنامه‌های تست پذیر است و کسی منکر قابلیت‌های آن نیست. ولی این را نیز در نظر بگیرید که برای تست پذیر بودن، خیلی چیزها از جمله سادگی کار را از دست می‌دهید. معمولا می‌گویند که AngularJS کارهای مشکل را ساده می‌کند و کارهای ساده را مشکل.
پیشنهاد من این است که اگر هنوز AngularJS را فرا نگرفته‌اید، حداقل یادگیری آن را تا انتشار نسخه‌ی 2 آن به تعویق بیندازید. اگر AngularJS را بلد هستید، دیگر آن را در پروژه‌ای استفاده نکنید؛ چون دیگر کدهای شما در نسخه‌ی 2 کار نخواهد کرد و احتیاج به انجام تغییرات گسترده‌ای در کدهای نوشته شده قبلی پیدا می‌کنید.
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();
} <div>نام و نام خانوادگی: {{name}}</div>
<div>معدل: {{avg()}}<div> scope.nums=[19,20,17,16,15,18,19];
scope.name='بهنام محمدی';
scope.avg= function(){
return scope.nums.reduce(function(previousValue, currentValue) {
return previousValue + currentValue;
})/scope.nums.length;
} نام و نام خانوادگی: بهنام محمدی معدل:17.71
var nums=[19,20,17,16,15,18,19];
scope.name='بهنام محمدی';
scope.avg= function(){
return nums.reduce(function(previousValue, currentValue) {
return previousValue + currentValue;
})/nums.length;
} 
// JavaScript
var vm = {
firstName = ko.observable('John')
};
ko.applyBindings(vm); <!-- HTML --> <input data-bind="value:firstName"/>
// JavaScript // Inside of a personController this.firstName = 'John';
<!-- HTML -->
<div ng-controller="personController as vm">
<input ng-model="vm.firstName"/>
</div> Choosing the right framework for your projects is a daunting task and can affect the completion of the project in stipulated time period. Five widely used frameworks- AngularJS, ReactJs, Knockout, Backbone and Ember give an option along with putting your knowledge to test to make a smart choice.
