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

 - プログラミング ,

  関連記事

AngularJS×BootstrapでModal作成 Angularバージョン注意!

<Situation> よくwebサイトで見かけるモーダルを UiBootstr …

no image
Double型結果誤差

Double型では大きな数値や少数の計算をすると計算結果に誤差が生じます。 これ …

ng−click2回

芸人で言ったらただの一発芸です。 AngularJSを利用して、一つのclick …

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

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

iOS Dev Centerへのアクセス

iPhoneアプリをリリースするには、 1、Certificatesの設定 2、 …

no image
無料配布のFacebookやTwitterのソーシャルロゴアイコン素材まとめ23選|LIG INC.

アプリにソーシャルボタンを設置するときに、デザインがなく困っていたところ、 こち …

エラーSIGABRTのとき

エラーとしてはSIGABRTが出ちゃうパターン。 ログを見ると、 「this c …

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

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

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

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

Stinger smart.cssが表示されない 犯人はイニシャルP.Jだ!

51chはWordPressで、もはや猫も杓子ものStinger3をテーマに使わ …