51ch @Nippon

こちらは高橋晃一の自己マンサイトです。万が一興味があればどうぞ。メッセージはお気軽に。

*

AngularJSでの構成を考えてみる

   

AngularJS使って、基本的な動かし方は、山田の本でわかったけど、
実際にwebサイトを作って、別途リソースサーバー立てて、
API接続していく際にどのような構成で作成したら良いかがわからないという話はよく聞きます。

そこで、MVCモデルに即しながら、良さげな落とし所を模索していきます。
よくあるページパターンである一覧→詳細

広告

app.js使う
一覧→詳細

①app.jsが呼ばれる
.state(‘app.page.item’, {
url: ‘brands/:brandId/categories/:categoryId/items/:itemId’,
templateUrl: ‘views/item.html’,
controller: ‘ItemMainCtrl’,
ncyBreadcrumb: {
label: ‘アイテム詳細’,
parent: ‘app.page.itemsBrandCategory’
}
})
パンくずは必要ないね
②controllers/item.jsのItemMainCtrlが呼ばれる
angular.module(‘feApp’)
.controller(‘ItemMainCtrl’, function($stateParams, item) {
item.selected = item.selectedId($stateParams.itemId);
});

・$stateParamsにitemIdが入って来るイメージ。その他、categoryIdとかも入ってきてるんだろうな
・itemモデルのselectedIdが呼ばれる、


③services/item.jsのselectedIdが呼ばれる
return {
mapper: mapper,
selectedId: function(id) {
return resource.getItem(id).map(function(data) {
console.log(data);
var e = data.data;
return mapper(e);
});
},
// 人気アイテム GET /items/pickup
getPickup: function(page, limit, ranking_type) {
var input = {};
if (ranking_type !== null) {
input.ranking_type = ranking_type;
}

④resource.jsでapi呼び出し
//GET v1/items/:id
this.getItem = function(id) {
return api().flatMapLatest(function() {
var promise = $http.get(opt.apiUrl + opt.apiVer + “/items” + “/” + id);
return rx.Observable.fromPromise(promise);
});
};

⑤各コントローラーに戻っていく。&①app.jsに戻りtemplateUrlであるviews

 - プログラミング ,

  関連記事

携帯からのWordPressが便利でいいーね

 私はiPhoneからWordPressの、アプリ経由で投稿してますが、PC …

文字列の先頭、末尾を条件に使う

スポンサードリンク 「hasPrefix」を使うと文頭に含まれているかどうかをチ …

iPhoneアプリリリース時の注意

iPhoneアプリリリース時に私が引っかかったのは、Archiveを取る時です。 …

swiftは大文字、小文字の区別が大事

  エラーがでている時に確認すべきポイントとして、大文字小文 …

ランダム値を発生させるときの注意点 UInt32

スポンサードリンク ランダム値を発生させるときの注意点。 ランダム値を発生させる …

no image
ボタンへのアクションの設定方法

ボタンの設定してアクションをつけ加える時は、 button.addTarget( …

バックグラウンドで音楽を再生したい

こちらを知りたいと思う時は、きっと既に音楽は流せれるようになったけど、 アプリを …

swift2.0でAWSのSNSを作ってみる

SNSからプッシュ通知を受け取るためのアプリ側での記述方法がswift2.0にな …

no image
アニメーション設定時の注意点

アニメーションを指定する時のUIViewの設定は、 UIView.animate …

Swift1.1→1.2のキャスト時の注意 AS

2015年4月にiOS 8.3が発表され,iPhoneアプリ開発ツールであるXc …