[CLI] Build-time performance improvements.
[CLI] Global tools; replaces .NET CLI Tools (DotNetCliToolReference).
[CoreCLR] Minor-version roll-forward.
[CoreCLR] No-copy array slicing with Span<T>.
[CoreFX] HttpClient performance improvements.
[CoreFX] Windows Compatibility Pack.
[ASP.NET] SignalR is available for .NET Core.
[ASP.NET] HTTPS is on by default for ASP.NET.
[EF] Basic lazy loading support.
[EF] Support for Azure Cosmos DB.
Insight #1: React is here to stay
Insight #2: Angular is shifting to a new role --> enterprise apps
Insight #3: You can’t ignore Vue.js anymore
Insight #4: Knowledge of some libraries will help you earn more (but not for the reasons you might think)
Insight #5: 2018 will be the year of GraphQL
Insight #6: JavaScript != Front-end
Insight #7: Microsoft is striking back
Insight #8: JavaScript is different around the world
Insight #9: Typed JavaScript is on the rise
Insight #10: JavaScript is whatever you want it to be
npm install @angular/flex-layout --save
import { FlexLayoutModule } from "@angular/flex-layout";
@NgModule({
imports: [
FlexLayoutModule
],
exports: [
FlexLayoutModule
]
})
export class SharedModule {
} <div fxLayout="row"
fxLayout.xs="column"></div>
<div fxLayoutWrap></div>
<div fxLayoutGap="10px"></div>
<div fxLayoutAlign="start stretch"></div>
<div fxFlex="1 2 calc(15em + 20px)"></div>
fxFlex="grow shrink basis"
fxFlex="basis"
<div fxFlexOrder="2"></div>
<div fxFlexOffset="20px"></div>
<div fxFlexAlign="center"></div>
<div fxFlexFill></div>
fxLayout.sm = "..." fxLayoutAlign.md = "..." fxHide.gt-sm = "..."
<div fxShow fxHide.xs="false" fxHide.lg="true"></div>
<div fxFlex="50%" fxFlex.gt-sm="100%"></div>
<div fxShow [fxShow.xs]="isVisibleOnMobile()"></div>
<div fxHide [fxHide.gt-sm]="isVisibleOnDesktop()"></div>
<div [ngClass.sm]="{'fxClass-sm': hasStyle}" ></div>
<div [ngStyle.xs]="{color: 'blue'}"></div> 
export interface IUser {
id: number;
name: string;
email: string;
password: string;
} <form> <div class="form-group"> <label form="name">Username</label> <input id="name" type="text" class="form-control" /> </div> <div class="form-group"> <label form="email">Email</label> <input id="email" type="text" class="form-control" /> </div> <div class="form-group"> <label form="password">Password</label> <input id="password" type="password" class="form-control" /> </div> <button class="btn btn-primary" type="submit">Submit</button> </form>
import { Component } from '@angular/core';
import { Control, ControlGroup, Validators } from '@angular/common';
@Component({
selector: 'signup-form',
templateUrl: 'app/users/signup-form.component.html'
})
export class SignupFormComponent {
form = new ControlGroup({
name: new Control('', Validators.required),
email: new Control('', Validators.required),
password: new Control('', Validators.required)
});
onSubmit(): void {
console.log(this.form.value);
}
} <form [ngFormModel]="form" (ngSubmit)="onSubmit()"> <div class="form-group"> <label form="name">Username</label> <input id="name" type="text" class="form-control" ngControl="name"/> <label class="text-danger" *ngIf="!form.controls['name'].valid"> Username is required. </label> </div> <div class="form-group"> <label form="email">Email</label> <input id="email" type="text" class="form-control" ngControl="email" #email="ngForm"/> <label class="text-danger" *ngIf="email.touched && !email.valid"> Email is required. </label> </div> <div class="form-group"> <label form="password">Password</label> <input id="password" type="password" class="form-control" ngControl="password" #password="ngForm"/> <label class="text-danger" *ngIf="password.touched && !password.valid"> Password is required. </label> </div> <button class="btn btn-primary" type="submit">Submit</button> </form>
form = new ControlGroup({
name: new Control('', Validators.required),
email: new Control('', Validators.required),
password: new Control('', Validators.required)
}); import { Control, ControlGroup, Validators } from '@angular/common'; <form [ngFormModel]="form" (ngSubmit)="onSubmit()">
<label class="text-danger" *ngIf="!form.controls['name'].valid">
onSubmit(): void {
console.log(this.form.value);
} //same as before...
import { SignupFormComponent } from './users/signup-form.component';
@Component({
//same as before…
template: `
//same as before…
<li><a [routerLink]="['AddUser']">Add User</a></li>
//same as before…
`,
//same as before…
})
@RouteConfig([
//same as before…
{ path: '/adduser', name: 'AddUser', component: SignupFormComponent }
])
//same as before... import { Control, ControlGroup, Validators, FormBuilder } from '@angular/common';
form: ControlGroup;
constructor(formBuilder: FormBuilder) {
this.form = formBuilder.group({
name: ['', Validators.required],
email: ['', Validators.required],
password: ['', Validators.required]
});
} import { Control } from '@angular/common';
export class UsernameValidators {
static cannotContainSpace(control: Control) {
if (control.value.indexOf(' ') >= 0) {
return { cannotContainSpace: true };
}
return null;
}
} { required:true } {
minlength : {
requiredLength : 3,
actualLength : 1
}
} import { UsernameValidators } from './usernameValidators'; name: ['', Validators.compose([Validators.required, UsernameValidators.cannotContainSpace])],
<div class="form-group"> <label form="name">Username</label> <input id="name" type="text" class="form-control" ngControl="name" #name="ngForm" /> <div *ngIf="name.touched && name.errors"> <label class="text-danger" *ngIf="name.errors.required"> Username is required. </label> <label class="text-danger" *ngIf="name.errors.cannotContainSpace"> Username can't contain space. </label> </div> </div>
import {Control} from '@angular/common';
export class EmailValidators {
static email(control: Control) {
var regEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var valid = regEx.test(control.value);
return valid ? null : { email: true };
}
} control(value: Object, validator?: ValidatorFn, asyncValidator?: AsyncValidatorFn) : Control
nameShouldBeUnique(control: Control) {
let name: string = control.value;
return new Promise((resolve) => {
this._userService.isUserNameUnique(<IUser>{ "name": name }).subscribe(
(result: IResult) => {
resolve(
result.result ? null : { 'nameShouldBeUnique': true }
);
},
error => {
resolve(null);
}
);
});
} this.form = _formBuilder.group({
name: ['', Validators.compose([
Validators.required,
UsernameValidators.cannotContainSpace
]),
(control: Control) => this.nameShouldBeUnique(control)], import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Headers, RequestOptions } from '@angular/http';
import { IUser } from './user';
import { IResult } from './result';
@Injectable()
export class UserService {
private _checkUserUrl = '/home/checkUser';
constructor(private _http: Http) { }
private handleError(error: Response) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
isUserNameUnique(user: IUser): Observable<IResult> {
let headers = new Headers({ 'Content-Type': 'application/json' }); // for ASP.NET MVC
let options = new RequestOptions({ headers: headers });
return this._http.post(this._checkUserUrl, JSON.stringify(user), options)
.map((response: Response) => <IResult>response.json())
.do(data => console.log("User: " + JSON.stringify(data)))
.catch(this.handleError);
}
} export interface IResult {
result: boolean;
} namespace MVC5Angular2.Controllers
{
public class HomeController : Controller
{
[HttpPost]
public ActionResult CheckUser(User user)
{
var isUnique = new { result = true };
if (user.Name?.Equals("Vahid", StringComparison.OrdinalIgnoreCase) ?? false)
{
isUnique = new { result = false };
}
return new ContentResult
{
Content = JsonConvert.SerializeObject(isUnique, new JsonSerializerSettings
{
ContractResolver = new CamelCasePropertyNamesContractResolver()
}),
ContentType = "application/json",
ContentEncoding = Encoding.UTF8
};
}
}
} @Component({
selector: 'signup-form',
templateUrl: 'app/users/signup-form.component.html',
providers: [ UserService ]
})
export class SignupFormComponent {
constructor(private _formBuilder: FormBuilder, private _userService: UserService) { <div *ngIf="name.touched && name.errors"> <label class="text-danger" *ngIf="name.errors.required"> Username is required. </label> <label class="text-danger" *ngIf="name.errors.cannotContainSpace"> Username can't contain space. </label> <label class="text-danger" *ngIf="name.errors.nameShouldBeUnique"> This username is already taken. </label> </div>
<input id="name" type="text" class="form-control" ngControl="name" #name="ngForm" /> <div *ngIf="name.control.pending"> Checking server, Please wait ... </div>
onSubmit(): void {
console.log(this.form.value);
this.form.find('name').setErrors({
invalidData : true
});
} <div *ngIf="name.touched && name.errors"> <label class="text-danger" *ngIf="name.errors.invalidData"> Check the inputs.... </label> </div>
{ name="VahidN", email="email@site.com", password="123"} import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Headers, RequestOptions } from '@angular/http';
import { IUser } from './user';
import { IResult } from './result';
@Injectable()
export class UserService {
private _addUserUrl = '/home/addUser';
constructor(private _http: Http) { }
private handleError(error: Response) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
addUser(user: IUser): Observable<IUser> {
let headers = new Headers({ 'Content-Type': 'application/json' }); // for ASP.NET MVC
let options = new RequestOptions({ headers: headers });
return this._http.post(this._addUserUrl, JSON.stringify(user), options)
.map((response: Response) => <IUser>response.json())
.do(data => console.log("User: " + JSON.stringify(data)))
.catch(this.handleError);
}
} [HttpPost]
public ActionResult AddUser(User user)
{
user.Id = 1; //todo: save user and get id from db
return new ContentResult
{
Content = JsonConvert.SerializeObject(user, new JsonSerializerSettings
{
ContractResolver = new CamelCasePropertyNamesContractResolver()
}),
ContentType = "application/json",
ContentEncoding = Encoding.UTF8
};
} onSubmit(): void {
console.log(this.form.value);
/*this.form.find('name').setErrors({
invalidData : true
});*/
this._userService.addUser(<IUser>this.form.value)
.subscribe((user: IUser) => {
console.log(`ID: ${user.id}`);
});
} 
Angular 6 is out! The most outstanding changes are in its CLI and how services get injected. If you are looking to write your very first Angular 6 app—or Angular/Firebase app—in this tutorial, we’ll go over the basic steps of initial setup and create a small diary app.
