前回に引き続き、WebAPIを使って、ORCAから患者基本情報をとってこれるよう、プログラミングを行っていく。その際、認証情報をヘッダに書く必要がある。
まず、URLからデータを取得するためのサービスを作る。その名前を'Patient'にした。
すると、次のようなプログラムになる。
JS
- .service('Patient', ['$http', function($http) {
- this.get = function() {
- $http.defaults.headers.get = {
- 'Authorization' : 'Basic ' + window.btoa(g_user + ':' + g_passwd)
- };
- return $http.get('http://172.16.108.251:8000/api01rv2/patientgetv2?id=00001&format=json')
- .then(
- function(response) {
- return response.data.patientinfores.Patient_Information;
- },
- function(response) {
- alert('Error at Patient:' + JSON.stringify(response.data, null, 2));
- }
- );
- };
- }])
図1.サービス 'Patient'
g_userとg_passwdは自分の認証情報を代入して、教えてやらなければならないので、index.jsの1番最初に次のようなプログラムをうつ。
JS
- g_user = 'ormaster';
- g_passwd = '[ormasterのパスワード]';
図2.ORCAのユーザ名とパスワードの設定
次はモデルとビューの架け橋となるコントローラを作る。その名前を'PatientController'にした。すると、次のようなプログラムになる。
JS
- .controller('PatientController', ['$scope', 'Patient', function($scope, Patient) {
- var that = this;
- /* 患者情報の読み込み */
- Patient.get()
- .then(
- function(patient){
- that.Patient_ID = patient.Patient_ID;
- that.WholeName = patient.WholeName;
- that.BirthDate = patient.BirthDate;
- that.Sex = patient.Sex == '1' ? 'M' : 'F';
- }
- );
- }])
図3.コントローラ 'PatientController'
作成したPatientサービスをコントローラに注入して(1行目)、そのget()メソッドを使って患者情報を取得する(5行目)。取得した患者情報(患者ID、氏名、生年月日、性別)をコントローラのプロパティに設定し、ビュー(demographics.html)から参照できるようにした。なお、11行目は男性(patient.Sexが'1')なら'M'、女性(patient.Sexが'1'以外)なら'F'をthat.Sexに設定するコードである。
ビューではコントローラを経由して患者情報を出力する。
そして、図1と図3のプログラムを.serviceは.serviceが続いているところ、.controllerは.controllerが続いている、適切なところに挿入する。
こうしてモデル(Service)とコントローラを作成したわけであるが、ビュー(HTML)を作成しないとコントローラは動かないようである。そこで、ビュー(demographics.html)を次の図4のようにプログラミングして、患者基本情報を取得するようにする。
HTML
図4:demographics.htmlに書くプログラム |
1行目でPatientControllerをpatientという変数名で参照して、9行目で患者IDをpatient.Patient_IDで、13行目で患者名をpatient.WholeNameを使って出力している。
すると、図5のように、患者基本情報が取得された。
図5:患者基本情報が取得された基本情報の画面 |
alert('Success:' + JSON.stringify(response.data.patientinfores,null,2));と打って、うまく、すべての患者基本情報が取得されているのか見てみる。
すると、図6のようにうまく、すべての患者基本情報が取得されていることが分かった。
図6:alertした時の画面 |
AngularJSではデータを格納するモデルをサービスで、ビューをHTMLで、そして両者の橋渡しをコントローラを使って行っているのである。
次は、患者ID、氏名以外の項目も表示させられるよう、プログラムを修正していく。また、ORCAの患者データもそれらしい値を入力していく。