آموزش راه اندازی پروژه در انگولار 7

3 سال پیش

امتیاز دهید post

آموزش راه اندازی پروژه در انگولار 7

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

برای شروع راه اندازی پروژه، مطمئن شوید که nodejs را نصب کرده اید. همانطور که در زیر نشان داده شده است می توانید نسخه node را در خط فرمان با استفاده از دستور node –v بررسی کنید

Node
اگر نسخه را دریافت نکردید، nodejs را از سایت رسمی آنها -https://nodejs.org/en/ نصب کنید.

Version
هنگامی که nodejs را نصب کردید، npm نیز با آن نصب می شود. برای بررسی نسخه npm، npm -v را مانند شکل زیر در خط فرمان اجرا کنید

Npm Version
بنابراین نسخه 10 نود و نسخه 6.4.1 npm را داریم.

برای نصب Angular 7 به سایت https://cli.angular.io برای نصب Angular CLI بروید.

Install Angular CLI
دستورات زیر را در صفحه وب مشاهده خواهید کرد

npm install -g @angular/cli //command to install angular 7
ng new my-dream-app // name of the project
cd my-dream-app
ng serve

npm install -g @angular/cli //command to install angular 7

ng new my-dream-app // name of the project

cd my-dream-app

ng serve

دستورات بالا به تنظیم پروژه در Angular 7 کمک می کند.

ما یک پوشه به نام projectA7 ایجاد می کنیم و angular/cli را مطابق شکل زیر نصب می کنیم

Project A7
پس از اتمام نصب، جزئیات بسته های نصب شده را با استفاده از دستور ng نسخه مانند شکل زیر بررسی کنید

Command Ng Version
این نسخه نسخه Angular CLI، نسخه تایپ اسکریپت و سایر بسته های موجود برای Angular 7 را ارائه می دهد.

ما با نصب Angular 7 تمام شده ایم، اکنون با راه اندازی پروژه شروع می کنیم.

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

ng new projectname

1	ng new projectname

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

در اینجا از نام پروژه به عنوان angular7-app استفاده می کنیم. هنگامی که دستور را اجرا می کنید، همانطور که در زیر نشان داده شده است از شما درباره مسیریابی سوال می کند

Angular7 App Routing
y را تایپ کنید تا مسیریابی را به تنظیمات پروژه خود اضافه کنید.

سوال بعدی در مورد شیوه نامه – است

StyleSheet
گزینه های موجود CSS، Sass، Less و Stylus هستند. در تصویر بالا، فلش روی CSS است. برای تغییر، می توانید از کلیدهای جهت دار برای انتخاب کلید مورد نیاز برای راه اندازی پروژه خود استفاده کنید. در حال حاضر، ما در مورد CSS برای راه اندازی پروژه خود بحث خواهیم کرد.

CSS

پروژه angular7-app با موفقیت ایجاد شد. تمام بسته های مورد نیاز برای اجرای پروژه ما در Angular7 را نصب می کند. اجازه دهید اکنون به پروژه ایجاد شده، که در دایرکتوری angular7-app است، برویم.

دایرکتوری را در خط فرمان با استفاده از خط داده شده کد – تغییر دهید

cd angular7-app

1	cd angular7-app

ما از Visual Studio Code IDE برای کار با Angular 7 استفاده می کنیم، شما می توانید از هر IDE، یعنی Atom، WebStorm و غیره استفاده کنید.

برای دانلود ویژوال استودیو کد به آدرس https://code.visualstudio.com/ بروید و روی دانلود برای ویندوز کلیک کنید.

Code IDE
برای نصب IDE روی Download for Windows کلیک کنید و تنظیمات را برای شروع استفاده از IDE اجرا کنید.

Visual Studio
ما هیچ پروژه ای در آن شروع نکرده ایم. اجازه دهید اکنون پروژه ای را که با استفاده از angular-cli ایجاد کرده ایم، در نظر بگیریم.

Project
ما پروژه angular7-app را در نظر خواهیم گرفت. اجازه دهید angular7-app را باز کنیم و ببینیم ساختار پوشه چگونه به نظر می رسد.

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

ng serve

ng serve

دستور ng serve برنامه را می سازد و وب سرور را راه اندازی می کند.

Angular7 Ng Serve
هنگامی که دستور شروع به اجرا می کند، موارد زیر را مشاهده خواهید کرد

Ng Serve

وب سرور در پورت 4200 راه اندازی می شود. آدرس اینترنتی “http://localhost:4200/” را در مرورگر تایپ کنید و خروجی را ببینید. پس از کامپایل شدن پروژه، خروجی زیر را دریافت خواهید کرد

Ng Serve2
پس از اجرای url، http://localhost:4200/ در مرورگر، به صفحه زیر هدایت خواهید شد –

Welcome

اکنون اجازه دهید برای نمایش محتوای زیر تغییراتی ایجاد کنیم

Welcome Angular7
ما تغییراتی در فایل‌ها ایجاد کرده‌ایم – app.component.html و app.component.ts. در فصل های بعدی بیشتر در مورد این موضوع بحث خواهیم کرد.

اجازه دهید راه اندازی پروژه را کامل کنیم. اگر می بینید ما از پورت 4200 استفاده کرده ایم، که پورت پیش فرضی است که angular-cli هنگام کامپایل از آن استفاده می کند. در صورت تمایل می توانید با استفاده از دستور زیر – پورت را تغییر دهید

ng serve --host 0.0.0.0 –port 4205

1	ng serve --host 0.0.0.0 –port 4205

پوشه angular7-app/ ساختار پوشه زیر را دارد–

e2e/ − پوشه آزمایشی انتها به انتها. عمدتا e2e برای تست یکپارچه سازی استفاده می شود و به اطمینان از عملکرد خوب برنامه کمک می کند.
node_modules/ – بسته npm نصب شده node_modules است. می توانید پوشه را باز کنید و بسته های موجود را ببینید.
src/ – این پوشه جایی است که ما روی پروژه با استفاده از Angular 7 کار خواهیم کرد. Inside src/ شما برنامه/پوشه ایجاد شده در طول راه اندازی پروژه را خواهید داشت و تمام فایل های مورد نیاز برای پروژه را در خود نگه می دارد.

پوشه angular7-app/ ساختار فایل زیر را دارد –

angular.json – اساساً نام پروژه، نسخه cli و غیره را در خود دارد.
.editorconfig – این فایل پیکربندی برای ویرایشگر است.
.gitignore – یک فایل .gitignore باید در مخزن قرار داده شود تا قوانین نادیده گرفته شده را با سایر کاربرانی که مخزن را شبیه سازی می کنند به اشتراک بگذارد.
package.json – فایل package.json به شما می گوید که با اجرای npm install کدام کتابخانه ها در node_modules نصب خواهند شد.

در حال حاضر، اگر فایل package.json را در ویرایشگر باز کنید، ماژول های زیر را در آن اضافه خواهید کرد –

"@angular/animations": "~7.2.0", 
"@angular/common": "~7.2.0", 
"@angular/compiler": "~7.2.0", 
"@angular/core": "~7.2.0", 
"@angular/forms": "~7.2.0", 
"@angular/platform-browser": "~7.2.0", 
"@angular/platform-browser-dynamic": "~7.2.0", 
"@angular/router": "~7.2.0", 
"core-js": "^2.5.4", 
"rxjs": "~6.3.3", 
"tslib": "^1.9.0", 
"zone.js": "~0.8.26"

"@angular/animations": "~7.2.0",

"@angular/common": "~7.2.0",

"@angular/compiler": "~7.2.0",

"@angular/core": "~7.2.0",

"@angular/forms": "~7.2.0",

"@angular/platform-browser": "~7.2.0",

"@angular/platform-browser-dynamic": "~7.2.0",

"@angular/router": "~7.2.0",

"core-js": "^2.5.4",

"rxjs": "~6.3.3",

"tslib": "^1.9.0",

"zone.js": "~0.8.26"

در صورتی که نیاز به افزودن کتابخانه های بیشتری دارید، می توانید آن ها را در اینجا اضافه کنید و دستور نصب npm را اجرا کنید.

tsconfig.json – این اساساً شامل گزینه های کامپایلر مورد نیاز در طول کامپایل است.
tslint.json – این فایل پیکربندی با قوانینی است که باید در هنگام کامپایل در نظر گرفته شوند.

پوشه src/ پوشه اصلی است که در داخل ساختار فایل متفاوتی دارد.

برنامه

این شامل فایل هایی است که در زیر توضیح داده شده است. این فایل ها به صورت پیش فرض توسط angular-cli نصب می شوند.

app.module.ts

اگر فایل را باز کنید، می بینید که کد به کتابخانه های مختلفی اشاره دارد که وارد شده اند. Angular-cli از این کتابخانه های پیش فرض برای واردات استفاده کرده است: angular/core، platform-browser.

خود نام ها استفاده از کتابخانه ها را توضیح می دهند. آنها وارد شده و در متغیرهایی مانند اعلان ها، واردات، ارائه دهندگان و بوت استرپ ذخیره می شوند.

ما می توانیم ببینیم که app-routing.module نیز اضافه شده است. این به این دلیل است که ما مسیریابی را در شروع نصب انتخاب کرده بودیم. ماژول توسط @angular/cli اضافه شده است.

در زیر ساختار فایل − آمده است

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

AppRoutingModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

@NgModule از @angular/core وارد شده است و دارای شی با ویژگی های زیر است –

Declarations – در اعلان ها، ارجاع به اجزا ذخیره می شود. مؤلفه App جزء پیش‌فرض است که هر زمان که پروژه جدیدی شروع شود ایجاد می‌شود. ما در مورد ایجاد کامپوننت های جدید در بخش متفاوتی خواهیم آموخت.
Imports – این باعث می شود که ماژول ها مطابق شکل بالا وارد شوند. در حال حاضر BrowserModule بخشی از واردات است که از @angular/platform-browser وارد می شود. همچنین ماژول مسیریابی AppRoutingModule اضافه شده است.
Providers– این به خدمات ایجاد شده اشاره دارد. این سرویس در فصل بعدی مورد بحث قرار خواهد گرفت.
Bootstrap – این به مولفه پیش فرض ایجاد شده، یعنی AppComponent اشاره دارد.
app.component.css – می توانید css خود را در اینجا بنویسید. در حال حاضر، رنگ پس زمینه را مطابق شکل زیر به div اضافه کرده ایم.

ساختار فایل به شرح زیر است –

.divdetails {
   background-color: #ccc; 
}

.divdetails {

background-color: #ccc;

}

کد html در این فایل موجود خواهد بود.

ساختار فایل به شرح زیر است –

&lt;!--The content below is only a placeholder and can be replaced.--&gt; 
&lt;div style = "text-align:center"&gt;
   &lt;h1&gt;Welcome to {{ title }}!&lt;/h1&gt; 
   &lt;img width = "300" alt = "Angular Logo" 
   src = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZp
   ZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA
   2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBma
   WxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSA
   zMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2
   wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3I
   DQwLjl6IiAvPgogIDwvc3ZnPg=="7&gt; 
&lt;/div&gt; 

&lt;h2&gt;Here are some links to help you start:&lt;/h2&gt; 
&lt;ul&gt; 
   &lt;li&gt; 
      &lt;h2&gt;&lt;a target = "_blank" rel = "noopener" 
         href = "https://angular.io/tutorial"&gt;Tour of Heroes&lt;/a&gt;
      &lt;/h2&gt;
   &lt;/li&gt; 
   &lt;li&gt; 
      &lt;h2&gt;&lt;a target = "_blank" rel = "noopener" 
         href = https://angular.io/cli"&gt;CLI Documentation&lt;/&gt;
      &lt;/h2&gt; 
   &lt;/li&gt; 
   &lt;li&gt; 
      &lt;h2&gt;&lt;a target = "_blank" rel = "noopener" 
         href = "https://blog.angular.io/"&gt;Angular blog&lt;/a&gt;
      &lt;/h2&gt; 
   &lt;/li&gt; 
&lt;/ul&gt; 
&lt;router-outlet&gt;&lt;/router-outlet&gt;

<h1>Welcome to {{ title }}!</h1>

<img width = "300" alt = "Angular Logo"

src = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZp

ZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA

2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBma

WxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSA

zMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2

wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3I

DQwLjl6IiAvPgogIDwvc3ZnPg=="7>

</div>

<h2>Here are some links to help you start:</h2>

<ul>

<li>

<h2><a target = "_blank" rel = "noopener"

href = "https://angular.io/tutorial">Tour of Heroes</a>

</h2>

</li>

<li>

<h2><a target = "_blank" rel = "noopener"

href = https://angular.io/cli">CLI Documentation</>

</h2>

</li>

<li>

<h2><a target = "_blank" rel = "noopener"

href = "https://blog.angular.io/">Angular blog</a>

</h2>

</li>

</ul>

<router-outlet></router-outlet>

این کد پیش فرض html است که در حال حاضر با ایجاد پروژه در دسترس است.

app.component.spec.ts

این فایل‌ها به‌طور خودکار تولید می‌شوند که حاوی تست‌های واحد برای جزء منبع هستند.

app.component.ts

کلاس برای کامپوننت در اینجا تعریف شده است. می توانید پردازش ساختار html را در فایل .ts انجام دهید. پردازش شامل فعالیت هایی مانند اتصال به پایگاه داده، تعامل با سایر اجزا، مسیریابی، خدمات و غیره خواهد بود.

ساختار فایل به شرح زیر است –

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',  
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
})
export class AppComponent { 
   title = 'Angular 7';
}

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'Angular 7';

}

app-routing.module.ts

این فایل به مسیریابی مورد نیاز برای پروژه شما می پردازد. به ماژول اصلی، یعنی app.module.ts متصل است.

ساختار فایل به شرح زیر است –

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];
@NgModule({ 
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
}) 
export class AppRoutingModule { }

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

Assets

می توانید تصاویر، فایل های js خود را در این پوشه ذخیره کنید.

محیط

این پوشه دارای جزئیاتی برای تولید یا محیط توسعه است. پوشه شامل دو فایل است.

environment.prod.ts
environment.ts

هر دو فایل دارای جزئیاتی هستند که آیا فایل نهایی باید در محیط تولید کامپایل شود یا در محیط توسعه.

ساختار فایل اضافی پوشه angular7-app/ شامل موارد زیر است –

favicon.ico

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

index.html

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

&lt;html lang = "en"&gt; 
   &lt;head&gt;
      &lt;meta charset = "utf-8"7gt;
      &lt;title&gt;Angular7App&lt;/title&gt; 
      &lt;base href = "/"&gt;
      &lt;meta name = "viewport" content = "width=device-width, initial-scale=1"&gt; 
      &lt;link rel = "icon" type = "image/x-icon" href = "favicon.ico"&gt; 
   &lt;/head&gt; 
   &lt;body&gt; 
      &lt;app-root&gt;&lt;/app-root&gt; 
   &lt;/body&gt; 
&lt;/html&gt;

<head>

<title>Angular7App</title>

</head>

<body>

<app-root></app-root>

</body>

</html>

بدنه <app-root></app-root> دارد. این انتخابگری است که در فایل app.component.ts استفاده می شود و جزئیات را از فایل app.component.html نمایش می دهد.

main.ts
main.ts فایلی است که از آنجا توسعه پروژه خود را شروع می کنیم. با وارد کردن ماژول اصلی که ما نیاز داریم شروع می شود. در حال حاضر اگر angular/core، angular/platform-browser-dynamic، app.module و محیط را ببینید به طور پیش فرض در حین نصب angular-cli و راه اندازی پروژه وارد می شود.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; 
import { environment } from './environments/environment';

if (environment.production) { 
   enableProdMode(); 
}
platformBrowserDynamic().bootstrapModule(AppModule).catch(err =&gt; console.error(err));

import { enableProdMode } from '@angular/core';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

import { environment } from './environments/environment';

if (environment.production) {

enableProdMode();

}

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

platformBrowserDynamic().bootstrapModule(AppModule) دارای مرجع AppModule ماژول والد است. از این رو، هنگامی که در مرورگر اجرا می شود، فایل index.html نامیده می شود. Index.html در داخل به main.ts اشاره دارد که ماژول والد را فراخوانی می کند، به عنوان مثال، AppModule را زمانی که کد زیر اجرا می شود –

platformBrowserDynamic().bootstrapModule(AppModule).catch(err =&gt; console.error(err));

1	platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

هنگامی که AppModule فراخوانی می شود، app.module.ts را فراخوانی می کند که در ادامه AppComponent را بر اساس بوت استرپ به صورت زیر فراخوانی می کند –

bootstrap: [AppComponent]

1	bootstrap: [AppComponent]

در app.component.ts یک انتخابگر وجود دارد: app-root که در فایل index.html استفاده می شود. با این کار محتوای موجود در app.component.html نمایش داده می شود.

موارد زیر در مرورگر نمایش داده می شود –

polyfill.ts

این عمدتا برای سازگاری با عقب استفاده می شود.

styles.css

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

test.ts

در اینجا، موارد تست واحد برای آزمایش پروژه رسیدگی می شود.

tsconfig.app.json

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

tsconfig.spec.json

این به حفظ جزئیات برای آزمایش کمک می کند.

typings.d.ts

برای مدیریت تعریف Typescript استفاده می شود.

ساختار فایل نهایی به صورت زیر خواهد بود –

Typescript

منبع.

لیست جلسات قبل آموزش انگولار 7

امتیاز دهید post

برچسب ها : آموزش انگولار 7 آموزش طراحی وب سایت

نویسنده مطلب saber

آموزش راه اندازی پروژه در انگولار 7

آموزش راه اندازی پروژه در انگولار 7

برنامه

app.module.ts

app.component.spec.ts

app.component.ts

app-routing.module.ts

Assets

محیط

favicon.ico

index.html

polyfill.ts

styles.css

test.ts

tsconfig.app.json

tsconfig.spec.json

typings.d.ts

لیست جلسات قبل آموزش انگولار 7

دیدگاه شما

بدون دیدگاه

آموزش راه اندازی پروژه در انگولار 7

برنامه

app.module.ts

app.component.spec.ts

app.component.ts

app-routing.module.ts

Assets

محیط

favicon.ico

index.html

polyfill.ts

styles.css

test.ts

tsconfig.app.json

tsconfig.spec.json

typings.d.ts

لیست جلسات قبل آموزش انگولار 7

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه