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

 - プログラミング ,

  関連記事

CSVをMySQLへ取り込み&改行コードについて

■背景 今回、Mac端末を使って、csvファイルからMySqlのテーブルにデータ …

AWSのSNS準備 BFTaskでエラー

AWSのSNS準備のため、アプリ側のAppDelegateにQiitaで多数アッ …

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

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

no image
Double型結果誤差

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

URLの埋め込み&日本語検索(エンコード)

単純に、アプリ内にURLを埋め込んで、ボタンを押したらリンク先に飛べるようにした …

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

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

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

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

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

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

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

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

EXC_BAD_INSTRUCTIONの発生回避

このエラーは、メモリが関係している記事がいくつか見つかった。 http://to …