私はionicフレームで豆板図書館を書きました.

ionic:集中移動アプリケーションUIとangglarjsフレームと全身のHybrid Appフレーム
ionicを利用して、私達は簡単に元のアプリケーションUIと体験を持つモバイルアプリを作ることができます.
今回は図書アプリを作って、基本的な機能を実現しました.図書の種類を検索して、図書の詳細を調べて、図書のラベルを探して、図書のメモを調べます.もちろん、歌を聴いたり、映画を探したりもします......
まずスクリーンショットを何枚か見せてください
総覧
フロントエンド:ionicフレーム=>angglarjs、ui-router、ngResource
バックエンド:nodejs=>express,request
機能の実現:テーマ検索、タグ検索、ビュー内のジャンプ、ボトムアップ、ローダー、図書レビュー
フロントエンドUI:主にionic中原UIコンポーネントを採用しています.
データソース:データベースを配置していません.すべてのデータは豆瓣APIから来ています.フロントエンドAjaxではCORSのドメイン横断問題がありますので、nodejs配置によってデータ要求を行い、フロントエンドに転送します.
フロントエンドインタラクション:ionicと結合したangglarjsを採用しました.それに、ionicは一部のコンポーネントを最適化してくれました.uiインタラクションはモバイルアプリケーションの感覚に適合しています.私たちはionicパッケージの良いコンポーネントを利用するだけで、モバイルアプリケーションと似たような体験ができます.
構造
ルート:www/js/app.js.angglarjs主ファイルapp.jsにurlとhtmlテンプレートのマッピングを配置する.このように、いくつかのビューの埋め込みビューが含まれています.特殊な書き方があります.具体的にはui-routerを参照してください.

  //app.js
.state('tab', {
  url: '/tab',
  abstract: true,
  templateUrl: 'templates/tabs.html'
})

アプリ:www/js/api.js.バックエンドとデータインターフェースを予約してから、データを要求できます.もちろん、元のAjaxでお願いしてもいいです.でも、Onicはanglarjsベースで構築されています.私たちはanglarjsのngResourceサービス配置アプリを使います.具体的にはこのように

//BooksResource.js

Books.$inject = ['$resource'];
function Books($resource) {
  return $resource('/api/books/', {},
  {'query': {method: 'GET'}})
}

テンプレート:templatesフォルダにテンプレートを置いて、4つのメインビューと1つの詳細ビューに対応します.各ビューファイルには、一つのhtmlテンプレートと一つのjsファイル(コントローラ)が含まれています.コントローラは何ですか?簡単に言えば、あなたが普段書いているjsファイルと同じように、対応するhtmlを「制御」します.
アプリ、テンプレート、ルートを定義したら、ページを書くことができます.私たちが要求したデータは全部コントローラのファイルで定義して、ファイルに引用すればいいです.
基本構造はこのようにして、興味がある学生はgitができますか?機能が完備しています.歓迎します.prhttps://github.com/ManInBoat/...