جزئیات محصول

دانلود پروژه کاربردی طراحی متریال NGX در AngularJS با کد منبع

قیمت: 35,000 تومان

پیشنمایش برای محصولاتی که نیاز به نمایش دمو دارند می باشد

### پروژه: طراحی متریال NGX در AngularJS با کد منبع

**طراحی متریال NGX** یک پروژه کاربردی است که با استفاده از **AngularJS** و **Angular Material** توسعه یافته است. این پروژه به شما کمک می‌کند تا با استفاده از اصول طراحی متریال، رابط کاربری زیبا و کاربرپسندی بسازید.

### ویژگی‌های پروژه:

1. **رابط کاربری زیبا**: با استفاده از اجزای متریال دیزاین برای ایجاد یک طراحی مدرن و جذاب.

2. **کامپوننت‌های قابل استفاده مجدد**: شامل دکمه‌ها، فرم‌ها و سایر اجزای متریال که می‌توانید در پروژه‌های دیگر نیز استفاده کنید.

3. **واکنش‌گرا**: طراحی به گونه‌ای است که در تمام دستگاه‌ها به خوبی نمایش داده می‌شود.

### نحوه اجرای پروژه:

1. **نصب Angular CLI**: اگر هنوز Angular CLI را نصب نکرده‌اید، با استفاده از دستور زیر آن را نصب کنید:

```bash

npm install -g @angular/cli

```

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

```bash

ng new material-design-app

```

3. **نصب Angular Material**: به پوشه پروژه بروید و Angular Material را نصب کنید:

```bash

cd material-design-app

ng add @angular/material

```

4. **اجزای متریال**: از اجزای متریال مورد نظر خود در پروژه استفاده کنید. می‌توانید از مستندات Angular Material برای بررسی کامپوننت‌ها استفاده کنید.

### کد منبع:

#### HTML (app.component.html)

```html

پروژه طراحی متریال NGX

نام

ایمیل

```

#### CSS (styles.css)

```css

.app-container {

max-width: 600px;

margin: auto;

padding: 20px;

text-align: center;

}

h1 {

color: #3f51b5;

}

```

#### TypeScript (app.component.ts)

```typescript

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

@Component({

selector: 'app-root',

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

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

})

export class AppComponent {

title = 'پروژه طراحی متریال NGX';

}

```

#### ماژول (app.module.ts)

```typescript

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

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

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

import { MatInputModule } from '@angular/material/input';

import { MatFormFieldModule } from '@angular/material/form-field';

import { MatButtonModule } from '@angular/material/button';

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

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

BrowserAnimationsModule,

MatInputModule,

MatFormFieldModule,

MatButtonModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

```

### توضیحات کد:

1. **HTML**: شامل فرم‌هایی برای وارد کردن نام و ایمیل با استفاده از کامپوننت‌های Angular Material.

2. **CSS**: استایل‌های ساده برای زیبایی طراحی.

3. **TypeScript**: شامل منطق ساده برای نام و عنوان پروژه.

4. **ماژول**: وارد کردن ماژول‌های Angular Material برای استفاده از کامپوننت‌ها.

### جمع‌بندی

این پروژه طراحی متریال NGX یک راه عالی برای یادگیری استفاده از AngularJS و Angular Material است. شما می‌توانید با افزودن ویژگی‌های جدید و شخصی‌سازی طراحی، پروژه را گسترش دهید. این تجربه می‌تواند به شما در توسعه مهارت‌های برنامه‌نویسی و طراحی وب کمک کند.

| صفحه قابل مشاهده: دانلود پروژه کاربردی طراحی متریال NGX در AngularJS با کد منبع می‌باشد شما در حال مشاهده محصول "دانلود پروژه کاربردی طراحی متریال NGX در AngularJS با کد منبع" با شناسه 28514 هستید که تاکنون 30 بار مشاهده شده و در تاریخ Sep 30 2024 9:58PM طراحی و تولید شده است. این محصول با دقت و خلاقیت توسط تیم حرفه‌ای پرپروژه آماده شده است. قیمت این محصول 35000 تومان می‌باشد و در دسته‌بندی با شناسه 5503 قرار دارد.