time ago angularjs plugin allow to show the time in human readable format....
for example like few time ago,hours ago,etc Demo
In this tutorial I'm going to take you through building a simple authentication mechanism for AngularJS apps using JWTs (JSON web tokens) combined with local storage.
Workspace، اولین بار در انگیولار 6 معرفی شد. Angular Workspace به شما اجازه میدهد کل web application خود را به چندین پروژه‌ی کوچکتر سازماندهی کنید. بیشتر پروژه‌های کوچک انگیولار تنها شامل یک یا دو پروژه، به ازای هر Workspace می‌باشند. برای مثال وقتی شما یک پروژه‌ی جدید انگیولار را با Angular CLI ایجاد میکنید، در این حالت Workspace شامل یک app واقعی و یک پروژه e2e tests می‌باشد.
مستندات انگیولار یک پروژه را به صورت زیر توصیف می‌کند:
A set of files that comprise a standalone app, a library, or a set of end-to-end (e2e) tests.
شما می‌توانید دو نوع پروژه را ایجاد کنید : Application یا Library
درست همانند مفهوم یک کتابخانه در توسعه نرم افزار، یک کتابخانه اشاره دارد به مجموعه‌ای از کد‌های با قابلیت استفاده‌ی مجدد که می‌توانند بین پروژه‌های مختلف به اشتراک گذاشته شوند؛ هم چنین Angular CLI این کار را برای شما آسان می‌کند تا کتابخانه خودتان را در یک مرکز ثبت مثل npm انتشار دهید تا توسط دیگر توسعه دهندگان استفاده شود.
نوع Application اشاره به یک Application مستقل انگیولار دارد.
Create Empty Workspaces
در انگیولار 7 یک CLI option جدید ( create-application-- ) معرفی شد که شما می‌توانید با اضافه کردن این option به دستور ng new، سبب ایجاد یک Workspace خالی شوید. این option با دستور ng new استفاده میشود و می‌تواند مقدار true یا false را دریافت کند که به صورت پیش فرض به true تنظیم شده است. بنابراین وقتی شما یک پروژه‌ی جدید را ایجاد میکنید، سبب ایجاد یک پروژه‌ی اولیه انگیولار در Workspace هستید؛ همچنین می‌توانید create-application-- را به false تنظیم کنید تا CLI یک پروژه اولیه انگیولار را در Workspace ایجاد نکند .
اکنون اجازه دهید آن را در عمل ببینیم:
مطمئن شوید که نگارش انگیولار شما، 7 یا بالاتر باشد:
ng --version
ng new angular-apps --create-application=false
angular-apps/README.md angular-apps/angular.json angular-apps/package.json angular-apps/tsconfig.json angular-apps/tslint.json angular-apps/.editorconfig angular-apps/.gitignore
اکنون به Command Prompt برگردیم و وارد Angular Workspace خودمان شویم:
cd angular-apps
ng generate application admin
همچنین می‌توانید یک کتابخانه را در Workspace خود با استفاده از دستور زیر ایجاد کنید:
ng generate library ngx-qrcode
بعد از ایجاد کردن چندین Application بدون Application پیش فرض برای Workspace خود، می‌توانید اقدام به ایجاد modules ، service ، components و ... در یک پروژه مشخص با استفاده از project option-- کنید.
برای نمونه یک سرویس را در پروژه admin ایجاد میکنیم:
ng generate service auth --project=admin
projects/admin/src/app/auth.service.spec.ts projects/admin/src/app/auth.service.ts
Serving Specific Apps in Your Workspace
جهت به خدمت گرفتن یک Application مشخص در Workspace دستور زیر را اجرا کنید:
ng serve admin
نکته
اگر در Command Prompt دستور زیر را وارد کنید:
ng new
What name would you like to use for the new workspace and initial project?
نتیجه گیری
در این مطلب متوجه مفهوم Angular Workspace و روش ایجاد کردن یک Workspace خالی شدیم و همچنین چگونه یک Application و یک Library را در یک Workspace ایجاد کنیم.
This post will be comparing the performance of RyuJIT in .NET Framework 4.6.2 to its performance in .NET Core 2.0 and .NET Framework 4.7.1.
در این مقاله در خصوص موضوعی صحبت خواهم کرد که شاید مشکل اکثر برنامه نویسان باشد؛ مخصوصا در استفاده از پلاگین‌های jQuery در پروژه‌های AngularJS.
و در Controller
ما فرض میکنیم بعد از اینکه شهر‌ها در View به صورت لیست نمایش داده شدند، کاربر باید بتواند شهر‌ها را Drag کند و مکان آنها را با ماوس جابجا کند. برای این کار ما از تابع jQuery UI زیر استفاده میکنیم:
سوال سوم: خوب مشکل کجاست؟
این کد یک Directive جدید را در پروژه‌ی AngularJS شما تعریف می‌کند که توسط AngularJS قابل پردازش هست. این Directive را در View اضافه میکنم و کد View بالایی به کد زیر تغییر می‌کند:
اما این Directive چه عملی را انجام میدهد؟ این Directive توسط AngularJS پردازش شده و تابع init را که در مقدار ng-finish-render نوشته شده است، بعد از اتمام ng-repeat اجرا می‌کند. خوب تابع init را در controller می‌نویسیم؛ به کد زیر دقت کنید.
شما به همین راحتی می‌توانید از همه‌ی پلاگین‌های غیر AngularJS استفاده کنید و متوجه اتمام Render در View شوید.
مطمئنا برای شما هم پیش آمده که نیاز داشته باشید تابعی را بعد از اتمام Render در AngularJS صدا بزنید یا متوجه اتمام Render بشوید.
سوال اول: چرا این بحث مطرح هست؟
وقتی شما از AngularJS در پروژه‌ای استفاده میکنید و سبک کاری شما Model Based یا بهتر بگویم MVVM می‌باشد، عملیات Binding در View، توسط AngularJS انجام میشود و AngularJS توسط Watcherها تغییرات را در View اعمال می‌کند.
سوال دو: مشکل کجاست؟
مشکل اینجاست که چه موقعی Binding یا Render تمام میشود؟ فرض کنید شما یک لیست دارید و می‌خواهید در View نمایش دهید. مسلما از ng-repeat استفاده میکنید و AngularJS از مدلی که مشخص شده است موارد را خوانده و در View نمایش میدهد. فرض کنید همه‌ی این موارد باید توسط jQuery UI دارای قابلیت Draggable بشوند. اما چه موقعی تابع مربوطه را صدا بزنیم؟ از کجا مطمئن شویم که elementهای لیست شهر‌ها در View موجود هستند؟ کد زیر را نگاه کنید.
<div class="city" ng-repeat="item in items">
{{item.title}}
<div> $scope.items=[
{title:'اردبیل'},
{title:'تهران'},
{title:'تبریز'},
{title:'مشهد'},
{title:'اصفهان'}
]; $('.city').draggable(); سوال سوم: خوب مشکل کجاست؟
مشکل اینجاست که ما چه موقعی این تابع را صدا بزنیم تا مطمئن شویم که elementهای کلاس city در View موجود هستند و نسبت به تغییر لیست شهر که ممکن هست در طول اجرا این شهر‌ها کم یا زیاد شوند چه موقعی تابع jQuery UI را صدا بزنیم؟
سوال چهارم: راه حل چیست؟
در این چند سالی که من با AngularJS کار میکنم، از یک روش خیلی ساده استفاده میکنم و با همین روش از همه‌ی پلاگین‌های غیر AngularJS بدون تبدیل کردن این پلاگین‌ها به معادل AngularJS و یا گشتن چند ساعتی در اینترنت برای پیدا کردن پلاگین مشابه و منطبق با AngularJS که خیلی از مواقع هم پیدا نمی‌شوند، راحت شده‌ام. کد زیر را مشاهده کنید.
app.directive('ngFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$eval(attr.ngFinishRender);
}, 0);
}
}
}
}); <div class="city" ng-repeat="item in items" ng-finish-render="init()">
{{item.title}}
<div> $scope.items=[
{title:'اردبیل'},
{title:'تهران'},
{title:'تبریز'},
{title:'مشهد'},
{title:'اصفهان'}
];
$scope.init=function(){
$('.city').draggable();
} 
در قسمت قبل با نحوه پیاده سازی مسیریابی در AngularJs آشنا شدیم و در این پست میخواهیم نحوه تعریف و ارسال پارامترها به سیستم مسیریاب را فرا بگیریم.
در بالا ما پارامتری به نام orderId وارد کرده ایم که میتوانیم توسط routeParams$ در کنترلر به آن دست پیدا کنیم :
فراموش نکنید که باید پارامتر routeParams$ را به کنترلر خود تزریق کنید.
محتوای فایل index.html را نیز به صورت زیر تغییر دهید :
برنامه را اجرا کنید تا نتیجه را ببینید.
بارگزاری Viewهای محلی توسط تگ <script> :
برای درک بهتر مثالی را تهیه میکنیم .
سپس دو کنترلر زیر را نیز به آن اضافه کنید :
فایلی به نام index2.html برای صفحه اصلی برنامه با محتوای زیر تعریف کنید :
همانطور که مشاهده میکنید در کد بالا از 2 تگ اسکریپت برای قرار دادن محتوای View استفاده کرده ایم که خاصیت type آن برابر با text/ng-template و خاصیت id آن نام View template است و دیگر فایل مجزایی برای Viewها ایجاد نکردیم. Angular به صورت خودکار محتوای داخل تگ‌های Script را به محض فراخوانی آدرس‌های موجود در ویژگی id هر تگ به وسیله‌ی سیستم مسیر یابی، در داخل دایرکتیو ng-view قرار میدهد.
افزودن داده‌های سفارشی به سیستم مسیریابی :
در هر دو مسیر از کنترلر CommonController استفاده کرده ایم با این تفاوت که در مسیر اول یعنی AddNewOrder/ یک خاصیت با نام foodata با مقدار addorder تعریف شده است و در مسیر دوم با مقدار showorder.
مقدار موجود در آن را بخوانیم.
فرض کنید که میخواهیم در لیست سفارشات قسمتی داشته باشیم برای مشاهده‌ی جزئیات هر سفارش. پس در صفحه نمایش جزئیات کالا نیاز به کد محصول برای واکشی آن داریم. در Angular زمانی که داریم مسیر‌ها را تعریف میکنیم این امکان را هم داریم که پارامترهایی را هم برای هر مسیر مشخص کنیم. برای این کار فایل app.js مثال قبل را باز کنید و مسیر ذیل را به آن اضافه کنید :
when('/showOrderDetails/:orderId', {
templateUrl: 'templates/show_order.html',
controller: 'ShowOrderController'
}); myFirstRoute .controller('ShowOrderController', function($scope, $routeParams) {
$scope.order_id = $routeParams.orderId;
}); <body ng-app="myFirstRoute" style="
<div>
<div>
<div>
<table dir="rtl">
<thead>
<tr>
<th>#</th><th>˜کد</th><th>نام محصول</th><th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>1234</td><td>15" Samsung Laptop</td>
<td><a href="#showOrderDetails/1234">جزئیات محصول</a></td>
</tr>
<tr>
<td>2</td><td>5412</td><td>2TB Seagate Hard drive</td>
<td><a href="#showOrderDetails/5412">جزئیات محصول</a></td>
</tr>
<tr>
<td>3</td><td>9874</td><td>D-link router</td>
<td><a href="#showOrderDetails/9874">جزئیات محصول</a></td>
</tr>
</tbody>
</table>
<div ng-view></div>
</div>
</div>
</div>
<script src="js/bootstrap.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="app.js"></script>
</body> نکته‌ی مهم در کد بالا قرار دادن کد کالا بعد از مسیر است، مانند : showOrderDetails/5412 #
و محتویات فایل templates/show_order.html :
<h2>سفارش شماره #{{order_id}}</h2>
محل قرار گیری جزئیات سفارش شماره : <b>#{{order_id}}</b>. بارگزاری Viewهای محلی توسط تگ <script> :
در بعضی موارد لزومی ندارد که اطلاعات View را از یک فایل دیگر بخوانید و یا حتی اینقدر View شما کوچک است که تمایل دارید آن را به همراه فایل اصلی index.html حمل کنید به جای اینکه آن را در یک فایل جدا نگهداری کنید.
دایرکتیوی به نام ng-template وجود دارد که این امکان را به ما میدهد تا بتوانیم View templateهای کوچکمان را در داخل فایل اصلی قرار دهیم. با استفاده از تگ <script> به شکل زیر میشود این کار را انجام داد :
<script type="text/ng-template" id="add_order.html">
<h2> ثبت سفارش </h2>
{{message}}
</script> فایل app.js مثال قبل را باز کنید و مسیرهای زیر را نیز به آن اضافه کنید :
when('/AddNewOrder', {
templateUrl: 'add_order.html',
controller: 'AddOrderController'
}).
when('/ShowOrders', {
templateUrl: 'show_orders.html',
controller: 'ShowOrdersController'
}); myFirstRoute.controller('AddOrderController', function($scope) {
$scope.message = 'صفحه نمایش ثبت سفارش جدید';
});
myFirstRoute.controller('ShowOrdersController', function($scope) {
$scope.message = 'صفحه نمایش لیست سفارشات';
}); <body ng-app="myFirstRoute" style="
<div>
<div>
<div>
<ul>
<li><a href="#AddNewOrder"> ثبت سفارش جدید </a></li>
<li><a href="#ShowOrders"> نمایش شفارشات </a></li>
</ul>
</div>
<div>
<div ng-view></div>
</div>
</div>
</div>
<script type="text/ng-template" id="add_order.html">
<h2> ثبت سفارش </h2>
{{message}}
</script>
<script type="text/ng-template" id="show_orders.html">
<h2> نمایش سفارشات </h2>
{{message}}
</script>
<script src="js/bootstrap.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="app.js"></script>
</body> پروژه را اجرا کنید تا نتیجه را مشاهده کنید.
افزودن داده‌های سفارشی به سیستم مسیریابی :
بیشتر اوقات ممکن است نیاز داشته باشید تا داده‌های خاصی را در مسیرهای معینی ارسال کنید. برای مثال ممکن است شما بخواهید از یک کنترلر در مسیرهای مختلف استفاده کنید و برای هر مسیر یک داده‌ی خاص را نیز ارسال میکنید. به مثال زیر توجه کنید :
when('/AddNewOrder', {
templateUrl: 'templates/add_order.html',
controller: 'CommonController',
foodata: 'addorder'
}).
when('/ShowOrders', {
templateUrl: 'templates/show_orders.html',
controller: 'CommonController',
foodata: 'showorders'
});
sampleApp.controller('CommonController', function($scope, $route) {
//access the foodata property using $route.current
var foo = $route.current.foodata;
alert(foo);
}); ما میتوانیم با تزریق route$ به کنترلرمان، توسط دستور :
$route.current.foodata
- بله. گروه Web API و EF را در سایت پیگیری کنید.
- Web API یک بحث سمت سرور است. به آن به زبان ساده به چشم یک وب سرویس مدرن نگاه کنید. برای نمونه بجای وب‌متدهای استاتیک صفحات aspx یا فایل‌های ashx یا asmx و حتی سرویس‌های WCF از نوع REST و امثال آن، بهتر است از Web API استفاده کنید.
- برای نمونه پایه مباحثی مانند Forms Authentication در اینجا هم کاربرد دارد (البته این یک نمونه است).
- برای کار با Web API الزاما نیازی به ASP.NET ندارید (نه وب فرم‌ها و نه MVC)؛ به هیچکدام از نگارش‌های آن. سمت کاربر آن AngularJS و سمت سرور آن Web API باشد. کار می‌کند. (اهمیت این مساله در اینجا است که الان میشود یک فریم ورک جدید توسعه‌ی برنامه‌های وب را کاملا مستقل از وب فرم‌ها و MVC طراحی کرد)
- Web API یک بحث سمت سرور است. به آن به زبان ساده به چشم یک وب سرویس مدرن نگاه کنید. برای نمونه بجای وب‌متدهای استاتیک صفحات aspx یا فایل‌های ashx یا asmx و حتی سرویس‌های WCF از نوع REST و امثال آن، بهتر است از Web API استفاده کنید.
- برای نمونه پایه مباحثی مانند Forms Authentication در اینجا هم کاربرد دارد (البته این یک نمونه است).
- برای کار با Web API الزاما نیازی به ASP.NET ندارید (نه وب فرم‌ها و نه MVC)؛ به هیچکدام از نگارش‌های آن. سمت کاربر آن AngularJS و سمت سرور آن Web API باشد. کار می‌کند. (اهمیت این مساله در اینجا است که الان میشود یک فریم ورک جدید توسعه‌ی برنامه‌های وب را کاملا مستقل از وب فرم‌ها و MVC طراحی کرد)
"در کتاب ASP.NET Core: Cloud-ready, Enterprise Web Application Development ما از دو فریمورک مطرح استفاده میکنیم. از ASP.NET Core برای پوشش مفاهیم سمت سرور و از Angular 2 برای مباحث سمت کلاینت نه فقط به خاطر قابلیت‌های فوق العادشان و طراحی بی نقصشان، بلکه هر دوی آنها بازنویسی کاملی از نسخه‌های پیشین بسیار محبوبشان بودند که نقش رهبری در زمینه‌ی خودشان را بر عهده داشتند. "
یکسری قابلیت به روتر جدید (نگارش 3) و نهایی Angular 2 اضافه شده‌اند، مانند child routes و named routes که از ترکیب این‌ها چنین کاری را می‌توان انجام داد. از named routes برای داشتن چندین و چند router-outlet در صفحه استفاده میشود و هدایت محتوایی خاص به قسمتی خاص از صفحه و از child routes برای مخفی کردن روت‌های زیر مجموعه‌ی یک روت خاص. یک مثال
نگارش RC5 منتشر شد.
- جزئیات بیشتر
- تغییرات لازم جهت ارتقاء به RC5
+ راهنمای رسمی ارتقاء از RC4 به RC5
Angular 2 RC5 - NgModules, Lazy Loading and AoT compilation
RC5 represents our expected public API for our 2.0.0 release
- جزئیات بیشتر
- تغییرات لازم جهت ارتقاء به RC5
+ راهنمای رسمی ارتقاء از RC4 به RC5
Angular 2 RC5 - NgModules, Lazy Loading and AoT compilation
RC5 represents our expected public API for our 2.0.0 release