Angular 6.0 را همین حالا شروع کنید

Angular 6.0 را همین حالا شروع کنید

Angular 6.0 را همین حالا شروع کنید

آموزش برنامه نویسی | ایجاد اولین پروژه انگولار 6

Angular آخرین نسخه آن، Angular 6.0 را منتشر کرده است. در این مقاله، ویژگی های جدید Angular 6.0 را درک خواهیم کرد و همچنین با استفاده از Angular CLI 6.0 و Visual Studio Code، یک پروژه جدید ایجاد می کنیم.

ابتدا این مقاله را مطالعه کنید: ایجاد یک برنامه انگولار با Visual Studio Code

what-is-angular-6.png

Angular 6.0 را همین حالا شروع کنید

آموزش برنامه نویسی | ایجاد اولین پروژه انگولار 6

 

Angular آخرین نسخه آن، Angular 6.0 را منتشر کرده است. در این مقاله، ویژگی های جدید Angular 6.0 را درک خواهیم کرد و همچنین با استفاده از Angular CLI 6.0 و Visual Studio Code، یک پروژه جدید ایجاد می کنیم.

ابتدا این مقاله را مطالعه کنید: ایجاد یک برنامه انگولار با Visual Studio Code

ویژگی های جدید در انگولار 6

ng update: خط فرمان CLI جدید است که پروژه تان را با نسخه های قبلی تطبیق می دهد. (آپدیت می کند)

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

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

عنصر <template> منقضی شده است: در این ورژن شما نمی توانید از <template> استفاده کنید. بلکه به جای آن باید از <ng-template> استفاده کنید.

Angular CLI در حال حاضر از ساختن کتابخانه پشتیبانی می کند. برای ایجاد کتابخانه باید از دستور زیر استفاده نمایید:

ng generate library <name>

برای مثال:

e.g. :- ng generate library my-demo-lib

انگولار 6 به ما اجازه می دهد که از برنامه RxJS V6 استفاده کنیم.

ایجاد اولین برنامه با استفاده از انگولار 6

  • نصب NODE.JS

  • نصب Visual studio code | VS code

  • نصب Angular CLI

NODE.JS را از اینجا و Visual studio code را از اینجا دانلود و نصب کنید.

بعد از نصب node.js باید مطمئن شوید که npm نیز نصب باشد. بنابراین cmd را باز کرده و با دستورات زیر چک کنید که نود جی اس و ان پی ام نصب شده باشد.

node -v

npm –v

مانند تصویر زیر:

 

install-nodejs-and-npm.png

 

نصب Angular CLI

بعد از نصب node.js و npm قدم بعدی نصب انگولار cli است. Cmd را باز کرده و دستور زیر را وارد کنید:

npm i -g @angular/cli

این باعث نصب Angular 6.0 CLI می شود.

 

install-angular-6.png

 

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

Vs code را باز کرده و در منو view گزینه Integrated Terminal را انتخاب کنید.

 

create-integrated-terminal.png

 

به این ترتیب terminal window باز می شود که به ترتیب دستورات زیر را باید وارد کنید:

  • mkdir ng6Demo
  • cd ng6Demo
  • ng new ng6App

ایجاد دایرکتوری با نام ng6Demo و ایجاد یک برنامه انگولار با نام ng6App

 

open-terminal-windows.png

 

تا اینجا ما یک برنامه انگولار 6 را با vs code  و  Angular CLI ایجاد کردیم. حال برای باز کردن پروژه دستور زیر را وارد کنید:

code .

 

OpenCodeFile.png

 

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

Solutionexplorer.png

 

 

توجه داشته باشید که ساختار پوشه کمی متفاوت از نسخه قدیمی Angular است. ما به جای فایل قدیمی ".angular-cli.json" یک فایل جدید "angular.json" داریم. این فایل پیکربندی همان کاری را که قبلا انجام داده است، انجام می دهد، اما کمی تغییر کرده است.

با باز کردن فایل package.json می توانید آخرین بسته های Angular 6.0.0 که در پروژه ما نصب شده اند را ببینید.

 


{  
  "name": "ng6-app",  
  "version": "0.0.0",  
  "scripts": {  
    "ng": "ng",  
    "start": "ng serve",  
    "build": "ng build",  
    "test": "ng test",  
    "lint": "ng lint",  
    "e2e": "ng e2e"  
  },  
  "private": true,  
  "dependencies": {  
    "@angular/animations": "^6.0.0",  
    "@angular/common": "^6.0.0",  
    "@angular/compiler": "^6.0.0",  
    "@angular/core": "^6.0.0",  
    "@angular/forms": "^6.0.0",  
    "@angular/http": "^6.0.0",  
    "@angular/platform-browser": "^6.0.0",  
    "@angular/platform-browser-dynamic": "^6.0.0",  
    "@angular/router": "^6.0.0",  
    "core-js": "^2.5.4",  
    "rxjs": "^6.0.0",  
    "zone.js": "^0.8.26"  
  },  
  "devDependencies": {  
    "@angular/compiler-cli": "^6.0.0",  
    "@angular-devkit/build-angular": "~0.6.0",  
    "typescript": "~2.7.2",  
    "@angular/cli": "~6.0.0",  
    "@angular/language-service": "^6.0.0",  
    "@types/jasmine": "~2.8.6",  
    "@types/jasminewd2": "~2.0.3",  
    "@types/node": "~8.9.4",  
    "codelyzer": "~4.2.1",  
    "jasmine-core": "~2.99.1",  
    "jasmine-spec-reporter": "~4.2.1",  
    "karma": "~1.7.1",  
    "karma-chrome-launcher": "~2.2.0",  
    "karma-coverage-istanbul-reporter": "~1.4.2",  
    "karma-jasmine": "~1.1.1",  
    "karma-jasmine-html-reporter": "^0.2.2",  
    "protractor": "~5.3.0",  
    "ts-node": "~5.0.1",  
    "tslint": "~5.9.1"  
  }  
}  

اجرای برنامه

حال برای هدایت به برنامه از دستورات زیر استفاده می کنیم:

  • cd ng6demo
  • cd ng6app

و برای شروع وب سرور از دستور زیر:

  • ng serve

 

ngserve.png

 

بعد از اجرای این دستورات خروجی زیر به شما نشان داده خواهد شد.

 

Execution_appication-angular.png

 

حال ما می خواهیم متن خوشامدگویی را تغییر دهیم. بنابراین به فایل /src/app/app.component.ts رفته و کد زیر را به صورت زیر تغییر می دهیم.

replace-code.png

 

حال شما پیغام "Welcome to Csharp Corner!" را مشاهده می کنید.

 

Execution_angular-6.png

 

نتیجه گیری:

ما در مورد ویژگی های جدید انگولار 6،0 یاد گرفتیم.  Angular 6.0 CLI  را نصب کرده ایم و اولین برنامه انگولار 6.0 را با کمک ویژوال استودیو کد ایجاد کرده ایم. همچنین پیام خوش آمدید در صفحه وب را نیز سفارشی کردیم.

نظرات

  • Hannah Martinez
    مینا
    دو شنبه 11 دی 1278 - 0:00

    ممنونم مطلب فوق العاده عالی و کاربردی بود

    .متشکرم

نظرات یا سوالات خودرا با ما درمیان بگذارید

0912 097 5516 :شماره تماس
0713 625 1757 :شماره تماس