認証情報は下記のプログラムを書いてみる。(g_user、g_passwdをそれぞれORCAのユーザ名、パスワードとする)
$http.defaults.headers.get = { 'Authorization' : 'Basic ' + window.btoa(g_user + ':' + g_passwd) };
残りのプログラミングをどう書けばいいのか分からないので、あるブログのこの記事の患者基本情報をところ、サイト①とサイト②を参考にして、プログラミングしてみた。
それぞれプログラミングしたのは以下の3枚である
図1:あるブログを参考にしたプログラム |
図2:サイト①を参考にしたプログラム |
図3:サイト②を参考にしたプログラム |
【コメント】
認証のための下記のプログラムにおいて、g_userとg_passwdは変数です。文字列定数ではありません。
$http.defaults.headers.get = { 'Authorization' : 'Basic ' + window.btoa(g_user + ':' + g_passwd) };ですから前もってg_userとg_passwdにはORCAのユーザ('ormaster')とパスワードを代入しておく必要があります。
g_user = 'ormaster'; g_passwd = '[ormasterのパスワード]';定数と変数の違いに注意してください。図1~3のいずれも定数と変数を混同しています(ormasterは変数ではありません)。
【AngularJSのプログラム作法】
AngilarJSでスマホアプリを開発するにはその作法に従う必要があります。
まず、URLからデータを取得する(いわゆるWebAPI)ためのサービスを作ります。その名前を'Patient'とすると次のようなプログラムになるでしょう。
.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'
次にモデルとビューの懸け橋となるコントローラを作ります。その名前を'PatientController'とすると、プログラムは次のようになるでしょう。
.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'; } ); }])
図2. コントローラ'PatientController'
作成したPatientサービスをコントローラに注入して(1行目)、そのget()メソッドを使って患者情報を取得します(5行目)。取得した患者情報(患者ID、氏名、生年月日、性別)をコントローラのプロパティに設定し、ビュー(demographics.html)から参照できるようにします。
ビューではコントローラを経由して患者情報を出力します。
<ons-page ng-controller="PatientController as patient"> <ons-toolbar> <div class="center">Demographics</div> </ons-toolbar> <ons-list> <ons-list-header>基本情報</ons-list-header> <ons-list-item> <ons-col width="20%">患者ID</ons-col> <ons-col>{{ patient.Patient_ID }}</ons-col> </ons-list-item> <ons-list-item> <ons-col width="20%">氏名</ons-col> <ons-col>{{ patient.WholeName }}</ons-col> </ons-list-item> </ons-list> </ons-page>
図3. ビュー(demographics.html)
ここでは、1行目でPatientControllerをpatientという変数名で参照して、9行目で患者IDをpatient.Patient_IDで、13行目で患者名をpatient.WholeNameを使って出力しています。
このように、AngularJSではデータを格納するモデルをサービスで、ビューをHTMLで、そして両者の橋渡しをコントローラを使って行います。このことを念頭に置いてプログラムの設計を行う必要があります。
0 件のコメント:
コメントを投稿