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

 - プログラミング ,

  関連記事

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

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

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

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

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

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

【AngularJS】user別に紐づく値を取得

ユーザーごとに表示する値を変更する場合のメモ。 例えば、ユーザーが保持しているポ …

ファビコンの設定

Stinger5のテーマを使わせてもらって、ファビコンがディフォルトのままだった …

swift UITableViewControrlarかUIViewControlarか

普通はUIViewController, UITableViewDataSour …

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

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

iOS Dev Centerへのアクセス

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

Error loading apple credentials from file

プッシュ通知の機能を実装する上で、自前でサーバーを準備するのは大変なので、AWS …

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

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