0

Ionic アプリケーションの機能ごとにコーディングする方法を知りたいです (この点は、すべてのシングル ページ アプリケーションに拡大する必要があります)。

次のような index.html があるとします。

<!DOCTYPE html>
<html ng-app="ionicApp">

  <head>
      ....
  </head>
  <body>
      <ion-nav-bar class="bar-positive">
    </ion-nav-bar>

    <ion-tabs class="tabs-positive" animation="slide-left-right">
        <ion-tab icon="ion-home" ui-sref="home">
            <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>
        <ion-tab icon="ion-android-search" ui-sref="some-tab">
            <ion-nav-view name="some-tab" ></ion-nav-view>
        </ion-tab>
        <ion-tab icon="ion-android-settings" ui-sref="settings">
            <ion-nav-view name="settings-tab" ></ion-nav-view>
        </ion-tab>


    </ion-tabs>
 </body>
</html>

そして、次のような app.js ファイル:

var app = angular.module('ionicApp', ['ionic', 'ratings']);

app.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/')

$stateProvider
.state('default', {
  url: "/",
  views: {
    'home-tab': {
      templateUrl: "templates/home.html",
      controller: 'HomeTabCtrl'
    }
  }
})
...
  });


});

さまざまなタスクを実行するさまざまなモジュールをロードするにはどうすればよいですか? これが別の html ページが読み込まれている状況 (標準の Web アプリ) である場合、ページの上部にあるモジュール参照を変更できます。しかし、SPA を使用すると、毎回同じ index.html ファイルが読み込まれます。

では、Ionic でモジュール化されたコードを実現するにはどうすればよいでしょうか?

4

3 に答える 3

2

私はPodmedicsでいくつかの仕事をしており、最近は多くの Ionic アプリを作成しています。モジュール化されたコードを書きたいというまったく同じ問題に直面しました。モジュール化されたパターンを使用するスターター プロジェクトを実際に構築しました (ただし、ionic-starter プロジェクトとは異なります)。podmedics/ionic_starterをチェックしてください。

主な原則は、ディレクトリ構造が機能ごとに編成され、各機能が個別のモジュールとしてロードされることです。Ionic の場合、各機能はアプリ内の異なるビューを表します。index.html基本的なアプリ構造の概要を示します。他のすべては内部に存在し/appます。チェックアウトしてくださいapp.module.js。coreが最初にdata読み込まれ、次に各機能がその下に読み込まれます。

コアモジュールは/coreディレクトリ内にあります。ionicやなどの依存モジュールを取り込みますngCordova。や関数など、他のほとんどの ionic プロジェクトでconfig.js通常見られるすべてのものが含まれています。また、 API エンドポイントやキーなどを保存するためのファイルもここに追加しました。app.js.run.configconstants.js

/dataコントローラーにデータを提供するために使用する工場またはサービスが含まれています。私たちのアプリの中には、これらがたくさんあるものがあります。その後、必要に応じてビュー/機能を追加します。

コードには十分なコメントが付けられているため (私たちも他の人も従う必要があります)、その背後にある構造と方法論を非常に簡単に理解できるはずです。

ああ、私たちが使用したコードパターンは、主に johnpapa/ng-demos/modular に基づいています (申し訳ありませんが、別のリンクを提供できません。明らかに十分な担当者がいません:(しかし、見つけるのは難しくありません)。

幸せなコーディング...

于 2015-03-28T22:28:06.897 に答える
0

モジュール化の一種は、AMD (Asynchronous Module Definition) を使用して実現できます。このionic with angular example を参照してください。

ビューのさまざまな部分を 1 つの場所にロードするだけの場合は、ngBindHtmlを使用できます。

于 2015-02-12T10:02:21.347 に答える
0

@quilligana と同様のアプローチをとっています。ui-router を使用して、アプリの構造を定義します。各ルートには独自のコントローラーがあり、モジュール性は共有サービスとディレクティブの使用によってもたらされます。これらはすべて、スコープ階層のいずれかの方向に送信されるイベントによって結合されます。ディレクトリ構造は次のとおりです。

app/
   controllers/
   services/
   directives/
   views/
   styles/

grunt-ng-constantノード パッケージを使用して、さまざまなキーとエンドポイントを格納するための優れたソリューションを見つけました。これにより、環境に基づいてさまざまな変数を設定できます。これはすべてGruntfile.jsで管理されます。それがあなたが使っているものなら、彼らはGulp用のものも作っていると思います。

これが役立つことを願っています！

于 2015-04-17T05:04:23.053 に答える