import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `<h1>Hello Angular world</h1>`
})
export class HelloWorld { 
}

import { Component } from '@angular/core';
@Component({
  selector: 'hello-ng-world',
  template: `<h1>Hello {{title}} world</h1>`
})
export class HelloWorld { 
title = 'Angular 4'; 
}

updateValue(value: any) {
    this.label = value;
}

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyAppComponent }  from './app.component';
 
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ MyAppComponent ],
  bootstrap:    [ MyAppComponent ]
})
export class MyAppModule { }

import { Injectable } from '@angular/core';
 
@Injectable()
export class TimeService {
  constructor() { }
  getTime(){
    return `${new Date().getHours()} : ${new Date().getMinutes()} : ${new Date().getSeconds()}`;
  }
}

import { Component } from '@angular/core';
import { TimeService } from './time.service';
@Component({
  selector: 'app-root',
  providers: [TimeService],
  template: `<div>Date: {{timeValue}}</div>,
})
export class SampleComponent {
  // Component definition
}

export class SampleComponent {
  timeValue: string = this.time.getTime(); // Template shows
  constructor(private time: TimeService){
  }
}

import { Injectable } from '@angular/core';
 
@Injectable()
export class TimeService {
  constructor() { }
  getTime(){
    let dateObj: Date = new Date();
    return `${dateObj.getDay()}/${dateObj.getMonth()}/${dateObj.getFullYear()}`;
  }
}

@NgModule({
  declarations: [
    AppComponent,
    SampleComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [TimeService],
  bootstrap: [AppComponent]
})
export class AppModule { }

// instead of providers: [TimeService] you may use the following,
  providers: [{provide: TimeService, useClass: TimeService}]

@Injectable()
export class AlternateTimeService extends TimeService {
 
  constructor() {
    super();
   }
 
  getTime(){
    let dateObj: Date = new Date();
    return `${dateObj.getDay()}/${dateObj.getMonth()}/${dateObj.getFullYear()}
                   ${dateObj.getHours()}:${dateObj.getMinutes()}`;
  }
}

interface Time{
    getTime(): string
}
export default Time;

@Injectable()
export class TimeService implements Time {
  constructor() { }
 
  getTime(){
    let dateObj: Date = new Date();
    return `${dateObj.getDay()}/${dateObj.getMonth()}/${dateObj.getFullYear()}`;
  }
}

// create an object of InjectionToken that confines to interface Time
let Time_Service = new InjectionToken<Time>('Time_Service');
 
// Provide the injector token with interface implementation.
providers: [{provide: Time_Service, useClass: TimeService}]
  
// inject the token with @inject decorator
constructor(@Inject(Time_Service) ts,) {
      this.timeService = ts;
}
 
// We can now use this.timeService.getTime().

providers: [{provide: TimeService, useValue: {
  getTime: () => `${dateObj.getDay()} - ${dateObj.getMonth()} - ${dateObj.getFullYear()}`
}}]

providers: [provide: Time_Service, useValue: {
  getTime: () => 'A date value'
}}]

Import Input()
import { Component, OnInit, Input } from '@angular/core';

@input() showRegister: boolean;

@Input("should-show-register") showRegister: boolean;

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Output() onLogin: EventEmitter<{userId: string, password: string}>;

constructor() {
  this.onLogin = new EventEmitter();
}

loginClicked(userId, password) {
  this.onLogin.next({userId, password})
}

loginHandle(event) {
  console.log(event);
  // Perform login action.
}
// Output: Object {userId: "sampleUser", password: "samplePassword"}

@Output("login") onLogin: EventEmitter<{userId: string, password: string}>;

import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
 
@Component({
  selector: 'app-child',
  template: '  <h2>{{values.title}}</h2> <h2>{{values.description}}</h2>',
  styleUrls: ['./child.component.css'],
  changeDetection: ChangeDetectionStrategy.Default
})
export class ChildComponent implements OnInit {
 
// Input is an object type.
  @Input() values: {
    title: string;
    description: string;
  }
 
  constructor() { }
 
  ngOnInit() {}
 
}

updateValues(param1, param2){
  this.values.title = param1;
  this.values.description = param2;
}

updateValues(param1, param2){
  this.values = { // create a new object for each change.
    title: param1,
    description: param2
  }
}

var firstName: string, lastName: string ;
//returns an error, Type 'null' is not assignable to type 'string'.
firstName = null;
// returns an error, Type 'undefined' is not assignable to type 'string'.
lastName = undefined;

var firstName: string | null, lastName: string | undefined ;
// This will work
firstName = null;
lastName = undefined;

this.http    
      .get("https://dinosaur-facts.firebaseio.com/dinosaurs.json")

this.http     
      .get("http://localhost:3000/dino")
      .map((response) => response.json())

import 'rxjs/add/operator/map'; // Preferred way to import

import 'rxjs';

this.http
  .get("https://dinosaur-facts.firebaseio.com/dinosaurs.json")
  .map((response) => response.json())
  .subscribe(
    (data) => console.log(data), // success
    (error) => console.error(error), // failure
    () => console.info("done") // done
  );

dino: Observable<any>; // class level variable declaration
 
 
// in the given function, where the API call run set returned observable to the // class variable
     
 this.dino = this.http // Set returned observable to a class variable
      .get("https://dinosaur-facts.firebaseio.com/dinosaurs.json")
      .map((response) => response.json());

import 'rxjs/add/operator/toPromise';

getData(): Promise<any>{
  return this.http
  .get("https://dinosaur-facts.firebaseio.com/dinosaurs.json")
  .map((response) => response.json())
  .toPromise();
}

this.getData()
  .then((data) =>  this.dino = data)
  .catch((error) => console.error(error));

const routes: Routes = [
  {
    path: 'home',
    component: Sample1Component,
  },
  {
    path: 'second2',
    component: Sample2Component
  },
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  }
];

const routes: Routes = [
  {
    path: 'home',
    component: Sample1Component,
    children: [
      {
        path: 'second',
        component: Sample2Component
      }
    ]
  }
  //... rest of the configuration.    
]
 
// Template for Sample1Component

{        
    path: details/:id,
    component: DetailsComponent
}

// inject activatedRoute
constructor(private activeRoute: ActivatedRoute) { }
 
// Read value from the observable     
this.activeRoute
      .params
      .subscribe((data) => console.log(data[id]));

import presets from './presets';

const defaultConfig = {
  ...presets.noWobble,
  precision: 0.01,
};

export default function spring(val: number, config) {
  return {...defaultConfig, ...config, val};
}

export default {
  noWobble: {stiffness: 170, damping: 26}, // the default, if nothing provided
  gentle: {stiffness: 120, damping: 14},
  wobbly: {stiffness: 180, damping: 12},
  stiff: {stiffness: 210, damping: 20},
};

/* @flow */
import mapToZero from './mapToZero';
import stripStyle from './stripStyle';
import stepper from './stepper';
import defaultNow from 'performance-now';
import defaultRaf from 'raf';
import shouldStopAnimation from './shouldStopAnimation';
import React from 'react';
import PropTypes from 'prop-types';

import type {ReactElement, PlainStyle, Style, Velocity, MotionProps} from './Types';

const msPerFrame = 1000 / 60;

type MotionState = {
  currentStyle: PlainStyle,
  currentVelocity: Velocity,
  lastIdealStyle: PlainStyle,
  lastIdealVelocity: Velocity,
};

export default class Motion extends React.Component<MotionProps, MotionState> {
  static propTypes = {
    // TOOD: warn against putting a config in here
    defaultStyle: PropTypes.objectOf(PropTypes.number),
    style: PropTypes.objectOf(PropTypes.oneOfType([
      PropTypes.number,
      PropTypes.object,
    ])).isRequired,
    children: PropTypes.func.isRequired,
    onRest: PropTypes.func,
  };

  constructor(props: MotionProps) {
    super(props);
    this.state = this.defaultState();
  }

  wasAnimating: boolean = false;
  animationID: ?number = null;
  prevTime: number = 0;
  accumulatedTime: number = 0;

  defaultState(): MotionState {
    const {defaultStyle, style} = this.props;
    const currentStyle = defaultStyle || stripStyle(style);
    const currentVelocity = mapToZero(currentStyle);
    return {
      currentStyle,
      currentVelocity,
      lastIdealStyle: currentStyle,
      lastIdealVelocity: currentVelocity,
    };
  }

  // it's possible that currentStyle's value is stale: if props is immediately
  // changed from 0 to 400 to spring(0) again, the async currentStyle is still
  // at 0 (didn't have time to tick and interpolate even once). If we naively
  // compare currentStyle with destVal it'll be 0 === 0 (no animation, stop).
  // In reality currentStyle should be 400
  unreadPropStyle: ?Style = null;
  // after checking for unreadPropStyle != null, we manually go set the
  // non-interpolating values (those that are a number, without a spring
  // config)
  clearUnreadPropStyle = (destStyle: Style): void => {
    let dirty = false;
    let {currentStyle, currentVelocity, lastIdealStyle, lastIdealVelocity} = this.state;

    for (let key in destStyle) {
      if (!Object.prototype.hasOwnProperty.call(destStyle, key)) {
        continue;
      }

      const styleValue = destStyle[key];
      if (typeof styleValue === 'number') {
        if (!dirty) {
          dirty = true;
          currentStyle = {...currentStyle};
          currentVelocity = {...currentVelocity};
          lastIdealStyle = {...lastIdealStyle};
          lastIdealVelocity = {...lastIdealVelocity};
        }

        currentStyle[key] = styleValue;
        currentVelocity[key] = 0;
        lastIdealStyle[key] = styleValue;
        lastIdealVelocity[key] = 0;
      }
    }

    if (dirty) {
      this.setState({currentStyle, currentVelocity, lastIdealStyle, lastIdealVelocity});
    }
  };

  startAnimationIfNecessary = (): void => {
    // TODO: when config is {a: 10} and dest is {a: 10} do we raf once and
    // call cb? No, otherwise accidental parent rerender causes cb trigger
    this.animationID = defaultRaf((timestamp) => {
      // check if we need to animate in the first place
      const propsStyle: Style = this.props.style;
      if (shouldStopAnimation(
        this.state.currentStyle,
        propsStyle,
        this.state.currentVelocity,
      )) {
        if (this.wasAnimating && this.props.onRest) {
          this.props.onRest();
        }

        // no need to cancel animationID here; shouldn't have any in flight
        this.animationID = null;
        this.wasAnimating = false;
        this.accumulatedTime = 0;
        return;
      }

      this.wasAnimating = true;

      const currentTime = timestamp || defaultNow();
      const timeDelta = currentTime - this.prevTime;
      this.prevTime = currentTime;
      this.accumulatedTime = this.accumulatedTime + timeDelta;
      // more than 10 frames? prolly switched browser tab. Restart
      if (this.accumulatedTime > msPerFrame * 10) {
        this.accumulatedTime = 0;
      }

      if (this.accumulatedTime === 0) {
        // no need to cancel animationID here; shouldn't have any in flight
        this.animationID = null;
        this.startAnimationIfNecessary();
        return;
      }

      let currentFrameCompletion =
        (this.accumulatedTime - Math.floor(this.accumulatedTime / msPerFrame) * msPerFrame) / msPerFrame;
      const framesToCatchUp = Math.floor(this.accumulatedTime / msPerFrame);

      let newLastIdealStyle: PlainStyle = {};
      let newLastIdealVelocity: Velocity = {};
      let newCurrentStyle: PlainStyle = {};
      let newCurrentVelocity: Velocity = {};

      for (let key in propsStyle) {
        if (!Object.prototype.hasOwnProperty.call(propsStyle, key)) {
          continue;
        }

        const styleValue = propsStyle[key];
        if (typeof styleValue === 'number') {
          newCurrentStyle[key] = styleValue;
          newCurrentVelocity[key] = 0;
          newLastIdealStyle[key] = styleValue;
          newLastIdealVelocity[key] = 0;
        } else {
          let newLastIdealStyleValue = this.state.lastIdealStyle[key];
          let newLastIdealVelocityValue = this.state.lastIdealVelocity[key];
          for (let i = 0; i < framesToCatchUp; i++) {
            [newLastIdealStyleValue, newLastIdealVelocityValue] = stepper(
              msPerFrame / 1000,
              newLastIdealStyleValue,
              newLastIdealVelocityValue,
              styleValue.val,
              styleValue.stiffness,
              styleValue.damping,
              styleValue.precision,
            );
          }
          const [nextIdealX, nextIdealV] = stepper(
            msPerFrame / 1000,
            newLastIdealStyleValue,
            newLastIdealVelocityValue,
            styleValue.val,
            styleValue.stiffness,
            styleValue.damping,
            styleValue.precision,
          );

          newCurrentStyle[key] =
            newLastIdealStyleValue +
            (nextIdealX - newLastIdealStyleValue) * currentFrameCompletion;
          newCurrentVelocity[key] =
            newLastIdealVelocityValue +
            (nextIdealV - newLastIdealVelocityValue) * currentFrameCompletion;
          newLastIdealStyle[key] = newLastIdealStyleValue;
          newLastIdealVelocity[key] = newLastIdealVelocityValue;
        }
      }

      this.animationID = null;
      // the amount we're looped over above
      this.accumulatedTime -= framesToCatchUp * msPerFrame;

      this.setState({
        currentStyle: newCurrentStyle,
        currentVelocity: newCurrentVelocity,
        lastIdealStyle: newLastIdealStyle,
        lastIdealVelocity: newLastIdealVelocity,
      });

      this.unreadPropStyle = null;

      this.startAnimationIfNecessary();
    });
  };

  componentDidMount() {
    this.prevTime = defaultNow();
    this.startAnimationIfNecessary();
  }

  componentWillReceiveProps(props: MotionProps) {
    if (this.unreadPropStyle != null) {
      // previous props haven't had the chance to be set yet; set them here
      this.clearUnreadPropStyle(this.unreadPropStyle);
    }

    this.unreadPropStyle = props.style;
    if (this.animationID == null) {
      this.prevTime = defaultNow();
      this.startAnimationIfNecessary();
    }
  }

  componentWillUnmount() {
    if (this.animationID != null) {
      defaultRaf.cancel(this.animationID);
      this.animationID = null;
    }
  }

  render(): ReactElement {
    const renderedChildren = this.props.children(this.state.currentStyle);
    return renderedChildren && React.Children.only(renderedChildren);
  }
}

const framesToCatchUp = Math.floor(this.accumulatedTime / msPerFrame);
if (this.accumulatedTime > msPerFrame * 10) {
    this.accumulatedTime = 0;
}

if (this.accumulatedTime === 0) {
// no need to cancel animationID here; shouldn't have any in flight
    this.animationID = null;
    this.startAnimationIfNecessary();
    return;
}
...
for (let i = 0; i < framesToCatchUp; i++) {
    [newLastIdealStyleValue, newLastIdealVelocityValue] = stepper(
        msPerFrame / 1000,
        newLastIdealStyleValue,
        newLastIdealVelocityValue,
        styleValue.val,
        styleValue.stiffness,
        styleValue.damping,
        styleValue.precision,
    );
}
...
this.accumulatedTime -= framesToCatchUp * msPerFrame

/* @flow */

// stepper is used a lot. Saves allocation to return the same array wrapper.
// This is fine and danger-free against mutations because the callsite
// immediately destructures it and gets the numbers inside without passing the
// array reference around.
let reusedTuple: [number, number] = [0, 0];
export default function stepper(
  secondPerFrame: number,
  x: number,
  v: number,
  destX: number,
  k: number,
  b: number,
  precision: number): [number, number] {
  // Spring stiffness, in kg / s^2

  // for animations, destX is really spring length (spring at rest). initial
  // position is considered as the stretched/compressed position of a spring
  const Fspring = -k * (x - destX);

  // Damping, in kg / s
  const Fdamper = -b * v;

  // usually we put mass here, but for animation purposes, specifying mass is a
  // bit redundant. you could simply adjust k and b accordingly
  // let a = (Fspring + Fdamper) / mass;
  const a = Fspring + Fdamper;

  const newV = v + a * secondPerFrame;
  const newX = x + newV * secondPerFrame;

  if (Math.abs(newV) < precision && Math.abs(newX - destX) < precision) {
    reusedTuple[0] = destX;
    reusedTuple[1] = 0;
    return reusedTuple;
  }

  reusedTuple[0] = newX;
  reusedTuple[1] = newV;
  return reusedTuple;
}

$scope.getQueryParams = function () {};//错误
function getQueryParams() {}//正确

function doSomething(list) {
    if (Array.isArray(list)) {
        const head = list[0]
        if (head !== undefined) {
            const {username,tel} = head;
            return `${username}'s tel is ${tel}`
        } else {
            throw new Error("should has a Element")
        }
    } else {
        throw new Error("list must be a Array")
    }
}
try {
    const ret = doSomething([{username: "xiaomin",tel: "13333332223"}])
    console.log(ret)
} catch (e) {
    console.error(e)
}

import React,{ Component } from "react"
import { map } from "lodash"
export default class List extends Component {
    render() {
        const { list } = this.props
        return (<ul>
            {
                map(list,item => (<li>
                    {item.name}
                </li>))
            }
        </ul>)
    }
}