آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش Angular-پوسته برنامه Angular

دوره های مرتبط با این مقاله

آموزش Angular-پوسته برنامه Angular

نصب Angular CLI

اگر Angular CLI را از قبل بر روی سیستم خود نصب ندارید با استفاده از دستور زیر Angular CLI را به صورت سراسری بر روی سیستم خود نصب کنید:


آموزش Angular

ایجاد یک پروژه جدید

با استفاده از دستور زیر یک پروژه جدید با نام angular tour of heroes ایجاد نمایید.


آموزش Angular

Angular CLI یک پروژه جدید با برنامه پیش فرض و فایل های پشتیبانی ایجاد میکند. شما می توانید با استفاده از دستور ng add پکیج های از قبل تعریف شده را به پروژه جدید اضافه کنید.

آموزش راه اندازی Application در Angular 6

به دایرکتوری پروژه بروید و برنامه را اجرا کنید.


آموزش Angular

دستور ng serve سرور را راه اندازی می کند، فایل های خود را تماشا می کند و برنامه را دوباره بازسازی می کند، همچنان که شما آن فایل ها را تغییر می دهید.
پرچم --open مرورگر را به http: // localhost: 4200 باز می کند.
شما باید برنامه را در مرورگر خود ببینید.

آموزش کامپوننت های Angular 6

صفحه ای که می بینید پوسته برنامه است. پوسته توسط کامپوننت Angular به نام AppComponent کنترل می شود.
Component ها از اجزاهای سازنده اصلی برنامه های Angular هستند. Component ها داده ها را روی صفحه نمایش می دهند، به ورودی کاربر گوش می دهند و بر اساس آن ورودی عمل می کنند.

آموزش تغییر عنوان برنامه در Angular 6

پروژه را در ویرایشگر مورد نظر یا IDE خود باز کنید و به پوشه src / app بروید. شما پیاده سازی پوسته AppComponent را در سه فایل توزیع شده پیدا می کنید:

  • app.component.ts : کد کلاس Component در TypeScript نوشته شده است.
  • app.component.html : الگوی Component نوشته شده در html .
  • app.component.css : سبک های خصوصی CSS برای کامپوننت.

فایل کلاس component (app.component.ts) را باز کنید و مقدار صفت title آن را به ‘Tour of Heroes’ تغییر دهید.


آموزش Angular

فایل الگوی کامپوننت (app.component.html) را باز کنید و قالب پیش فرض تولید شده توسط Angular CLI را حذف کنید و آن را با خط HTML زیر جایگزین کنید.


آموزش Angular

جفت آکولاد قرار گرفته در میان تگ < h1 > سینتکس Angular است. بعد از انجام تغییر، مرورگر تازه سازی شده و عنوان برنامه جدید را نمایش می دهد.

اضافه کردن سبک های (Styles) برنامه

اکثر برنامه ها برای نگاه سازگار وهمگون در سراسر برنامه تلاش می کنند. CLI برای این منظور یک style.css خالی ایجاد کرده که می توانید سبک های برنامه کاربردی خود را در آنجا قرار دهید. در اینجا یک نمونه styles.css برای برنامه تور قهرمانان است:


آموزش Angular

برای مطالعه سرفصل دوره آموزش عملی ASP.NET Core & Angular 6 & KendoUI کلیک نمایید .

  • 440
  •    252
  • تاریخ ارسال :   1397/03/10

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .