اشتراکها
چند مطلب تکمیلی در مورد فرمهای RC3
Template-driven Forms in Angular 2
Model-driven Forms in Angular 2
Custom Validators in Angular 2
Template-driven Forms in Angular 2
Model-driven Forms in Angular 2
Custom Validators in Angular 2
از زمان Angular 2 به بعد، تنها یک نام برای نگارشهای جدید آن درنظر گرفته شدهاست و آن هم «Angular» است. بنابراین در اینجا منظور از Angular همان +AngularJS 2.0 است.
ایجاد و توزیع برنامههای جدید AngularJS به همراه تمام وابستگیهای آنها و همچنین رعایت بهترین تجربههای کاری آن، اندکی مشکل است. به همین جهت تیم Angular برنامهای را به نام Angular CLI تدارک دیدهاست که تمام این مراحل را به سادگی هرچه تمامتر مدیریت میکند. ممکن است قالبهای زیادی را در مورد شروع به کار با AngularJS 2.0+ در وب پیدا کنید؛ اما هیچکدام از آنها تمام قابلیتهای Angular CLI را ارائه نمیدهند و همواره چندین قدم عقبتر از تیم Angular هستند. به همین جهت در طی یک سری قصد داریم قابلیتهای گوناگون این ابزار را بررسی کنیم.
Angular CLI چیست؟
ایجاد برنامههای جدید Angular لذت بخش هستند؛ اما ایجاد برنامههایی که از بهترین تجربههای کاری توصیه شدهی توسط تیم Angular پیروی میکنند، به همراه Unit tests هستند و همچنین برای توزیع بهینه سازی شدهاند، بسیار چالش برانگیز میباشند. به همین جهت برنامهی خط فرمانی به نام Angular CLI برای مدیریت این مسایل توسط تیم Angular ایجاد شدهاست، تا توسعه دهندگان بیشتر وقت خود را صرف بهینه سازی کدهای خود کنند تا اینکه درگیر تدارک مسایل جانبی این فریم ورک باشند.
اگر به پروژههای سورس باز ارائه شدهی جهت شروع کار با +AngularJS 2.0 دقت کنید، تعداد بیشماری پروژهی seed، قالبهای آماده، کدساز و غیره را خواهید یافت. اکثر آنها تفاوتهای قابل ملاحظهای را با یکدیگر داشته و در اغلب موارد بهترین تجربههای کاری Angular را نیز رعایت نمیکنند. برای مثال خبری از style guide آن و یا مباحث بهینه سازی ساخت و توزیع لحاظ شدهی در نگارشهای جدید Angular، در آنها نیست.
در اینجا بود که تیم Angular تصمیم گرفت تا در جهت ساماندهی به این وضعیت آشفته، برنامهی Angular CLI را ایجاد کند تا برنامه نویسها به همراه ابزاری باشند که بر اساس بهترین تجربههای کاری Angular تهیه شدهاست؛ سبب ایجاد برنامههایی خواهد شد که یکدست به نظر میرسند و همچنین همواره آخرین تغییرات توزیع و آزمایش برنامهها را نیز به همراه دارد.
پیشنیازهای نصب Angular CLI
پیش از شروع به نصب Angular CLI باید مطمئن شوید که آخرین نگارش NodeJS را نصب کردهاید. برای این منظور خط فرمان را گشوده و دستور ذیل را صادر کنید:
در اینجا نگارش نصب شدهی بر روی سیستم من 5.10 است که برای کار با Angular CLI مناسب نیست و این برنامهی خط فرمان، حداقل نیاز به نصب نگارش 6.9 آنرا دارد. به همین جهت نیاز است به آدرس https://nodejs.org/en/download مراجعه کرده و آخرین نگارش node.js را دریافت و نصب کرد.
اگر این مطلب را در چند ماه بعد پس از نگارش آن مطالعه میکنید، به پروژهی Angular CLI مراجعه کرده و قسمت Prerequisites مستندات ابتدایی آنرا برای مشاهدهی آخرین نگارش NodeJS مورد نیاز آن، بررسی کنید.
نصب Angular CLI
پس از نصب پیشنیاز آن، اکنون خط فرمان را گشوده و دستور ذیل را صادر کنید:
به این ترتیب پس از چند دقیقه، Angular CLI به صورت global و عمومی نصب خواهد شد.
پس از نصب آن، جهت اطمینان از عملیات انجام شده، دستور ذیل را در خط فرمان صادر کنید:
کار سوئیچ list، ارائه گزارشی از بستههای عمومی نصب شدهی با نام angular/cli@ است. depth=0 به این معنا است که نیازی به تهیه لیستی از وابستگیهای آن نیست. برای نمونه خروجی آن میتواند به صورت ذیل باشد:
و همچنین برای مشاهدهی نگارش CLI نصب شده، دستور ذیل را اجرا نمائید:
در اینجا ng همان Angular CLI است.
ایجاد یک برنامهی جدید توسط Angular CLI
پس از نصب Angular CLI، اکنون میتوان از آن جهت ساخت یک برنامهی جدید Angular استفاده کرد. برای این منظور یک پوشهی جدید را ایجاد کرده و سپس از طریق خط فرمان به آن وارد شده (نگه داشتن دکمهی shift و سپس کلیک راست و انتخاب گزینهی Open command window here) و دستور ذیل را صادر کنید:
ng به معنای اجرای Angular CLI است. پارامتر new آن سبب ایجاد یک برنامهی جدید خواهد شد و پارامتر skip-install آن، کار فراخوانی خودکار npm install را لغو میکند. به این ترتیب میتوان در سریعترین زمان ممکن، یک برنامهی Angular را ایجاد کرد.
در اینجا ساختار یک پروژهی جدید Angular را مشاهده میکنید.
داخل پوشهی src، فایلهای اصلی پروژه قرار دارند:
- فایل main.ts نقطهی آغاز برنامه است.
با توجه به استفادهی از پارامتر skip-install، هنوز وابستگیهای فایل package.json نصب نشدهاند. برای این منظور به پوشهی اصلی پروژه وارد شده (جایی که پوشهی ngtest و فایل package.json قرار دارد) و دستور npm install را صادر کنید تا وابستگیهای برنامه نیز دریافت شوند. البته اگر از پارامتر یاد شده استفاده نمیشد، اینکار به صورت خودکار توسط ng new انجام میگرفت.
به این ترتیب وابستگیهای پروژه در پوشهی node_modules تشکیل خواهند شد.
به روز رسانی Angular CLI
روش به روز رسانی AngularCLI شامل این مراحل است:
الف) به روز رسانی بستهی عمومی نصب شدهی آن
ابتدا باید نگارش موجود عزل شود. سپس cache قدیمی مربوط به npm نیز باید پاک شود و پس از آن نیاز است مجددا آخرین نگارش cli نصب گردد.
ب) به روز رسانی یک برنامهی محلی
در ادامه به پوشهی برنامهی خود وارد شده و دستورات ذیل را اجرا کنید:
این دستورات ابتدا پوشههای node_modules و همچنین dist قبلی را پاک میکنند. دستور بعدی، کار به روز رسانی وابستگیهای package.json را انجام میدهد و در آخر دستور npm install، تغییرات فایل package.json را دریافت و نصب میکند.
مورد «الف» را به ازای هر نگارش جدید CLI، تنها یکبار باید انجام داد. اما مورد «ب» به ازای هر پروژهی موجود باید یکبار انجام شود (که سریعترین روش به روز رسانی وابستگیهای یک برنامه، به آخرین نگارش Angular است).
ایجاد و توزیع برنامههای جدید AngularJS به همراه تمام وابستگیهای آنها و همچنین رعایت بهترین تجربههای کاری آن، اندکی مشکل است. به همین جهت تیم Angular برنامهای را به نام Angular CLI تدارک دیدهاست که تمام این مراحل را به سادگی هرچه تمامتر مدیریت میکند. ممکن است قالبهای زیادی را در مورد شروع به کار با AngularJS 2.0+ در وب پیدا کنید؛ اما هیچکدام از آنها تمام قابلیتهای Angular CLI را ارائه نمیدهند و همواره چندین قدم عقبتر از تیم Angular هستند. به همین جهت در طی یک سری قصد داریم قابلیتهای گوناگون این ابزار را بررسی کنیم.
Angular CLI چیست؟
ایجاد برنامههای جدید Angular لذت بخش هستند؛ اما ایجاد برنامههایی که از بهترین تجربههای کاری توصیه شدهی توسط تیم Angular پیروی میکنند، به همراه Unit tests هستند و همچنین برای توزیع بهینه سازی شدهاند، بسیار چالش برانگیز میباشند. به همین جهت برنامهی خط فرمانی به نام Angular CLI برای مدیریت این مسایل توسط تیم Angular ایجاد شدهاست، تا توسعه دهندگان بیشتر وقت خود را صرف بهینه سازی کدهای خود کنند تا اینکه درگیر تدارک مسایل جانبی این فریم ورک باشند.
اگر به پروژههای سورس باز ارائه شدهی جهت شروع کار با +AngularJS 2.0 دقت کنید، تعداد بیشماری پروژهی seed، قالبهای آماده، کدساز و غیره را خواهید یافت. اکثر آنها تفاوتهای قابل ملاحظهای را با یکدیگر داشته و در اغلب موارد بهترین تجربههای کاری Angular را نیز رعایت نمیکنند. برای مثال خبری از style guide آن و یا مباحث بهینه سازی ساخت و توزیع لحاظ شدهی در نگارشهای جدید Angular، در آنها نیست.
در اینجا بود که تیم Angular تصمیم گرفت تا در جهت ساماندهی به این وضعیت آشفته، برنامهی Angular CLI را ایجاد کند تا برنامه نویسها به همراه ابزاری باشند که بر اساس بهترین تجربههای کاری Angular تهیه شدهاست؛ سبب ایجاد برنامههایی خواهد شد که یکدست به نظر میرسند و همچنین همواره آخرین تغییرات توزیع و آزمایش برنامهها را نیز به همراه دارد.
پیشنیازهای نصب Angular CLI
پیش از شروع به نصب Angular CLI باید مطمئن شوید که آخرین نگارش NodeJS را نصب کردهاید. برای این منظور خط فرمان را گشوده و دستور ذیل را صادر کنید:
C:\>node -v v5.10.1
اگر این مطلب را در چند ماه بعد پس از نگارش آن مطالعه میکنید، به پروژهی Angular CLI مراجعه کرده و قسمت Prerequisites مستندات ابتدایی آنرا برای مشاهدهی آخرین نگارش NodeJS مورد نیاز آن، بررسی کنید.
نصب Angular CLI
پس از نصب پیشنیاز آن، اکنون خط فرمان را گشوده و دستور ذیل را صادر کنید:
C:\>npm install -g @angular/cli
پس از نصب آن، جهت اطمینان از عملیات انجام شده، دستور ذیل را در خط فرمان صادر کنید:
C:\>npm list -g @angular/cli --depth=0
C:\>npm list -g @angular/cli --depth=0 C:\Users\Vahid\AppData\Roaming\npm `-- @angular/cli@1.0.0
و همچنین برای مشاهدهی نگارش CLI نصب شده، دستور ذیل را اجرا نمائید:
C:\>ng -v _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ @angular/cli: 1.0.0 node: 6.10.2 os: win32 x64
ایجاد یک برنامهی جدید توسط Angular CLI
پس از نصب Angular CLI، اکنون میتوان از آن جهت ساخت یک برنامهی جدید Angular استفاده کرد. برای این منظور یک پوشهی جدید را ایجاد کرده و سپس از طریق خط فرمان به آن وارد شده (نگه داشتن دکمهی shift و سپس کلیک راست و انتخاب گزینهی Open command window here) و دستور ذیل را صادر کنید:
> ng new ngtest --skip-install
در اینجا ساختار یک پروژهی جدید Angular را مشاهده میکنید.
فایل | توضیحات |
.angular-cli.json | تنظیمات cli را به همراه دارد. |
editorconfig | مربوط به تنظیمات VSCode است. |
karma.conf.js | برای انجام unit tests است. |
package.json | وابستگیهای npm برنامه را به همراه دارد (که در زمان نگارش این مطلب تنظیمات Angular 4 را به همراه دارد). |
protractor.conf.js | برای اجرای آزمونهای end to end که در اینجا e2e نام گرفتهاست، میباشد. |
tsconfig.json | تنظیمات کامپایلر TypeScript را به همراه دارد. |
tslint.json | جهت اجرای Lint و ارائهی بهترین تجربههای کاری با TypeScript است. |
داخل پوشهی src، فایلهای اصلی پروژه قرار دارند:
- فایل index.html کار ارائه و شروع برنامه را انجام میدهد.
- فایل main.ts نقطهی آغاز برنامه است.
با توجه به استفادهی از پارامتر skip-install، هنوز وابستگیهای فایل package.json نصب نشدهاند. برای این منظور به پوشهی اصلی پروژه وارد شده (جایی که پوشهی ngtest و فایل package.json قرار دارد) و دستور npm install را صادر کنید تا وابستگیهای برنامه نیز دریافت شوند. البته اگر از پارامتر یاد شده استفاده نمیشد، اینکار به صورت خودکار توسط ng new انجام میگرفت.
>npm install
به این ترتیب وابستگیهای پروژه در پوشهی node_modules تشکیل خواهند شد.
به روز رسانی Angular CLI
روش به روز رسانی AngularCLI شامل این مراحل است:
الف) به روز رسانی بستهی عمومی نصب شدهی آن
npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest
ب) به روز رسانی یک برنامهی محلی
در ادامه به پوشهی برنامهی خود وارد شده و دستورات ذیل را اجرا کنید:
rm rmdir /S/Q node_modules dist npm install --save-dev @angular/cli@latest npm install
مورد «الف» را به ازای هر نگارش جدید CLI، تنها یکبار باید انجام داد. اما مورد «ب» به ازای هر پروژهی موجود باید یکبار انجام شود (که سریعترین روش به روز رسانی وابستگیهای یک برنامه، به آخرین نگارش Angular است).
یک نکتهی تکمیلی
روش توصیهی شدهی توسط تیم AngularJS 2.0، جهت توزیع برنامهها به این صورت است:
1) ابتدا برنامهی جدید angular-cli را نصب کنید: (بدیهی است پیش از آن باید وابستگیهای Nodejs بر روی سیستم شما نصب باشند)
2) با دستور ذیل، یک برنامهی جدید AngularJS 2.0 را به همراه تمام وابستگیهای آن، میتوانید آغاز کنید:
ابتدا به پوشهی مدنظر وارد شده و سپس در خط فرمان، دستور فوق را وارد کنید. به این ترتیب ساختار یک برنامهی جدید AngularJS 2.0 را خواهید داشت.
3) اکنون اگر دستور ذیل را صادر کنید:
به صورت خودکار، کار بسته بندی و توزیع نهایی برنامه، در پوشهای به نام dist، انجام خواهد شد.
دو مطلب تکمیلی
Angular CLI is here for AngularJS 2
Angular 2 CLI – Build Angular 2 apps using Command Line Interface
روش توصیهی شدهی توسط تیم AngularJS 2.0، جهت توزیع برنامهها به این صورت است:
1) ابتدا برنامهی جدید angular-cli را نصب کنید: (بدیهی است پیش از آن باید وابستگیهای Nodejs بر روی سیستم شما نصب باشند)
npm install -g angular-cli
ng new AngularCLIDemoApp
3) اکنون اگر دستور ذیل را صادر کنید:
ng build -prod
دو مطلب تکمیلی
Angular CLI is here for AngularJS 2
Angular 2 CLI – Build Angular 2 apps using Command Line Interface
مسیرراهها
+AngularJS 2.0
شروع به کار با AngularJS 2.0 و TypeScript
- قسمت اول - نصب پیشنیازها
- قسمت دوم - معرفی کامپوننتها
- قسمت سوم - غنی سازی کامپوننتها
- قسمت چهارم - data binding
- قسمت پنجم - بررسی چرخهی حیات کامپوننتها
- قسمت ششم - کامپوننتهای تو در تو
- قسمت هفتم - سرویسها و تزریق وابستگیها
- قسمت هشتم - دریافت اطلاعات از سرور
- قسمت نهم - مسیریابی
- «مسیریابی در Angular»
- قسمت دهم - کار با فرمها - قسمت اول
- قسمت یازدهم - کار با فرمها - قسمت دوم
- قسمت دوازدهم - توزیع برنامه
- «سری آموزشی Angular CLI»
فرمهای مبتنی بر قالبها در Angular
- قسمت اول - معرفی و ایجاد ساختار برنامه
- قسمت دوم - ایجاد اولین فرم
- قسمت سوم - Data binding
- قسمت چهارم - اعتبارسنجی ورودیها
- قسمت پنجم - ارسال اطلاعات به سرور
- نوشتن اعتبارسنجهای سفارشی
- اعتبارسنجی از راه دور در فرمهای مبتنی بر قالبهای Angular
Angular Animation
آپلود فایل
- بررسی روش آپلود فایلها از طریق یک برنامهی Angular به یک برنامهی ASP.NET Core
- کامپوننت ng2-file-upload
طراحی یک گرید با Angular و ASP.NET Core
Angular Material 6x
- قسمت اول - افزودن آن به برنامه
- قسمت دوم - معرفی Angular Flex layout
- قسمت سوم - طرحبندی برنامه
- قسمت چهارم - نمایش پویای اطلاعات تماسها
- قسمت پنجم - کار با Data Tables
- قسمت ششم - کار با فرمها و دیالوگها
- قسمت هفتم - کار با انواع قالبها
- قسمت هشتم - جستجوی کاربران توسط AutoComplete
- شمسی سازی Date-Picker توکار Angular Material 6x
راهاندازی Http Interceptor
استفاده از کتابخانهی moment-jalaali در برنامههای Angular
امکان تعریف قالبها در Angular با دایرکتیو ng-template
روشهایی برای مدیریت بهتر عملگرهای RxJS در برنامههای Angular
ارتقاء به HTTP Client در Angular 4.3
استفاده از کتابخانهی moment-jalaali در برنامههای Angular
امکان تعریف قالبها در Angular با دایرکتیو ng-template
روشهایی برای مدیریت بهتر عملگرهای RxJS در برنامههای Angular
ارتقاء به HTTP Client در Angular 4.3
- ابزارهای توسعه
مسیرراهها
AngularJS
- به اشتراک گذاری دادهها بین کنترلرها در AngularJs
- آشنایی با Directiveها در AngularJs
- ارتباط بین Controller و Directive در AngularJs
- inject$ در AngularJs
- روش Controller as در AngularJs
- ارث بری کنترلرها در AngularJs
- پیاده سازی کنترلرهای Angular با استفاده از Typescript
- واکشی اطلاعات سرویس Web Api با استفاده از TypeScript و AngularJs
- تفاوت AngularJS با KnockoutJS
- آشنایی با Promises در جاوا اسکریپت
- بررسی angular.bootstrap
- خواندن اطلاعات از سرور و نمایش آن توسط Angular در ASP.NET MVC
- ساختار پروژههای Angular
- یک نکته درباره Angular routeProvider
- مسیریابی تو در تو در Angularjs با استفاده از UI-Router
- Lazy Loading در AngularJS
- بررسی خروجی IsAjaxRequest در درخواستهای http$ توسط AngularJS
- بررسی سرویسهای on$ و emit$ و broadcast$ در AngularJs
- آشنایی بیشتر با AngularJS Directive
- چگونگی استفاده از افزونه Isotope در AngularJS
- نمایش تاریخ شمسی توسط JavaScript در AngularJS
- توسعه سرویسهای Angular به روش OOP
- Angular Interceptors
- پیاده سازی Template تو در تو در AngularJS و ASP.NET MVC
- ارث بری prototype ای در جاوا اسکریپت به زبان خیلی ساده
- زیرنویس فارسی ویدئوهای مقدمات AngularJS - قسمت اول
- زیرنویس فارسی ویدئوهای مقدمات AngularJS - قسمت دوم
- زیرنویس فارسی ویدئوهای مقدمات AngularJS - قسمت سوم
- زیرنویس فارسی ویدئوهای مقدمات AngularJS - قسمت چهارم
- زیرنویس فارسی ویدئوهای مقدمات AngularJS - قسمت پنجم
- زیرنویس فارسی ویدئوهای مقدمات AngularJS - قسمت ششم (قسمت آخر)
اشتراکها
شروع کار با Angular 2
KendoUI در اساس یک سری کامپوننت است که به صورت افزونههای jQuery تهیه شدهاند (که به همراه فایلهای تعاریف TypeScript هم هستند). بنابراین مطلب «روش استفادهی از jQuery در برنامههای AngularJS 2.0» در مورد آن صادق است. همچنین تیم KendoUI به صورت اختصاصی در حال تهیهی کامپوننتهای مخصوص AngularJS 2.0 است: Kendo UI for Angular 2
در مورد این کامپوننتهای ویژه در «Kendo UI R3'16 Release Webinar» یک دموی مفصل ارائه شدهاست.
در مورد این کامپوننتهای ویژه در «Kendo UI R3'16 Release Webinar» یک دموی مفصل ارائه شدهاست.
مثالهای این سری به نگارش RC2 به روز رسانی شدند. تغییرات صورت گرفته را در اینجا میتوانید مشاهده کنید.
خلاصهی آن در مورد «فرمهای reactive جدید» به صورت زیر است:
1- به فایل systemjs.config.js، در قسمت ngPackageNames نام forms هم اضافه میشود. این forms از طریق وابستگی زیر
که به فایل package.json اضافه میشود، تامین خواهد شد.
2- به فایل main.ts این تغییرات اضافه میشوند:
3- در کدها هرجایی Control هست، به FormControl تبدیل میشود که از ماژول ذیل تامین خواهد شد:
4- ngFormModel به formGroup تغییرنام خواهد یافت. این دایرکتیو جدید به صورت زیر تامین میشود:
5- تمام inputها باید دارای name باشند. در غیراینصورت خطا خواهید گرفت.
6- Validators اینبار از ماژول ذیل تامین میشود:
بجای ماژول قدیمی angular/common. اگر این تغییر را اعمال نکنید، امکان استفادهی از آنها را در new FormControl نخواهید داشت.
7- FormBuilder سازگاری با reactive forms جدید ندارد و با FormGroup جایگزین شد.
خلاصهی آن در مورد «فرمهای reactive جدید» به صورت زیر است:
1- به فایل systemjs.config.js، در قسمت ngPackageNames نام forms هم اضافه میشود. این forms از طریق وابستگی زیر
"dependencies": { "@angular/forms": "^0.1.0", },
2- به فایل main.ts این تغییرات اضافه میشوند:
// ... import {disableDeprecatedForms, provideForms} from '@angular/forms'; // ... bootstrap(AppComponent, [ disableDeprecatedForms(), provideForms() ]);
import { FormControl } from '@angular/forms';
directives: [REACTIVE_FORM_DIRECTIVES]
6- Validators اینبار از ماژول ذیل تامین میشود:
import { Validators, REACTIVE_FORM_DIRECTIVES, FormControl, FormGroup } from '@angular/forms';
7- FormBuilder سازگاری با reactive forms جدید ندارد و با FormGroup جایگزین شد.