دنیای پروژه

جزئیات محصول

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

دانلود پروژه کاربردی طراحی متریال 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 با کد منبع می‌باشد