راه اندازی Angular در سیستم

Angular یک پلت فرم منبع باز مبتنی بر Typescript است که ایجاد برنامه های کاربردی را در وب / موبایل / دسکتاپ آسان می کند. این یک چارچوب و پلتفرم برای ایجاد یک اپلیکیشن تک صفحه ای است.

راه اندازی زاویه ای در محیط محلی

این وبلاگ نحوه نصب angular را در محیط محلی با استفاده از Angular CLI توضیح می دهد.

پیش نیازها:

برای استفاده از فریم ورک زاویه ای باید با موارد زیر آشنا باشید:

• HTML
• جاوا اسکریپت
• تایپ اسکریپت
• CSS

Angular را در محیط محلی نصب کنید

مرحله 1: Nodejs و npm را نصب کنید

مرحله 2: Angular CLI را نصب کنید

مرحله 3: یک پروژه زاویه ای ایجاد کنید

مرحله 1: Nodejs و npm را نصب کنید

Nodejs چیست؟

Nodejs یک فناوری سرور منبع باز است که به شما امکان می دهد جاوا اسکریپت را روی سرور اجرا کنید.

npm چیست؟

Npm مخفف Node Package Manager است. Npm برای نصب بسته ها، کتابخانه ها و سایر ابزارها برای پشتیبانی از توسعه زاویه ای استفاده می شود. برای استفاده از npm، باید Nodejs را نصب کنید.

Nodejs را نصب کنید

برای نصب Nodejs به وب سایت nodejs.org مراجعه کرده و آخرین نسخه نود را نصب کنید. شما باید به جای انتخاب نسخه فعلی، نسخه LTS (پشتیبانی طولانی مدت) را انتخاب کنید.

برای دانلود آخرین نسخه گره، روی دکمه Windows Installer کلیک کنید.

nodejs را نصب کنید

گره دانلود شده را باز کنید تا نصب شروع شود و گزینه بعدی را انتخاب کنید

پس از آن، از شما درخواست می شود مجوز را بپذیرید، کادر را انتخاب کنید و روی next کلیک کنید.

مکان را انتخاب کنید یا برای نصب روی بعدی کلیک کنید.

بعدی را انتخاب کنید

نصب را انتخاب کنید

روی finish کلیک کنید

بیشتر بخوانید: کتابخانه Rxjs در Angular

برای بررسی آخرین نسخه نود، خط فرمان را باز کرده و دستور زیر را اجرا کنید:

              node -v

خروجی مانند زیر را خواهید دید:

برای بررسی نسخه npm، خط فرمان را باز کنید و دستور زیر را اجرا کنید:

                npm -v

خروجی مانند زیر را خواهید دید:

مرحله 2: Angular CLI را نصب کنید

می‌توانید از CLI زاویه‌ای برای ایجاد پروژه‌های جدید، تولید برنامه‌های کاربردی و انجام وظایف توسعه مانند بسته‌بندی، آزمایش، استقرار استفاده کنید.

برای نصب Angular CLI این دستور را در خط فرمان اجرا کنید.

                  npm install -g @angular/cli

g مخفف global install است. برای بررسی نسخه نصب شده angular، خط فرمان را باز کنید و دستور theng version را اجرا کنید.

Helpcommand برای تکمیل راهنمای استفاده استفاده می شود.

CLI لیستی از دستورات را ارائه می دهد:

add: این دستور برای افزودن پشتیبانی از یک کتابخانه خارجی در پروژه شما مفید است.

build: یک برنامه زاویه ای را در یک پوشه خروجی به نام dist/folder کامپایل می کند.

config: مقادیر پیکربندی زاویه ای را در پروژه تنظیم کنید.

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

e2e: این دستور برای تست سرتاسر مفید است.

Generate: این دستور برای تولید فایل ها و ماژول ها در پروژه مفید است.

help: این دستور دستورات موجود را فهرست می کند.

lint: این دستور ابزارهای linting را در اپلیکیشن Angular در پوشه پروژه اجرا می کند.

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

serve: این دستور پروژه را اجرا می کند.

test: این دستور برای تست واحد در یک پروژه مفید است.

update: این دستور وابستگی ها را به روز می کند.

نسخه: برای بررسی نسخه CLI زاویه ای.

مرحله 3: ایجاد یک پروژه زاویه ای

با استفاده از دستور زیر می توانید از Angular CLI برای ایجاد یک پروژه زاویه ای جدید استفاده کنید.

 ng new FirstProject

Angular CLI از شما درخواست Angular routing می کند و می توانید گزینه y یا n را که گزینه پیش فرض است وارد کنید. پس از آن، فرمت شیوه نامه را می خواهد که می توانید گزینه ها را انتخاب کرده و برای ادامه وارد کنید.

این دستور یک پوشه جدید به نام FirstProject ایجاد می کند و یک پروژه با تمام وابستگی ها و بسته ها ایجاد می کند.

پس از آن، برای درک پوشه ها و فایل های ایجاد شده، ساختار پروژه را مرور می کنیم.

e2e: این پوشه حاوی کد پیکربندی تست سرتاسری است.

node_modules: این پوشه شامل تمام کتابخانه های شخص ثالث است و توسط مدیر بسته مدیریت می شود.

src: این پوشه حاوی کد منبع برنامه است.

app: این پوشه شامل ماژول ها و اجزای پروژه است.

app.component.html: این فایل حاوی قالب HTML است.
app.component.scss: این فایل حاوی فرمت شیوه نامه است.
app.component.spec.ts: این فایل برای تست واحد استفاده می شود.
app.component.ts: منطق مولفه ریشه.
app.module.ts: ماژول ریشه با نام AppModule را تعریف می کند.
app-routing.module.ts: مسیریابی برنامه را تعریف می کند.
assets: این پوشه حاوی دارایی های ثابت مانند آیکون ها، تصاویر و غیره است.

محیط‌ها: این پوشه حاوی فایل‌های پیکربندی محیط است.

favicon.ico: فاویکون

index.html: فایل HTML اصلی.

main.ts: فایل شروع اصلی که در آن AppModule بوت استرپ شده است.

polyfills.ts: Polyfills مورد نیاز angular

styles.scss: فایل شیوه نامه جهانی پروژه.

test.ts: این فایل پیکربندی کارما است.

gitignore: فایل پیکربندی Git.

angular.json:file شامل تمام تنظیمات برای CLI است.

karma.conf.js: این فایل پیکربندی کارما است.

package.json: این فایل حاوی تمام اطلاعات مربوط به پروژه مانند نام، وابستگی ها، devDependencies و غیره است.

README.md:فایل علامت گذاری که حاوی توضیحات پروژه است.

tsconfig.json: این فایل پیکربندی برای Typescript است.

tslint.json: فایل پیکربندی TSlint.

Angular CLI شامل یک سرور است تا بتوانید پروژه خود را به صورت محلی ارائه دهید. دایرکتوری جدید ایجاد شده را پیمایش کنید.

cd FirstProject

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

ng serve --open

پرچم باز پروژه را به طور خودکار در مرورگر محلی شما باز می کند. Angular از یک سرور زنده پشتیبانی می کند، بنابراین می توانید تغییرات پروژه را بدون بازخوانی صفحه مرورگر خود مشاهده کنید.

به دنبال استخدام برنامه نویس اختصاصی Angular هستید؟

جستجوی شما در اینجا به پایان می رسد.

Angular CLI دستور ng generate را برای تولید اجزای زاویه ای، ماژول ها، دستورالعمل ها، لوله ها، سرویس ها و غیره ارائه می دهد.

Angular CLI به طور خودکار در فایل app.module.ts به کامپوننت‌ها، لوله‌ها، دستورالعمل‌ها و سرویس‌ها اشاره می‌کند.

بیایید یک مثال ساده را ببینیم:

فایل app.component.ts، می توانیم متغیر را برای نوشتن پیام اعلام کنیم.

import { Component } from '@angular/core';
                  @Component({
                    selector: 'app-root',
                    templateUrl: './app.component.html',
                    styleUrls: ['./app.component.scss']
                  })
                  export class AppComponent {
                    title="FirstProject";
                    name="My First Project of Angular";
                  }

فایل app.component.html، می توانیم داده ها را نمایش دهیم.

{{ NAME}}

خروجی را در تصویر زیر مشاهده خواهید کرد:

نتیجه

در این وبلاگ با نحوه نصب NodeJS، angular CLI در سیستم آشنا شدیم و یک پروژه Angular جدید ایجاد کردیم. ما دستورات مختلفی را مورد بحث قرار دادیم که می‌توانید در طول توسعه برنامه برای تولید مؤلفه‌ها، ماژول‌ها، سرویس‌ها و غیره استفاده کنید.