Angular 2 New Router Overview (خلاصه کاربردی از دیدگاه ارتقاء کدها)
Routing in Angular 2 revisited
Gulp #1
- راه اندازی یک وب سرور
- بارگذاری مجدد مرورگر به صورت خودکار بعد از ذخیرهی هر فایل
- تبدیل پیش پردازندههای CSS مانند LESS, SASS به CSS
- بهینه سازی فایلهای asset شامل CSS,JS و همچنین عکسها
چرا گالپ ؟
نصب گالپ
sudo npm install -g gulp
gulp -v
In this article, we'll walk you through updating an existing ASP.NET Core 1.x project to ASP.NET Core 2.0. Migrating your application to ASP.NET Core 2.0 enables you to take advantage of many new features and performance improvements.
روش استفادهی از jQuery نیز در حالت کلی همانند مطلب «استفاده از کتابخانههای ثالث جاوا اسکریپتی در برنامههای AngularJS 2.0» است؛ اما به همراه چند نکتهی اضافهتر مانند محل فراخوانی و دسترسی به DOM، در کدهای یک کامپوننت.
هدف: استفاده از کتابخانهی Chosen
میخواهیم جهت غنیتر کردن ظاهر یک دراپ داون در برنامههای AngularJS 2.0، از یک افزونهی بسیار معروف jQuery به نام Chosen استفاده کنیم.
تامین پیشنیازهای اولیه
میتوان فایلهای این کتابخانه را مستقیما از GitHub دریافت و به پروژه اضافه کرد. اما بهتر است اینکار را توسط bower مدیریت کنیم. این کتابخانه هنوز دارای بستهی رسمی npm نیست (و بستهی chosen-npm که در مخزن npm وجود دارد، توسط این تیم ایجاد نشدهاست). اما همانطور که در مستندات آن نیز آمدهاست، توسط دستور ذیل نصب میشود:
bower install chosen
در اینجا نام پیش فرض bower.json را پذیرفته و سپس محتوای فایل ایجاد شده را به نحو ذیل تغییر دهید:
{ "name": "asp-net-mvc5x-angular2x", "version": "1.0.0", "authors": [ "DNT" ], "license": "MIT", "ignore": [ "node_modules", "bower_components" ], "dependencies": { "chosen": "1.4.2" }, "devDependencies": { } }
پس از دریافت خودکار chosen، بستهی آنرا در مسیر bower_components\chosen واقع در ریشهی پروژه میتوانید مشاهده کنید.
استفاده از jQuery و chosen به صورت untyped
سادهترین و متداولترین روش استفاده از jQuery و افزونههای آن شامل موارد زیر هستند:
الف) تعریف مداخل مرتبط با آنها در فایل index.html
<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" />
ب) تعریف jQuery به صورت untyped
declare var jQuery: any;
محل صحیح فراخوانی متدهای مرتبط با jQuery
در تصویر ذیل، چرخهی حیات یک کامپوننت را مشاهده میکنید که با تعدادی از آنها پیشتر آشنا شدهایم:
روش متداول استفاده از jQuery، فراخوانی آن پس از رخداد document ready است. در اینجا معادل این رخداد، hook ویژهای به نام ngAfterViewInit است. بنابراین تمام فراخوانیهای jQuery را باید در این متد انجام داد.
همچنین جیکوئری نیاز دارد تا بداند هم اکنون قرار است با چه المانی کار کنیم و کامپوننت بارگذاری شده کدام است. برای این منظور، یکی از سرویسهای توکار AngularJS 2.0 را به نام ElementRef، به سازندهی کلاس تزریق میکنیم. توسط خاصیت this._el.nativeElement آن میتوان به المان ریشهی کامپوننت جاری دسترسی یافت.
constructor(private _el: ElementRef) { }
تهیهی کامپوننت نمایش یک دراپ داون مزین شده با chosen
در ادامه قصد داریم نکاتی را که تاکنون مرور کردیم، به صورت یک مثال پیاده سازی کنیم. به همین جهت فایل جدید using-jquery-addons.component.ts را به پروژه اضافه کنید به همراه فایل قالب آن به نام using-jquery-addons.component.html؛ با این محتوا:
الف) کامپوننت using-jquery-addons.component.ts
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; }); } }
ب) قالب using-jquery-addons.component.html
<select> <option *ngFor="let item of dropDownItems" [value]="item" [selected]="item == selectedValue"> {{item}} option </option> </select> <h4> {{selectedValue}}</h4>
توضیحات
کلاس UsingJQueryAddonsComponent، اینترفیس AfterViewInit را پیاده سازی کردهاست؛ تا توسط متد ngAfterViewInit بتوانیم با عناصر DOM کار کنیم. هرچند در کل اینکار باید صرفا محدود شود به مواردی مانند مثال جاری و در حد آغاز یک افزونهی jQuery و اگر قرار است تغییراتی دیگری صورت گیرند بهتر است از همان روش binding توکار AngularJS 2.0 استفاده کرد.
در سازندهی کلاس، سرویس ElementRef تزریق شدهاست تا توسط خاصیت this._el.nativeElement آن بتوان به المان ریشهی کامپوننت جاری دسترسی یافت. به همین جهت است که پس از آن از متد find، برای یافتن دراپ داون استفاده شدهاست و سپس chosen به نحو متداولی به آن اعمال گردیدهاست.
در اینجا هر زمانیکه یکی از آیتمهای دراپ داون انتخاب شوند، مقدار آن به خاصیت selectedValue انتساب داده شده و این انتساب سبب فعال سازی binding و نمایش مقدار آن در ذیل دراپ داون میگردد.
در قالب این کامپوننت هم با استفاده از ngFor، عناصر دراپ داون از آرایهی dropDownItems تعریف شده در کلاس کامپوننت، تامین میشوند. متغیر محلی item تعریف شدهی در اینجا، در محدودی همین المان قابل دسترسی است. برای مثال از آن جهت تنظیم دومین آیتم لیست به صورت انتخاب شده، در حین اولین بار نمایش view استفاده شدهاست.
استفاده از jQuery و chosen به صورت typed
کتابخانهی jQuery در مخزن کد https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/jquery دارای فایل d.ts. خاص خود است. برای نصب آن میتوان از روش ذیل استفاده کرد:
npm install -g typings typings install jquery --save --ambient
/// <reference path="../typings/browser/ambient/jquery/index.d.ts" />
در ادامه به فایل using-jquery-addons.component.ts مراجعه کرده و تغییر ذیل را اعمال کنید:
// declare var jQuery: any; // untyped declare var jQuery: JQueryStatic; // typed
interface JQuery { //... chosen(options?:any):JQuery; } declare module "jquery" { export = $; }
کدهای کامل این پروژه را از اینجا میتوانید دریافت کنید.
آموزش AngularJS به صورت تعاملی
رسم گانت چارت با dhtmlxGantt
این پروژه در 12 بخش گوناگون تقسیم بندی شدهاست که هر کدام در قالب یک فایل HTML میباشد و تمامی اسکریپتهای مورد نیاز به آن افزوده شدهاست. هر بخش به صورت مجزا به شرح یک ویژگی کاربردی در angular-translate میپردازد.
ex1_basic_usage
<script src="Scripts/angular.js"></script> <script src="Scripts/angular-translate.js"></script>
angular.module('app', ['pascalprecht.translate']) .config([ '$translateProvider', function ($translateProvider) { // Adding a translation table for the English language $translateProvider.translations('en_US', { "TITLE": "How to use", "HEADER": "You can translate texts by using a filter.", "SUBHEADER": "And if you don't like filters, you can use a directive.", "HTML_KEYS": "If you don't like an empty elements, you can write a key for the translation as an inner HTML of the directive.", "DATA_TO_FILTER": "Your translations might also contain any static ({{staticValue}}) or random ({{randomValue}}) values, which are taken directly from the model.", "DATA_TO_DIRECTIVE": "And it's no matter if you use filter or directive: static is still {{staticValue}} and random is still {{randomValue}}.", "RAW_TO_FILTER": "In case you want to pass a {{type}} data to the filter, you have only to pass it as a filter parameter.", "RAW_TO_DIRECTIVE": "This trick also works for {{type}} with a small mods.", "SERVICE": "Of course, you can translate your strings directly in the js code by using a $translate service.", "SERVICE_PARAMS": "And you are still able to pass params to the texts. Static = {{staticValue}}, random = {{randomValue}}." }); // Adding a translation table for the Russian language $translateProvider.translations('ru_RU', { "TITLE": "Как пользоваться", "HEADER": "Вы можете переводить тексты при помощи фильтра.", "SUBHEADER": "А если Вам не нравятся фильтры, Вы можете воспользоваться директивой.", "HTML_KEYS": "Если вам не нравятся пустые элементы, Вы можете записать ключ для перевода в как внутренний HTML директивы.", "DATA_TO_FILTER": "Ваши переводы также могут содержать любые статичные ({{staticValue}}) или случайные ({{randomValue}}) значения, которые берутся прямо из модели.", "DATA_TO_DIRECTIVE": "И совершенно не важно используете ли Вы фильтр или директиву: статическое значение по прежнему {{staticValue}} и случайное - {{randomValue}}.", "RAW_TO_FILTER": "Если вы хотите передать \"сырые\" ({{type}}) данные фильтру, Вам всего лишь нужно передать их фильтру в качестве параметров.", "RAW_TO_DIRECTIVE": "Это также работает и для директив ({{type}}) с небольшими модификациями.", "SERVICE": "Конечно, Вы можете переводить ваши строки прямо в js коде при помощи сервиса $translate.", "SERVICE_PARAMS": "И вы все еще можете передавать параметры в тексты. Статическое значение = {{staticValue}}, случайное = {{randomValue}}." }); // Tell the module what language to use by default $translateProvider.preferredLanguage('en_US'); }])
.controller('ctrl', ['$scope', '$translate', function ($scope, $translate) { $scope.tlData = { staticValue: 42, randomValue: Math.floor(Math.random() * 1000) }; $scope.jsTrSimple = $translate.instant('SERVICE'); $scope.jsTrParams = $translate.instant('SERVICE_PARAMS', $scope.tlData); $scope.setLang = function (langKey) { // You can change the language during runtime $translate.use(langKey); // A data generated by the script have to be regenerated $scope.jsTrSimple = $translate.instant('SERVICE'); $scope.jsTrParams = $translate.instant('SERVICE_PARAMS', $scope.tlData); }; }]);
<p> <a href="#" ng-click="setLang('en_US')">English</a> | <a href="#" ng-click="setLang('ru_RU')">Русский</a> </p> <!-- Translation by a filter --> <h1>{{'HEADER' | translate}}</h1> <!-- Translation by a directive --> <h2 translate="SUBHEADER">Subheader</h2> <!-- Using inner HTML as a key for translation --> <p translate>HTML_KEYS</p> <hr> <!-- Passing a data object to the translation by the filter --> <p>{{'DATA_TO_FILTER' | translate: tlData}}</p> <!-- Passing a data object to the translation by the directive --> <p translate="DATA_TO_DIRECTIVE" translate-values="{{tlData}}"></p> <hr> <!-- Passing a raw data to the filter --> <p>{{'RAW_TO_FILTER' | translate:'{ type: "raw" }' }}</p> <!-- Passing a raw data to the filter --> <p translate="RAW_TO_DIRECTIVE" translate-values="{ type: 'directives' }"></p> <hr> <!-- Using a $translate service --> <p>{{jsTrSimple}}</p> <!-- Passing a data to the $translate service --> <p>{{jsTrParams}}</p>
ex2_remember_language_cookies
<script src="Scripts/angular-cookies.js"></script> <script src="Scripts/angular-translate-storage-cookie.js"></script>
// Tell the module to store the language in the cookie $translateProvider.useCookieStorage();
ex3_remember_language_local_storage
این مثال همانند مثال قبل رفتار میکند، با این تفاوت که به جای اینکه کلید زبان کنونی را درون کوکی ذخیره کند، آن را درون Local Storage با نام NG_TRANSLATE_LANG_KEY قرار میدهد. برای اجرا کافیست اسکریپتها و تکه کد زیر را با موارد مثال قبل جایگزین کنید.
<script src="Scripts/angular-translate-storage-local.js"></script> // Tell the module to store the language in the local storage $translateProvider.useLocalStorage();
مثال های ex4_set_a_storage_key و ex5_set_a_storage_prefix نام کلیدی که برای ذخیره سازی زبان کنونی در کوکی یا Local Storage قرار میگیرد را تغییر میدهد که به دلیل سادگی از شرح آن میگذریم.
ex6_namespace_support
translate table در angular-translate قابلیت مفید namespacing را نیز داراست. این قابلیت به ما کمک میکند که جهت کپسوله کردن بخشهای مختلف، ترجمه آنها را با namespaceهای خاص خود نمایش دهیم. به مثال زیر توجه کنید:
$translateProvider.translations('en_US', { "TITLE": "How to use namespaces", "ns1": { "HEADER": "A translations table supports namespaces.", "SUBHEADER": "So you can to structurize your translation table well." }, "ns2": { "HEADER": "Do you want to have a structured translations table?", "SUBHEADER": "You can to use namespaces now." } });
همانطور که توجه میکنید بخش ns1 خود شامل زیر مجموعههایی است و ns2 نیز به همین صورت. هر کدام دارای کلید HEADER و SUBHEADER میباشند. فرض کنید هر کدام از این بخشها میخواهند اطلاعات درون یک section را نمایش دهند. حال به نحوهی فراخوانی این translate tableها دقت کنید:
<!-- section 1: Translate Table Called by ns1 namespace --> <h1 translate>ns1.HEADER</h1> <h2 translate>ns1.SUBHEADER</h2> <!-- section 2: Translate Table Called by ns2 namespace --> <h1 translate>ns2.HEADER</h1> <h2 translate>ns2.SUBHEADER</h2>
به همین سادگی میتوان تمامی بخشها را با namespaceهای مختلف در translate table قرار داد.
در بخش بعدی (پایانی) شش قابلیت دیگر angular translate که شامل فراخوانی translate table از یک فایل JSON، فراخوانی فایلهای translate table به صورت lazy load و تغییر زبان بخشی از صفحه به صورت پویا هستند، بررسی خواهند شد.
فایل پروژه: AngularJs-Translate-BestPractices.zip
کتابخانه angular-gauge
angular-gauge is a highly customizable gauge directive for Angular JS apps and dashboards. It provides multitude of options to customize as per your needs. Demo
npm install angularjs-gauge
bower install angularjs-gauge