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

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

نصب Angular CLI

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

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

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

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

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

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

دستور 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’ تغییر دهید.

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

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

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

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

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