Javascript 取得日期與時間

//取得日期
function getDate(date)
{
 try
 {
  if(date)
  {
   var d = new Date(date);

   var month = d.getMonth()+1;
   var day = d.getDate();

   var output = d.getFullYear() + '/' +
    (month<10 ? '0' : '') + month + '/' +
    (day<10 ? '0' : '') + day;
   return output;
  }
  else
  {
   return ' ';
  }
 }
 catch(err)
 {
  if(App_Debug)
  {
   console.log(err);
  }  
 }
}
//取得時間
function getTime(date)
{
 try
 {
  if(date)
  {
   var d = new Date(date);

   var hours = d.getHours();
   var minutes = d.getMinutes();
   var seconds = d.getSeconds();

   var output = (hours<10 ? '0' : '') + hours + ':' +
    (minutes<10 ? '0' : '') + minutes + ':' +
    (seconds<10 ? '0' : '') + seconds;
   return output;
  }
  else
  {
   return ' ';
  }
 }
 catch(err)
 {
  if(App_Debug)
  {
   console.log(err);
  }  
 }
}

Angular2 Ajax

import { UiToolComponent } from 'app/ui-tool/ui-tool.component';

import { Http, Response, RequestOptions, Headers, Request, RequestMethod } from '@angular/http';

import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Rx';

import 'rxjs/add/operator/map';

@Injectable()

export class HttpServiceService {

// 定義 http 協定

constructor(private http: Http, private _uiComponent: UiToolComponent) { };

// 定義以 Post 的方法發出請求 (網址, 傳送參數)

postRequest(url, data) {

// 定義常數 headers 並且新增自定義 header

const headers = new Headers();

headers.append('Content-Type', 'application/json');

headers.append('Authorization', 'teset ' + localStorage.getItem('auth'));

// 定義常數 requestoptions 並且設定請求參數

const requestoptions = new RequestOptions({

method: RequestMethod.Post,

url: url,

headers: headers,

body: JSON.stringify(data)

});

// 實際發出請求 並且判斷特定請求代碼

return this.http

.request(new Request(requestoptions))

.map((res: Response) => {

// 請求成功時 回傳 json

if (res) {

if (res.status === 201) {

return res.json();

} else if (res.status === 200) {

return res.json();

}

}

// 請求失敗時

}).catch((error: any) => {

if (error.status === 500) {

this._uiComponent.errorDialog('未預期的伺服器錯誤');

} else if (error.status === 401) {

this._uiComponent.errorDialog('憑證授權已過期');

} else {

return Observable.throw(error.json());

}

});

}

// 定義以 Get 的方法發出請求 (網址)

getRequest(url) {

// 定義常數 headers 並且新增自定義 header

const headers = new Headers();

headers.append('Content-Type', 'application/json');

headers.append('Authorization', 'Bearer ' + localStorage.getItem('auth'));

// 定義常數 requestoptions 並且設定請求參數

const requestoptions = new RequestOptions({

method: RequestMethod.Get,

url: url,

headers: headers

});

// 實際發出請求 並且判斷特定請求代碼

return this.http

.request(new Request(requestoptions))

.map((res: Response) => {

// 請求成功時 回傳 json

if (res) {

if (res.status === 201) {

return res.json();

} else if (res.status === 200) {

return res.json();

}

}

// 請求失敗時

}).catch((error: any) => {

if (error.status === 500) {

return Observable.throw(new Error(error.status));

} else if (error.status === 401) {

return Observable.throw(new Error(error.status));

}

});

}

}

// 發出 Post 請求

this.httpService.postRequest('https://jsonplaceholder.typicode.com/posts', {}).subscribe(

(data) => console.log(data)

);

// 發出 Get 請求

const testUrl = 'https://jsonplaceholder.typicode.com/posts';

this.httpService

.getRequest(testUrl).subscribe(

(res) => {

console.log(res);

},

err => {

console.log(err.toString());

}

);

Angular2 上架專案的效能改善方法

使用AOT預編譯Angular2專案

http://ithelp.ithome.com.tw/articles/10187551

【重要】启用AOT+TreeShaking+Gzip大幅度压缩Angular2应用的体积

https://my.oschina.net/mumu/blog/830742

參考及引用上述文章

Angular2 字串連接

在 Angular2 中
當字串連接的時候 使用 ` 來取代 '
就可以不用多打字串連接的加號

例如
'<div></div>'+
'<div></div>'    

    ↓

`<div></div>

<div></div>`

VSCode 安裝的好用套件

Angular2 HTTP Ajax 完整檔案

import { Http, Response, RequestOptions, Headers, Request, RequestMethod } from '@angular/http';

import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Rx';

import 'rxjs/add/operator/map';

@Injectable()

export class HttpServiceService {

// 定義 http 協定

constructor(private http: Http) { };

// 定義以 Post 的方法發出請求 (網址, 傳送參數)

postRequest(url, data) {

// 定義常數 headers 並且新增自定義 header

const headers = new Headers();

headers.append('Content-Type', 'application/json');

headers.append('Authorization', 'Bearer ' + localStorage.getItem('auth'));

// 定義常數 requestoptions 並且設定請求參數

const requestoptions = new RequestOptions({

method: RequestMethod.Post,

url: url,

headers: headers,

body: JSON.stringify(data)

});

// 實際發出請求 並且判斷特定請求代碼

return this.http

.request(new Request(requestoptions))

.map((res: Response) => {

// 請求成功時 回傳 json

if (res) {

if (res.status === 201) {

return res.json();

} else if (res.status === 200) {

return res.json();

}

}

// 請求失敗時

}).catch((error: any) => {

if (error.status === 500) {

return Observable.throw(new Error(error.status));

} else if (error.status === 401) {

return Observable.throw(new Error(error.status));

}

});

}

// 定義以 Get 的方法發出請求 (網址)

getRequest(url) {

// 定義常數 headers 並且新增自定義 header

const headers = new Headers();

headers.append('Content-Type', 'application/json');

headers.append('Authorization', 'Bearer ' + localStorage.getItem('auth'));

// 定義常數 requestoptions 並且設定請求參數

const requestoptions = new RequestOptions({

method: RequestMethod.Get,

url: url,

headers: headers

});

// 實際發出請求 並且判斷特定請求代碼

return this.http

.request(new Request(requestoptions))

.map((res: Response) => {

// 請求成功時 回傳 json

if (res) {

if (res.status === 201) {

return res.json();

} else if (res.status === 200) {

return res.json();

}

}

// 請求失敗時

}).catch((error: any) => {

if (error.status === 500) {

return Observable.throw(new Error(error.status));

} else if (error.status === 401) {

return Observable.throw(new Error(error.status));

}

});

}

}

Angular2 import Jquery

在 .ts 檔裡面 import 的後面加入這行

declare var $: any;

就可以讓 Angular2 不針對 Jquery 語法報錯誤訊息