{
"frameworks" : {
"net461" : {
"bin" : {
"assembly":"<path to dll>",
"pdb" :"<path to pdb if needed>"
}
}
}
} 
<Entry FontAttributes="Italic">
<Entry.Triggers>
<Trigger TargetType="Entry" Property="IsFocused" Value="True">
<Setter Property="FontAttributes" Value="Bold" />
</Trigger>
</Entry.Triggers>
</Entry> <Label Text="{Binding StepsCount, StringFormat='{}Button tapped {0} times!'}">
<Label.Triggers>
<DataTrigger TargetType="Label" Binding="{Binding StepsCount}" Value="0">
<Setter Property="IsVisible" Value="False" />
</DataTrigger>
</Label.Triggers>
</Label> public class StepsCountToFontAttributesConverter : Converter<int, FontAttributes>
{
protected override FontAttributes Convert(int value, Type targetType, object parameter, CultureInfo culture)
{
if (value % 2 == 0) /* راه تشخیص زوج بودن یک عدد */
return FontAttributes.Bold;
return FontAttributes.Italic;
}
} <Label FontAttributes="{Binding StepsCount, Converter={converters:StepsCountToFontAttributesConverter}}"
Text="{Binding StepsCount, StringFormat='{}Button tapped {0} times!'}" /> UI-Router ابزاری برای مسیریابی در AngularJS است که این امکان را برایتان فراهم می‌کند تا بخش‌های برنامه رابط کاربریتان را به شکل یک ماشین حالت ساماندهی کنید. برخلاف سرویس route$ که بر اساس مسیریابی URLها ساماندهی شده و کار می‌کند، UI-Router بر اساس حالت‌ها کار می‌کند، که این حالت‌ها می‌توانند در صورت لزوم مسیریابی هم داشته باشند.
<!doctype html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script>
var myApp = angular.module('myApp', ['ui.router']);
// For Component users, it should look like this:
// var myApp = angular.module('myApp', [require('angular-ui-router')]);
</script>
...
</head>
<body>
...
</body>
</html> <!-- index.html -->
<body>
<div ui-view></div>
<!-- We'll also add some navigation: -->
<a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>
</body> <!-- partials/state1.html --> <h1>State 1</h1> <hr/> <a ui-sref="state1.list">Show List</a> <div ui-view></div>
<!-- partials/state2.html --> <h1>State 2</h1> <hr /> <a ui-sref="state2.list">Show List</a> <div ui-view></div>
<!-- partials/state1.list.html -->
<h3>List of State 1 Items</h3>
<ul>
<li ng-repeat="item in items">{{ item }}</li>
</ul> <!-- partials/state2.list.html -->
<h3>List of State 2 Things</h3>
<ul>
<li ng-repeat="thing in things">{{ thing }}</li>
</ul> myApp.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})
.state('state1.list', {
url: "/list",
templateUrl: "partials/state1.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('state2', {
url: "/state2",
templateUrl: "partials/state2.html"
})
.state('state2.list', {
url: "/list",
templateUrl: "partials/state2.list.html",
controller: function($scope) {
$scope.things = ["A", "Set", "Of", "Things"];
}
})
}]); .state('state1', {
url: "/state1/:id",
templateUrl: "partials/state1.html"
}) $stateParams.id
.state('list', {
parent: "state1",
url: "/list",
templateUrl: "partials/state1.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('list', {
parent: "state2",
url: "/list",
templateUrl: "partials/state2.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
}) .state('state1', {
url: "/state1",
templateUrl: "partials/state1.html",
data:{
foodata: 'addorder'
}
}) $state.current.data.foodata
<!-- index.html -->
<body>
<div ui-view="viewA"></div>
<div ui-view="viewB"></div>
<!-- Also a way to navigate -->
<a ui-sref="route1">Route 1</a>
<a ui-sref="route2">Route 2</a>
</body> myApp.config(function ($stateProvider) {
$stateProvider
.state('index', {
url: "",
views: {
"viewA": { template: "index.viewA" },
"viewB": { template: "index.viewB" }
}
})
.state('route1', {
url: "/route1",
views: {
"viewA": { template: "route1.viewA" },
"viewB": { template: "route1.viewB" }
}
})
.state('route2', {
url: "/route2",
views: {
"viewA": { template: "route2.viewA" },
"viewB": { template: "route2.viewB" }
}
})
}); چند نکته
.state('list', {
parent: "state1",
url: "/list",
templateUrl: "partials/state1.list.html",
controller: "state1ListController as listCtrl1"
}
})
.state('list', {
parent: "state2",
url: "/list",
templateUrl: "partials/state2.list.html",
controller: "state2ListController as listCtrl2"
}
}) حالت‌های انتزاعی
حساسیت به حروف بزرگ و کوچک
import { Router } from '@angular/router';
.....
@Component({
selector: 'app-menu',
moduleId: module.id,
templateUrl: 'menu.component.html',
styleUrls: ['menu.component.css']
})
...
constructor(private _menuService: MenuService, public elementRef: ElementRef, public _router: Router) {
}
onClick(event: any) {
console.log('menu click');
debugger;
//----در این قسمت متغیر مقدار
//undefined
//دارد
this._router.navigate(['Subsystem']);
} import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import { Router} from '@angular/router';
import { MenuService } from './menu/menu.service';
import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';
import { appRouterProviders } from './app.routes';
bootstrap(AppComponent, [MenuService, HTTP_PROVIDERS, appRouterProviders]); import { Component } from '@angular/core';
import { HTTP_PROVIDERS } from '@angular/http';
import { MenuComponent } from './menu/menu.component';
import { SubSystemComponent } from './subsystem/subsystem.component';
import { MenuService } from './menu/menu.service';
import { SubSystemService } from './subsystem/subsystem.service';
import { ROUTER_DIRECTIVES, RouterLink, RouterOutlet} from '@angular/router';
// Add the RxJS Observable operators we need in this app.
import './rxjs-operators';
@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
directives: [MenuComponent, SubSystemComponent, ROUTER_DIRECTIVES, RouterOutlet, RouterLink],
providers: [MenuService, SubSystemService, HTTP_PROVIDERS]
})
export class AppComponent {
currentSubsSystemId: number=1;
} 
render() {
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(data => this.setState({ users: data }))
return (
<ul>
{this.state.users.map(user => <li key={user.id}>{user.name}</li>)}
</ul>
);
} 
//App.js
import React, { Component } from 'react';
import { Users } from "./Users";
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
toggle: false
};
}
handleChange = () => {
this.setState({ toggle: !this.state.toggle });
}
render() {
return <div className="container text-center">
<div className="row p-2">
<div className="form-check">
<input type="checkbox" className="form-check-input"
checked={this.state.toggle}
onChange={this.handleChange} />
<label className="form-check-label">Toggle</label>
</div>
<div className="row p-2">
{this.state.toggle && <Users />}
</div>
</div>
</div>
}
}
//Users
import React, { Component } from 'react';
export class Users extends Component {
constructor(props) {
super(props);
this.state = {
users: []
}
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(data => {
this.setState({ users: data });
console.log(data)
})
}
render() {
return (
<div className="bg-info text-white p-2">
{this.state.users &&
<p>{JSON.stringify(this.state.users, null, 2)}</p>
}
</div>
);
}
} import React, { Component } from 'react';
export class Users extends Component {
constructor(props) {
// as before
}
componentDidMount() {
// as before
}
componentDidUpdate() {
console.log("componentDidUpdate Users Component");
}
render() {
// as before
}
} import React, { Component } from 'react';
export class Users extends Component {
constructor(props) {
// as before
}
componentDidMount() {
// as before
}
componentDidUpdate() {
console.log("componentDidUpdate Users Component");
}
componentWillUnmount() {
console.log("componentWillUnmount Users Component");
}
render() {
// as before
}
} import React, { useState, useEffect } from 'react';
export const Users = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
console.log("Same as componentDidMount")
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(data => {
setUsers({ users: data });
})
}, []);
useEffect(() => {
console.log("Same as componentDidUpdate")
});
useEffect(() => {
return () => {
console.log("Same as componentWillUnmount")
}
}, []);
return (
<div className="bg-info text-white p-2">
{users &&
<p>{JSON.stringify(users, null, 2)}</p>
}
</div>
);
} import { InjectionToken } from "@angular/core";
export let APP_CONFIG = new InjectionToken<string>("app.config");
export interface IAppConfig {
apiEndpoint: string;
loginPath: string;
logoutPath: string;
refreshTokenPath: string;
accessTokenObjectKey: string;
refreshTokenObjectKey: string;
}
export const AppConfig: IAppConfig = {
apiEndpoint: "http://localhost:5000/api",
loginPath: "account/login",
logoutPath: "account/logout",
refreshTokenPath: "account/RefreshToken",
accessTokenObjectKey: "access_token",
refreshTokenObjectKey: "refresh_token"
}; import { AppConfig, APP_CONFIG } from "./app.config";
@NgModule({
providers: [
{ provide: APP_CONFIG, useValue: AppConfig }
]
})
export class CoreModule {} ng g s Core/services/Auth
create src/app/Core/services/auth.service.ts (110 bytes)
import { AuthService } from "./services/auth.service";
@NgModule({
providers: [
// global singleton services of the whole app will be listed here.
BrowserStorageService,
AuthService,
{ provide: APP_CONFIG, useValue: AppConfig }
]
})
export class CoreModule {} import { BehaviorSubject } from "rxjs/BehaviorSubject";
@Injectable()
export class AuthService {
private authStatusSource = new BehaviorSubject<boolean>(false);
authStatus$ = this.authStatusSource.asObservable();
constructor() {
this.updateStatusOnPageRefresh();
}
private updateStatusOnPageRefresh(): void {
this.authStatusSource.next(this.isLoggedIn());
} export enum AuthTokenType {
AccessToken,
RefreshToken
} import { BrowserStorageService } from "./browser-storage.service";
export enum AuthTokenType {
AccessToken,
RefreshToken
}
@Injectable()
export class AuthService {
private rememberMeToken = "rememberMe_token";
constructor(private browserStorageService: BrowserStorageService) { }
rememberMe(): boolean {
return this.browserStorageService.getLocal(this.rememberMeToken) === true;
}
getRawAuthToken(tokenType: AuthTokenType): string {
if (this.rememberMe()) {
return this.browserStorageService.getLocal(AuthTokenType[tokenType]);
} else {
return this.browserStorageService.getSession(AuthTokenType[tokenType]);
}
}
deleteAuthTokens() {
if (this.rememberMe()) {
this.browserStorageService.removeLocal(AuthTokenType[AuthTokenType.AccessToken]);
this.browserStorageService.removeLocal(AuthTokenType[AuthTokenType.RefreshToken]);
} else {
this.browserStorageService.removeSession(AuthTokenType[AuthTokenType.AccessToken]);
this.browserStorageService.removeSession(AuthTokenType[AuthTokenType.RefreshToken]);
}
this.browserStorageService.removeLocal(this.rememberMeToken);
}
private setLoginSession(response: any): void {
this.setToken(AuthTokenType.AccessToken, response[this.appConfig.accessTokenObjectKey]);
this.setToken(AuthTokenType.RefreshToken, response[this.appConfig.refreshTokenObjectKey]);
}
private setToken(tokenType: AuthTokenType, tokenValue: string): void {
if (this.rememberMe()) {
this.browserStorageService.setLocal(AuthTokenType[tokenType], tokenValue);
} else {
this.browserStorageService.setSession(AuthTokenType[tokenType], tokenValue);
}
}
} 
{"access_token":"...","refresh_token":"..."} export interface Credentials {
username: string;
password: string;
rememberMe: boolean;
} @Injectable()
export class AuthService {
constructor(
@Inject(APP_CONFIG) private appConfig: IAppConfig,
private http: HttpClient,
private browserStorageService: BrowserStorageService
) {
this.updateStatusOnPageRefresh();
}
login(credentials: Credentials): Observable<boolean> {
const headers = new HttpHeaders({ "Content-Type": "application/json" });
return this.http
.post(`${this.appConfig.apiEndpoint}/${this.appConfig.loginPath}`, credentials, { headers: headers })
.map((response: any) => {
this.browserStorageService.setLocal(this.rememberMeToken, credentials.rememberMe);
if (!response) {
this.authStatusSource.next(false);
return false;
}
this.setLoginSession(response);
this.authStatusSource.next(true);
return true;
})
.catch((error: HttpErrorResponse) => Observable.throw(error));
}
} @Injectable()
export class AuthService {
constructor(
@Inject(APP_CONFIG) private appConfig: IAppConfig,
private http: HttpClient,
private router: Router
) {
this.updateStatusOnPageRefresh();
}
logout(navigateToHome: boolean): void {
this.http
.get(`${this.appConfig.apiEndpoint}/${this.appConfig.logoutPath}`)
.finally(() => {
this.deleteAuthTokens();
this.unscheduleRefreshToken();
this.authStatusSource.next(false);
if (navigateToHome) {
this.router.navigate(["/"]);
}
})
.map(response => response || {})
.catch((error: HttpErrorResponse) => Observable.throw(error))
.subscribe(result => {
console.log("logout", result);
});
}
} > npm install jwt-decode --save
import * as jwt_decode from "jwt-decode";
getDecodedAccessToken(): any {
return jwt_decode(this.getRawAuthToken(AuthTokenType.AccessToken));
} {
"jti": "d1272eb5-1061-45bd-9209-3ccbc6ddcf0a",
"iss": "http://localhost/",
"iat": 1513070340,
"http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier": "1",
"http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name": "Vahid",
"DisplayName": "وحید",
"http://schemas.microsoft.com/ws/2008/06/identity/claims/serialnumber": "709b64868a1d4d108ee58369f5c3c1f3",
"http://schemas.microsoft.com/ws/2008/06/identity/claims/userdata": "1",
"http://schemas.microsoft.com/ws/2008/06/identity/claims/role": [
"Admin",
"User"
],
"nbf": 1513070340,
"exp": 1513070460,
"aud": "Any"
} getDisplayName(): string {
return this.getDecodedAccessToken().DisplayName;
} getAccessTokenExpirationDateUtc(): Date {
const decoded = this.getDecodedAccessToken();
if (decoded.exp === undefined) {
return null;
}
const date = new Date(0); // The 0 sets the date to the epoch
date.setUTCSeconds(decoded.exp);
return date;
} isAccessTokenTokenExpired(): boolean {
const expirationDateUtc = this.getAccessTokenExpirationDateUtc();
if (!expirationDateUtc) {
return true;
}
return !(expirationDateUtc.valueOf() > new Date().valueOf());
} isLoggedIn(): boolean {
const accessToken = this.getRawAuthToken(AuthTokenType.AccessToken);
const refreshToken = this.getRawAuthToken(AuthTokenType.RefreshToken);
const hasTokens = !this.isEmptyString(accessToken) && !this.isEmptyString(refreshToken);
return hasTokens && !this.isAccessTokenTokenExpired();
}
private isEmptyString(value: string): boolean {
return !value || 0 === value.length;
} 
const ProtectedRoute = ({ path, component: Component, render, ...rest }) => {
const history = useHistory();
const user = auth.getCurrentUser();
useEffect(() => {
const beforePath = history.location.pathname;
if (user && beforePath.toLowerCase() !== '/activation') {
if (user.status <= 0) {
history.push({
pathname: "/Activation"
});
}
}
// componentWillUnmount
return () => {
};
}); 
{
'detail[0].title':['message'],
'detail[0].detail[0].title':['message']
} private findFieldControl(fieldName: string): AbstractControl {
const path = fieldName.replace('[', '.').replace(']', '');
return (
this.form.get(path) || this.form.get(this.lowerCaseFirstLetter(path))
);
} 'detail.0.title' 'detail.0.detail.0.title'
protected handleSubmitError(response: HttpErrorResponse) {
this.messages = [];
if (response.status === 400) {
// handle validation errors
const validationDictionary = response.error;
for (const fieldName in validationDictionary) {
if (validationDictionary.hasOwnProperty(fieldName)) {
const messages = validationDictionary[fieldName];
const control = this.findFieldControl(fieldName);
if (control) {
// integrate into angular's validation if we have field validation
control.setErrors({
model: { messages: messages }
});
} else {
// if we have cross field validation, then show the validation error at the top of the screen
this.messages.push(...messages);
}
}
}
} else {
this.messages.push('something went wrong!');
}
} import someModule from './dir/someModule.js';
import('./dir/someModule.js')
.then(someModule => someModule.foo()); button.addEventListener('click', event => {
import('./dialogBox.js')
.then(dialogBox => {
dialogBox.open();
})
.catch(error => {
/* Error handling */
})
}); import('./myModule.js')
.then(({export1, export2}) => {
export1.run();
export2.fire();
}); Promise.all([
import('./module1.js'),
import('./module2.js'),
import('./module3.js'),
])
.then(([module1, module2, module3]) => {
// code
}); async function main() {
const myModule = await import('./myModule.js');
myModule.getInfo();
const {export1, export2} = await import('./myModule.js');
export1.run();
export2.fire()
}
main(); البته آقای Jake Archibald کد جالبی را برای این قابلیت پیشنهاد داده‌است که ترکیبی از import استاتیک ES6 میباشد:
function importModule (url) {
return new Promise((resolve, reject) => {
const script = document.createElement("script");
const tempGlobal = "__tempModuleLoadingVariable" + Math.random().toString(32).substring(2);
script.type = "module";
script.textContent = `import * as m from "${url}"; window.${tempGlobal} = m;`;
script.onload = () => {
resolve(window[tempGlobal]);
delete window[tempGlobal];
script.remove();
};
script.onerror = () => {
reject(new Error("Failed to load module script with URL " + url));
delete window[tempGlobal];
script.remove();
};
document.documentElement.appendChild(script);
});
}