امروز : پنج شنبه ۳ اسفند ۱۳۹۶ شما در سایت وبیت هستید.
دسته ها
سبد خرید شما

محصولی موجود نمی باشد!

با قسمت دوم از آموزش انگولار با شما همراه هستیم در قسمت قبل به توضیح فریم ورک انگولار وتاریخچه اش پرداختیم در این قسمت هم با ادامه مبحث رابط کاربری انگولار همراهتان خواهیم بود .

رابط کاربری انگولار:

نرم افزار node.js  را دانلود و نصب کردیم ،حال پروژه خود را در مسیر دلخواه ایجاد می کنیم و با استفاده از Cmd به مسیر پروژه خود میرویم:

cd c:/vebeetAngular

 

سپس هر چه را که نیاز داریم با استفاده از دستور npm  در فولدر برنامه نصب میکنیم :

npm install

 

پس از اجرای دستور بالا، با دستور زیر ابزار cli انگولار را نصب می‌کنیم:

npm i -g @angular/cli

 

با اجرای دستور ابزار cli  روی سیستم  نصب میشود و اگر node  را به درستی نصب کرده باشید تمام وابستگی‌ها در سیستم شخصی شما و فضای localhost ایجاد می‌شود.

برای ایجاد پروژه جدید انگولار 4 دستور زیر را اجرا می کنیم :

ng new test-app

 

پس با نصب cli  دستور ng  فعال شده و میتوان با استفاده از دستور بالا یک پروژه جدید به نام test-app ایجاد می شود که شامل تمام فایل های مورد نیاز برای شروع یک برنامه انگولاری است . و در نهایت خروجی زیر را نمایش می دهد:

installing ng

  create .editorconfig

  create README.md

  create src\app\app.component.css

  create src\app\app.component.html

  create src\app\app.component.spec.ts

  create src\app\app.component.ts

  create src\app\app.module.ts

  create src\assets\.gitkeep

  create src\environments\environment.prod.ts

  create src\environments\environment.ts

  create src\favicon.ico

  create src\index.html

  create src\main.ts

  create src\polyfills.ts

  create src\styles.css

  create src\test.ts

  create src\tsconfig.app.json

  create src\tsconfig.spec.json

  create src\typings.d.ts

  create .angular-cli.json

  create e2e\app.e2e-spec.ts

  create e2e\app.po.ts

  create e2e\tsconfig.e2e.json

  create .gitignore

  create karma.conf.js

  create package.json

  create protractor.conf.js

  create tsconfig.json

  create tslint.json

Installing packages for tooling via npm.

اکنون  با استفاده از دستور زیر وارد پوشه‌ی اصلی پروژه مان می‌شویم:

cd test-app/

 

سپس با ورورد به پوشه اصلی پروژه با وارد کردن تمام فایل های انگولار 4 کامپایل می شود و وب سایتتان در مسیر http://localhost:4200   قابل دسترسی است .

ng serve

پس از وارد کردن آدرس بالا  با صفحه زیر رو به رو خواهید شد :

1-1-2 آموزش انگولار (قسمت دوم)

 

تا به اینجای کار توانستیم اولین پروژه‌ی انگولار ۴ خود را ایجاد کنیم. در ادامه اموزش به  توضیحات  مربوط به  cli می پردازیم.

فایل های Angular 4 :

پس از نصب انگولار 4 به توضیح هر یک از فایل هایی که در مسیر پروژه  ایجاد شده است می پردازیم:

پوشه e2e : پوشه ای برای تست کردن پروژه است.که مخفف عبارت End2End  است.

پوشه  Src : پوشه اصلی نرم افزار است که فایل هایی با فرمت html و ts و … در آن قرار دارد و اصلی ترین فایل آن index.html  است.

سایر فایل ها : بقیه فایل ها برای تنظیمات نرم افزار است که به صورت پیش فرض توسط Angular CLI  ایجاد می شود.

محتویات پوشه Src :

این پوشه دارای فایل‌های ویژه است که برای اجرای نرم‌افزار استفاده میشود. مهم‌ترین فایل موجود تحت عنوان index.html در ریشه یا root این پوشه قرار دارد و میتوان با کلیک بر روی آن محتویات درون آن را ملاحظه کرد . علاوه بر این یک سری پوشه‌های دیگه درون src وجود دارند که شرح هر کدام از آنها به صورت زیر است:

پوشه app: این پوشه به عنوان قلب کنترلی اصلی نرم‌افزار معرفی می‌شود و شامل کامپوننت‌های نرم‌افزار شما می‌باشد.

پوشه assets: از این پوشه معمولا برای قرار دادن تصاویر و سایر فایل‌های جانبی استفاده می‌کنند.

پوشه environment: درون این پوشه معمولا متغییرهای مربوط به محیط نرم‌افزار تنظیم می‌شود که به صورت پیشفرض ثابت می‌باشند و در طول این سری از دوره‌های آموزشی کمتر به آن می‌پردازیم.

در ادامه اموزش با توضیح چگونه کارکردن با انگولار همراهتان هستیم…

 

هاست و دامین ندارید!؟ هم اکنون سفارش دهید.

نکته : کپی بردای و انتشار مطالب وبیت با ذکر منبع بلامانع می باشد.

توجه : لطفا مشکلات خود را در انجمن های وبیت مطرح کنيد.

منبع : وبیت

آیا مطلب موثر و مفید بود؟ حالا امتیاز خود ثبت کنید.
بازدید : 209 بار دسته بندی : آموزش Angular دیدگاه : ۰ تاريخ : ۲۶ دی ۱۳۹۶
به اشتراک بگذارید :
فیسبوک گوگل تویتر کلوب فیسنما
فائزه سلطان پور

دیدگاه کاربران تعداد دیدگاه : ۰