‫چگونه پروژه‌های انگیولاری سبکی داشته باشیم – قسمت دوم

// angular-material-feature.module.ts import from '@angular/core'; // Import angular kendo angular import { MatFormFieldModule, MatInputModule, MatButtonModule, MatButtonToggleModule, MatDialogModule, MatIconModule, MatSelectModule, MatToolbarModule, MatDatepickerModule, DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatTableModule, MatCheckboxModule, MatRadioModule, MatCardModule, fadeInContent, MatListModule, MatProgressBarModule, MatTabsModule } from '@angular/material'; import { MatSidenavModule, MatSlideToggleModule, } from '@angular/material'; import from '@angular/material/menu'; @NgModule({ declarations: [ // KendoGridPaginationComponent ], imports: [ MatSidenavModule, MatSlideToggleModule, MatInputModule, MatFormFieldModule, MatButtonModule, MatButtonToggleModule, MatDialogModule, MatIconModule, MatSelectModule, MatToolbarModule, MatDatepickerModule, MatCheckboxModule, MatRadioModule, MatCardModule, MatMenuModule, MatListModule, MatProgressBarModule, MatTabsModule ], exports: [ MatSidenavModule, MatSlideToggleModule, MatInputModule, MatFormFieldModule, MatButtonModule, MatButtonToggleModule, MatDialogModule, MatIconModule, MatSelectModule, MatToolbarModule, MatDatepickerModule, MatCheckboxModule, MatRadioModule, MatCardModule, MatMenuModule, MatListModule, MatProgressBarModule, MatTabsModule ], providers: [ ] }) export class AngularMaterialFeatureModule { }

// kendo-feature.module.ts import from '@angular/core'; // Import kendo angular ui import from '@progress/kendo-angular-buttons'; import from '@progress/kendo-angular-grid'; import from '@progress/kendo-angular-dropdowns'; import from '@progress/kendo-angular-inputs'; import from '@progress/kendo-angular-dateinputs'; import from '@progress/kendo-angular-dialog'; import from '@progress/kendo-angular-l10n'; import from '@progress/kendo-angular-layout'; import from '@progress/kendo-angular-dialog'; import from 'ng-snotify'; @NgModule({ declarations: [ ], imports: [ ButtonsModule, GridModule, ExcelModule, DropDownsModule, InputsModule, DateInputsModule, DialogsModule, LayoutModule, SnotifyModule, ], exports: [ ButtonsModule, GridModule, ExcelModule, DropDownsModule, InputsModule, DateInputsModule, DialogsModule, LayoutModule, ], providers: [ , SnotifyService, // Enable Right-to-Left mode for Kendo UI components , ] }) export class KendoFeatureModule { }

// app.module.ts import from '@angular/platform-browser'; import from '@angular/platform-browser/animations'; import from '@angular/core'; import from '@angular/router'; import from './app-routing.module'; import from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserAnimationsModule, RouterModule, AppRoutingModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule

// app.component.ts import from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], encapsulation: ViewEncapsulation.None, }) export class AppComponent { title = 'HowToKeepAngularDeploymentSizeSmall'; constructor() { } }

// app.component.html

// app-routing.module.ts import from '@angular/core'; import from '@angular/router'; const routes: Routes = [ ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule

// home.module.ts import from '@angular/core'; import from '@angular/common'; import from '../../modules/index'; import from './home.routing'; import from './home.component'; import from './pages/index/index.component'; import from './pages/login/login.component'; @NgModule({ declarations: [ HomeComponent, IndexComponent, LoginComponent ], imports: [ CommonModule, HomeRoutingModule, AngularMaterialFeatureModule ], providers:[ ], entryComponents:[ LoginComponent ] }) export class HomeModule

// home.routing.ts import from '@angular/core'; import from '@angular/router'; import from './home.component'; import from './pages/index/index.component'; const routes: Routes = [ { path: "", component: HomeComponent, children: [ { path: "", component: IndexComponent, data: { breadcrumb: " Index " } }, { path: "about", loadChildren: "./pages/aboutus/aboutus.module#AboutusModule" }, { path: "blog", loadChildren: "./pages/blog/blog.module#BlogModule" }, { path: "blog-detail", loadChildren: "./pages/blogdetail/blogdetail.module#BlogdetailModule" }, { path: "pricing", loadChildren: "./pages/pricing/pricing.module#PricingModule" }, { path: "contact", loadChildren: "./pages/contact/contact.module#ContactModule" } ] } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule], }) export class HomeRoutingModule { }

// home.component.ts import from '@angular/core'; import from '@angular/material'; import from './pages/login/login.component'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss'], encapsulation: ViewEncapsulation.None }) export class HomeComponent implements OnInit { constructor( private dialog: MatDialog) ngOnInit() { } public toggleModal(){ let dialogRef = this.dialog.open(LoginComponent, { }); } }

// home.component.scss @import '../../../assets/home/css/themify-icons.css'; @import '../../../assets/home/css/font-awesome.min.css'; @import '../../../assets/home/css/set1.css'; @import '../../../assets/home/css/bootstrap.min.css'; @import '../../../assets/home/css/style.css'; @import "[email protected]/material/prebuilt-themes/indigo-pink.css";

// home.component.html

آموزش پیکربندی و گسترش Dynamics 365 Customer Engagement

‫چگونه پروژه‌های Angular ی سبکی داشته باشیم – قسمت اول

‫پیاده سازی PWA در Angular

آموزش نکات ویژوال استودیو برای توسعه دهندگان وب

آموزش حرفه ای Node.js

آموزش پوش نوتیفیکیشن در iOS

توسعه میکروسرویس ها روی Azure با جاوا

آموزش جاوااسکریپت برای بلاک چین

شروع جوانی برای داشتن بهترین بازنشتگی

آموزش بکاپ و ریکاوری شیرپوینت ۲۰۱۶