چهارشنبه, 22 آذر 1396

آموزش انگولار

آموزش انگولار

آشنایی با ابزار Angular-CLI

شروع سخت با انگولار

اگر تا کنون با برنامه های فریم ورک انگولار تجربه ای داشته باشید، متوجه شده اید که فرایند ساخت برنامه پایه و تنظیمات اولیه بسیار وقت گیر است. این مجموعه کارها شامل چیزهایی مانند موارد زیر است:

  • ساخت فایل های app
  • پیکره بندی TypeScript و Typings
  • اضافه کردن تگ های اسکریپت برای:
    • Angular 2
    • Rx.js
    • System.js
  • پیکره بندی System.js
  • ساخت کامپوننت ها، سرویس ها، پایپ ها، دیرکتیوها، ماژول ها و ...
  • عملیات بوتسترپینگ برنامه.
  • اجرا و ...

 بحث در این مورد بسیار است! خوشبختانه، در کنفرانس ng-conf 2016، تیم انگولار اعلام کرد که ابزاری ارائه خواهد کرد که ایجاد و داربست بندی (اسکافولدینگ) برنامه های کاربردی انگولار ۲  را فوق العاده آسان خواهد کرد.

استفاده از Angular-CLI برای ساخت سریع برنامه های کاربردی انگولار

ابزارهای خوب، توسعه نرم افزار سریعتر و آسان تر از موقعی می سازند که ما همه چیز را به صورت دستی انجام می دهیم. ابزار  Angular-CLI یک ابزار رابط خط فرمان (command line interface) انگولار است که می تواند یک پروژه را ایجاد کند، اضافه کردن فایلها، و انجام انواع کارهای توسعه در حال انجام مانند آزمایش، بسته بندی (bundling)، و استقرار را انجام دهد.

مرحله ۱. تنظیم محیط توسعه

شما نیاز دارید که محیط توسعه خود را قبل از آنکه شما بتوانید هر کاری را انجام دهید، تنظیم کنید. در ابتدا اگر برنامه Node.js® و ابزار npm بر روی دستگاه شما نصب نیست، نصب کنید.

بررسی کنید که شما در حال اجرا حداقل نسخه 4.x.x و npm 3.x.x هستید (به وسیله اجرای دستور  node -v و npm -v در صفحه ترمینال). زیرا نسخه های قدیمی تر تولید خطا می کنند ولی نسخ جدیدتر مشکلی ندارند.

 سپس Angular-CLI را به صورت عمومی نصب کنید.

npm install -g @angular/cli

مرحله ۲. ساخت یک پروژه جدید انگولار

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

ng new my-app

لطفا صبور باشید. این فرایند ممکن است زمان بر باشد. به خصوص نصب بسته های npm ممکن است طولانی شود (چند دقیقه).

ایجاد برنامه جدید انگولار

 

مرحله ۳. ارائه برنامه (Serve the application)

پس از ایجاد پروژه جدید به پوشه پروژه بروید و سرور را راه اندازی کنید.

cd my-app
ng serve

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

APP WORKS!

 

رفع یک اشکال احتمالی: گاهی اوقات ممکن است که شماره پورت مورد نظر شما به دلایلی اشغال باشد (مثلا مورد استفاده برنامه دیگری باشد) یا توسط فایروال مسدود شده باشد. یک راه تعویض شماره پورت است.

ng serve --port 4300

خطای پورت هنگام اجرای انگولار

ساختار برنامه انگولار تولید شده

در این مرحله شما یک برنامه انگولار آماده به کار و دایرکتوری جدید به نام my-app دارد و ساختار پوشه به شکل زیر است:

my-app
├── README.md
├── angular-cli.json
├── e2e
│   ├── app.e2e-spec.ts
│   ├── app.po.ts
│   └── tsconfig.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── index.ts
│   │   └── shared
│   │       └── index.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.json
│   └── typings.d.ts
└── tslint.json

Available Options

  • --dry-run: boolean, default false, perform dry-run so no changes are written to filesystem
  • --verbose: boolean, default false
  • --link-cli: boolean, default false, automatically link the angular-cli package (more info)
  • --skip-npm: boolean, default false, skip npm install
  • --skip-bower: boolean, default true, skip bower install
  • --skip-git: boolean, default false, don’t initialize Git repository
  • --directory: string, name of directory to create, by default this is the same as the application name
  • --source-dir: string, default 'src', name of source directory
  • --style: string, default 'css', the style language to use ('css', 'less' or 'scss')
  • --prefix: string, default 'app', the prefix to use when generating new components
  • --mobile: boolean, default false, generate a Progressive Web App application (see section on upcoming features)
  • --routing: boolean, default false, add module with routing information and import it in main app module
  • --inline-style: boolean, default false, use inline styles when generating the new application
  • --inline-template: boolean, default false, use inline templates when generating the new application

 

این مهم است که توجه داشته باشید که این ساختار دایرکتوری ها و جایی که فایل ها در آن قرار می گیرد، به این دلیل است که برنامه ای که  Angular CLI تولید می کند به پیروی از ساختارهای توصیه شده برنامه ها و شیوه نامه ها و بهترین تجارب پیاده سازی است. در مجموعه آموزش انگولار وب نگار توضیحات کاملی در این مورد خواهیم داشت.

 

منابع آموزشی

cli.angular.io

angular.io/docs