هرچند NET Standard 2.0. توسط دات نت 4.6.1 پشتیبانی میشود، اما به همراه تمام فایلهای مورد نیاز آن نیست. به همین جهت حجم توزیع برنامههای دات نت 4.6.1 که از کتابخانههای NET Standard 2.0. استفاده میکنند، بالا خواهد رفت. این مشکل با دات نت 4.7.1 وجود نداشته و تمام کتابخانههای جانبی مورد نیاز، جزئی از فریم ورک است.
نظرات مطالب
ارسال ویدیو بصورت Async توسط Web Api
ASP.NET Core 2.0 پشتیبانی توکاری را از این مساله ارائه کرده: «پشتیبانی توکار ASP.NET Core 2.0 از Range headers». به این ترتیب کاربر میتواند از قسمت خاصی شروع به درخواست نمایش کند (همان از سرگیری مجدد)، یا نمایشگر قسمتهای بعدی را پیشتر درخواست و بافر کند.
در قسمت قبل با نحوه پیاده سازی مسیریابی در AngularJs آشنا شدیم و در این پست میخواهیم نحوه تعریف و ارسال پارامترها به سیستم مسیریاب را فرا بگیریم.
در بالا ما پارامتری به نام orderId وارد کرده ایم که میتوانیم توسط routeParams$ در کنترلر به آن دست پیدا کنیم :
فراموش نکنید که باید پارامتر routeParams$ را به کنترلر خود تزریق کنید.
محتوای فایل index.html را نیز به صورت زیر تغییر دهید :
برنامه را اجرا کنید تا نتیجه را ببینید.
بارگزاری Viewهای محلی توسط تگ <script> :
برای درک بهتر مثالی را تهیه میکنیم .
سپس دو کنترلر زیر را نیز به آن اضافه کنید :
فایلی به نام index2.html برای صفحه اصلی برنامه با محتوای زیر تعریف کنید :
همانطور که مشاهده میکنید در کد بالا از 2 تگ اسکریپت برای قرار دادن محتوای View استفاده کرده ایم که خاصیت type آن برابر با text/ng-template و خاصیت id آن نام View template است و دیگر فایل مجزایی برای Viewها ایجاد نکردیم. Angular به صورت خودکار محتوای داخل تگهای Script را به محض فراخوانی آدرسهای موجود در ویژگی id هر تگ به وسیلهی سیستم مسیر یابی، در داخل دایرکتیو ng-view قرار میدهد.
افزودن دادههای سفارشی به سیستم مسیریابی :
در هر دو مسیر از کنترلر CommonController استفاده کرده ایم با این تفاوت که در مسیر اول یعنی AddNewOrder/ یک خاصیت با نام foodata با مقدار addorder تعریف شده است و در مسیر دوم با مقدار showorder.
مقدار موجود در آن را بخوانیم.
فرض کنید که میخواهیم در لیست سفارشات قسمتی داشته باشیم برای مشاهدهی جزئیات هر سفارش. پس در صفحه نمایش جزئیات کالا نیاز به کد محصول برای واکشی آن داریم. در Angular زمانی که داریم مسیرها را تعریف میکنیم این امکان را هم داریم که پارامترهایی را هم برای هر مسیر مشخص کنیم. برای این کار فایل app.js مثال قبل را باز کنید و مسیر ذیل را به آن اضافه کنید :
when('/showOrderDetails/:orderId', { templateUrl: 'templates/show_order.html', controller: 'ShowOrderController' });
myFirstRoute .controller('ShowOrderController', function($scope, $routeParams) { $scope.order_id = $routeParams.orderId; });
<body ng-app="myFirstRoute" style=" <div> <div> <div> <table dir="rtl"> <thead> <tr> <th>#</th><th>˜کد</th><th>نام محصول</th><th></th> </tr> </thead> <tbody> <tr> <td>1</td><td>1234</td><td>15" Samsung Laptop</td> <td><a href="#showOrderDetails/1234">جزئیات محصول</a></td> </tr> <tr> <td>2</td><td>5412</td><td>2TB Seagate Hard drive</td> <td><a href="#showOrderDetails/5412">جزئیات محصول</a></td> </tr> <tr> <td>3</td><td>9874</td><td>D-link router</td> <td><a href="#showOrderDetails/9874">جزئیات محصول</a></td> </tr> </tbody> </table> <div ng-view></div> </div> </div> </div> <script src="js/bootstrap.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script src="app.js"></script> </body>
نکتهی مهم در کد بالا قرار دادن کد کالا بعد از مسیر است، مانند : showOrderDetails/5412 #
و محتویات فایل templates/show_order.html :
<h2>سفارش شماره #{{order_id}}</h2> محل قرار گیری جزئیات سفارش شماره : <b>#{{order_id}}</b>.
بارگزاری Viewهای محلی توسط تگ <script> :
در بعضی موارد لزومی ندارد که اطلاعات View را از یک فایل دیگر بخوانید و یا حتی اینقدر View شما کوچک است که تمایل دارید آن را به همراه فایل اصلی index.html حمل کنید به جای اینکه آن را در یک فایل جدا نگهداری کنید.
دایرکتیوی به نام ng-template وجود دارد که این امکان را به ما میدهد تا بتوانیم View templateهای کوچکمان را در داخل فایل اصلی قرار دهیم. با استفاده از تگ <script> به شکل زیر میشود این کار را انجام داد :
<script type="text/ng-template" id="add_order.html"> <h2> ثبت سفارش </h2> {{message}} </script>
فایل app.js مثال قبل را باز کنید و مسیرهای زیر را نیز به آن اضافه کنید :
when('/AddNewOrder', { templateUrl: 'add_order.html', controller: 'AddOrderController' }). when('/ShowOrders', { templateUrl: 'show_orders.html', controller: 'ShowOrdersController' });
myFirstRoute.controller('AddOrderController', function($scope) { $scope.message = 'صفحه نمایش ثبت سفارش جدید'; }); myFirstRoute.controller('ShowOrdersController', function($scope) { $scope.message = 'صفحه نمایش لیست سفارشات'; });
<body ng-app="myFirstRoute" style=" <div> <div> <div> <ul> <li><a href="#AddNewOrder"> ثبت سفارش جدید </a></li> <li><a href="#ShowOrders"> نمایش شفارشات </a></li> </ul> </div> <div> <div ng-view></div> </div> </div> </div> <script type="text/ng-template" id="add_order.html"> <h2> ثبت سفارش </h2> {{message}} </script> <script type="text/ng-template" id="show_orders.html"> <h2> نمایش سفارشات </h2> {{message}} </script> <script src="js/bootstrap.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script src="app.js"></script> </body>
پروژه را اجرا کنید تا نتیجه را مشاهده کنید.
افزودن دادههای سفارشی به سیستم مسیریابی :
بیشتر اوقات ممکن است نیاز داشته باشید تا دادههای خاصی را در مسیرهای معینی ارسال کنید. برای مثال ممکن است شما بخواهید از یک کنترلر در مسیرهای مختلف استفاده کنید و برای هر مسیر یک دادهی خاص را نیز ارسال میکنید. به مثال زیر توجه کنید :
when('/AddNewOrder', { templateUrl: 'templates/add_order.html', controller: 'CommonController', foodata: 'addorder' }). when('/ShowOrders', { templateUrl: 'templates/show_orders.html', controller: 'CommonController', foodata: 'showorders' }); sampleApp.controller('CommonController', function($scope, $route) { //access the foodata property using $route.current var foo = $route.current.foodata; alert(foo); });
ما میتوانیم با تزریق route$ به کنترلرمان، توسط دستور :
$route.current.foodata
همانطور که در مطلب قبل دیدیم، با اضافه کردن style ها و فایلهای Javascript ای حجم صفحات خروجی رو به افزایش بودند. اولین راه بهینه سازی، استفاده از feature module است. میخواهیم هر زمان که به ماژولی نیاز داریم، آن را import و استفاده کنیم.
و
و فایل app.component.ts :
و محتویات فایل app.component.scss را پاک میکنیم.
در ادامه دو فایل زیر را برای استفاده از ماژولهای Angular Material و Kendo Angular UI در مسیر app\modules تعریف میکنیم.
// angular-material-feature.module.ts import { NgModule } 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 { MatMenuModule } 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 { NgModule } from '@angular/core'; // Import kendo angular ui import { ButtonsModule } from '@progress/kendo-angular-buttons'; import { GridModule, ExcelModule } from '@progress/kendo-angular-grid'; import { DropDownsModule } from '@progress/kendo-angular-dropdowns'; import { InputsModule } from '@progress/kendo-angular-inputs'; import { DateInputsModule } from '@progress/kendo-angular-dateinputs'; import { DialogsModule } from '@progress/kendo-angular-dialog'; import { RTL } from '@progress/kendo-angular-l10n'; import { LayoutModule } from '@progress/kendo-angular-layout'; import { WindowService, WindowRef, WindowCloseResult, DialogService, DialogRef, DialogCloseResult } from '@progress/kendo-angular-dialog'; import { SnotifyModule, SnotifyService, SnotifyPosition, SnotifyToastConfig, ToastDefaults } 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: [ { provide: 'SnotifyToastConfig', useValue: ToastDefaults }, SnotifyService, // Enable Right-to-Left mode for Kendo UI components { provide: RTL, useValue: true }, ] }) export class KendoFeatureModule { }
از این پس، هر زمانیکه به ماژولی نیاز داریم، feature module آن را import میکنیم.
در ادامهی بهینه سازی، از قابلیت Lazy-Loading استفاده میکنیم و فایل های زیر را جهت پیاده سازی lazy-loading تغییر میدهیم.
محتویات فایل styles.scss را پاک میکنیم.
فایل app.module.ts :
// app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserAnimationsModule, RouterModule, AppRoutingModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
// app.component.ts import { Component, ViewEncapsulation } 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.component.html <router-outlet></router-outlet>
و فایل app-routing.module.ts
// app-routing.module.ts import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: '', loadChildren: './projects/home/home.module#HomeModule' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
نکته 1: سعی کنید کامپوننتهای کمتری را به app.module.ts اضافه کنید.
نکته 2: stylesheetها را در ماژولهایی که به آنها نیاز دارند import کنید.
تا به اینجای کار، ماژول اصلی پروژه را سبک کردیم. حال میخواهیم صفحهی اول پروژه را به module ای به نام home، در مسیر app\projects\home مسیردهی کنیم.
home.module.ts :
// home.module.ts import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import {AngularMaterialFeatureModule , KendoFeatureModule} from '../../modules/index'; import {HomeRoutingModule } from './home.routing'; import { HomeComponent } from './home.component'; import { IndexComponent } from './pages/index/index.component'; import {LoginComponent } from './pages/login/login.component'; @NgModule({ declarations: [ HomeComponent, IndexComponent, LoginComponent ], imports: [ CommonModule, HomeRoutingModule, AngularMaterialFeatureModule ], providers:[ ], entryComponents:[ LoginComponent ] }) export class HomeModule { }
home.routing.ts :
// home.routing.ts import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './home.component'; import { IndexComponent } 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 :
// home.component.ts import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; import { LoginComponent } 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 :
// 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 "~@angular/material/prebuilt-themes/indigo-pink.css";
و فایل home.component.html :
// home.component.html <!--============================= HEADER =============================--> <div> <div> <div> <div> <div> <nav> <a href="index.html"><img src="../../../assets/home/images/logo.png" alt="logo"></a> <button type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <div id="navbarNavDropdown"> <ul> <li> <a target="_blank" [routerLink]="['/dashboard']">Dashboard</a> </li> <li> <a [routerLink]="['/about']">About</a> </li> <li> <a [routerLink]="['/contact']">Contact</a> </li> <li> <a [routerLink]="['/pricing']">Pricing</a> </li> <li> <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Blog <span></span> </a> <div> <a [routerLink]="['/blog']">Blog Listing</a> <a [routerLink]="['/blog-detail']">Blog Detail</a> </div> </li> <li> <a (click)='toggleModal()' style="cursor: pointer;">Login</a> </li> <li><a href="add-listing.html"><span></span> Add Listing</a></li> </ul> </div> </nav> </div> </div> </div> </div> </div> <!--//END HEADER --> <router-outlet></router-outlet> <!--============================= FOOTER =============================--> <footer> <div> <div> <div> <div> <i aria-hidden="true"></i> <p>503 Sylvan Ave, Mountain View<br> CA 94041, United States</p> </div> </div> <div> <div> <img src="../../../assets/home/images/footer-logo.png" alt="#"> </div> </div> <div> <ul> <li><a href="#"><i aria-hidden="true"></i></a></li> <li><a href="#"><i aria-hidden="true"></i></a></li> <li><a href="#"><i aria-hidden="true"></i></a></li> <li><a href="#"><i aria-hidden="true"></i></a></li> <li><a href="#"><i aria-hidden="true"></i></a></li> </ul> </div> </div> <div> <div> <div> <p>Copyright © 2017 Listed Inc. All rights reserved</p> <a href="#">Privacy</a> <a href="#">Terms</a> </div> </div> </div> </div> </footer> <!--//END FOOTER -->
پروژه را با دستور ng serve --open --prod اجرا کرده و خروجی را بررسی میکنیم. حجم خروجی صفحه اول را همراه با قالبی از پیش طراحی شده در تصویر زیر میبینیم:
سورس کامل پروژه در HowToKeepAngularDeploymentSizeSmall قرار دارد.
نظرات اشتراکها