«High-DPI Scaling Improvements for Desktop Applications in the Windows 10 Creators Update »
- انتشار NET 4.7. با پشتیبانی بهتر از مانیتورهایی با DPI بالا
- Windows Forms HDPI Samples
let headers = new Headers(); let token = localStorage.getItem('token'); headers.append('Authorization', 'bearer ' + token); this.http.get('/api/controller/action', { headers: headers })
import { Injectable } from "@angular/core"; import { ConnectionBackend, RequestOptions, Request, RequestOptionsArgs, Response, Http, Headers } from "@angular/http"; import { Observable } from "rxjs/Rx"; import 'rxjs/add/operator/catch'; import 'rxjs/add/observable/throw'; @Injectable() export class InterceptedHttp extends Http { constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) { super(backend, defaultOptions); } request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { // اصلاح url if (typeof (url) === 'string') url = this.updateUrl((url as string)); else url.url = this.updateUrl((url as Request).url); return super.request(url, this.getRequestOptionArgs(options)).catch((err: Response) => { // Exception handling switch (err.status) { case 400: console.log('interceptor: 400'); console.log(err); break; case 404: console.log('interceptor: 404'); console.log(err); break; case 500: console.log('interceptor: 500'); console.log(err); break; case 401: console.log('interceptor: 401'); console.log(err); break; case 403: console.log('interceptor: 403'); console.log(err); break; default: console.log('interceptor: ' + err.status); console.log(err); } return Observable.throw(err); }); } private updateUrl(req: string) { return `http://localhost:61366/api/${req}` } private getRequestOptionArgs(options?: RequestOptionsArgs): RequestOptionsArgs { if (options == null) { options = new RequestOptions(); } if (options.headers == null) { options.headers = new Headers(); } // هدر درخواست تنظیم let token = localStorage.getItem('token'); options.headers.append('Authorization', 'bearer ' + token); return options; } }
//… providers: [{ provide: Http, useFactory: (backend: XHRBackend, options: RequestOptions) => { return new InterceptedHttp(backend, options); }, deps: [XHRBackend, RequestOptions], }], //…
import { Http, URLSearchParams } from '@angular/http'; //… constructor(private _http: Http) { } ngOnInit() { let urlSearchParams: URLSearchParams = new URLSearchParams(); urlSearchParams.append('page', page.toString()); urlSearchParams.append('count', count.toString()); let params = urlSearchParams.toString(); this._http.get(`/cars`, { params: params }) .subscribe(result => { console.log('service: Succ'); this.cars = result.json(); }, err => { console.log('service: error'); }); } //…
If you’re starting a new project and plan on using MVC and/or Web API, then it’s almost certain you should use ASP.NET Core.
gridstack.js is a jQuery plugin for widget layout. This is drag-and-drop multi-column grid. It allows you to build draggable responsive bootstrap v3 friendly layouts. It also works great with knockout.js, angular.js and touch devices. Demo Demo
@helper IncludeGoogleAnalytics(WebViewPage page) { var controller = page.ViewContext.Controller; var controllerHasAuthorizeAttribute = controller.GetType().GetCustomAttributes(typeof(AuthorizeAttribute), true).Any(); var currentActionName = page.ViewContext.Controller.ValueProvider.GetValue("action").RawValue.ToString(); var actionHasAuthorizeAttribute = controller.GetType().GetMethods() .Where(x => x.Name == currentActionName && x.GetCustomAttributes(typeof(AuthorizeAttribute), true).Any()) .Any(); if (!controllerHasAuthorizeAttribute && !actionHasAuthorizeAttribute) { string trackingId = ConfigurationManager.AppSettings["GoogleAnalyticsID"]; <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', '@trackingId']); _gaq.push(['_trackPageview']); (function () { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> }
@HtmlUtils.IncludeGoogleAnalytics(this)
<mat-card> Main Theme: <button mat-raised-button color="primary"> Primary </button> <button mat-raised-button color="accent"> Accent </button> <button mat-raised-button color="warn"> Warning </button> </mat-card>
@import '~@angular/material/theming'; @include mat-core(); $candy-app-primary: mat-palette($mat-indigo); $candy-app-accent: mat-palette($mat-pink, A200, A100, A400); $candy-app-warn: mat-palette($mat-red); $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn); @include angular-material-theme($candy-app-theme);
ng new MyProjectName --style=sass
"styles": [ "node_modules/material-design-icons/iconfont/material-icons.css", "src/styles.css", "src/custom.theme.scss" ],
/* @import "~@angular/material/prebuilt-themes/indigo-pink.css"; */ body { margin: 0; }
@import '~@angular/material/theming'; @include mat-core(); $my-app-primary: mat-palette($mat-blue-grey); $my-app-accent: mat-palette($mat-pink, 500, 900, A100); $my-app-warn: mat-palette($mat-deep-orange); $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn); @include angular-material-theme($my-app-theme); .alternate-theme { $alternate-primary: mat-palette($mat-light-blue); $alternate-accent: mat-palette($mat-yellow, 400); $alternate-theme: mat-light-theme($alternate-primary, $alternate-accent); @include angular-material-theme($alternate-theme); }
<mat-card class="alternate-theme"> Alternate Theme: <button mat-raised-button color="primary"> Primary </button> <button mat-raised-button color="accent"> Accent </button> <button mat-raised-button color="warn"> Warning </button> </mat-card>
<mat-menu #menu="matMenu"> <button mat-menu-item (click)="openAddContactDialog()">New Contact</button> <button mat-menu-item (click)="toggleTheme.emit()">Toggle theme</button> </mat-menu>
export class ToolbarComponent implements OnInit { @Output() toggleTheme = new EventEmitter<void>();
<app-toolbar (toggleTheme)="toggleTheme()" (toggleSidenav)="sidenav.toggle()"></app-toolbar>
export class SidenavComponent { isAlternateTheme = false; toggleTheme() { this.isAlternateTheme = !this.isAlternateTheme; } }
<mat-sidenav-container fxLayout="row" class="app-sidenav-container" fxFill [class.alternate-theme]="isAlternateTheme">
<mat-menu #menu="matMenu"> <button mat-menu-item (click)="openAddContactDialog()">New Contact</button> <button mat-menu-item (click)="toggleTheme.emit()">Toggle theme</button> <button mat-menu-item (click)="toggleDir.emit()">Toggle dir</button> </mat-menu>
export class ToolbarComponent implements OnInit { @Output() toggleDir = new EventEmitter<void>();
<app-toolbar (toggleDir)="toggleDir()" (toggleTheme)="toggleTheme()" (toggleSidenav)="sidenav.toggle()"></app-toolbar>
export class SidenavComponent implements OnInit, OnDestroy { dir = "ltr"; toggleDir() { this.dir = this.dir === "ltr" ? "rtl" : "ltr"; } }
<mat-sidenav-container fxLayout="row" class="app-sidenav-container" fxFill [dir]="dir" [class.alternate-theme]="isAlternateTheme">
// 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 { }
// 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 <router-outlet></router-outlet>
// 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 { }
// 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 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 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 @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 <!--============================= 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 -->
One thing that keeps amazing me is how many smart developers still feel the urge to write their own data access layer (DAL). They either do it all manually, or they generate parts of it, or they generate the whole thing. Whichever way you go, there are still various alternative paths you can choose from.
// JavaScript var vm = { firstName = ko.observable('John') }; ko.applyBindings(vm);
<!-- HTML --> <input data-bind="value:firstName"/>
// JavaScript // Inside of a personController this.firstName = 'John';
<!-- HTML --> <div ng-controller="personController as vm"> <input ng-model="vm.firstName"/> </div>