ハイブリッドIonicアプリと通常のモバイルWebサイト間でのangularJSコード共有


11

さて、私たちの「イノベーションラボ」では、ネイティブアクセス用にCordovaの上に構築されたハイブリッドアプリフレームワークであるIonicと、「Webコード」用のangularJSを使用するよう求めています。

たとえば、レスポンシブデザインにAngular +ブートストラップを使用する、純粋なモバイルWebプロジェクトもあります。

重要なのは、今後のプロジェクトによっては、モバイルWebサイトとネイティブアプリ(イオンハイブリッド)の両方が必要になるということです。ほとんどの機能と画面は同じで、バックエンドとほとんどのUIを共有していますが、それでもいくつかの違いがあります。

だから私の質問です。イオンプロジェクトと2つの異なる展開アプローチを使用した通常の角度のあるWebサイトの両方になるようにプロジェクトを構築する方法。ほとんどのコードが再利用されていますが、モバイルWebサイトの一部のビューとハイブリッドアプリの一部のビュー(より多くのネイティブコンポーネントと規則を使用)、ルーティングの違いもある可能性があります。

それは良い考えですか?

そして、共有コードで、あなたがどちらの場合であるかを知る簡単な方法はありますか?一部のIF、一部のディレクティブはコンテキスト外では非アクティブなど

私が気付かないかもしれないある種のミッシングリンクがあるように感じます。

前もって感謝します。

回答:


2

いくつかのアトミック コンポーネント(https://docs.angularjs.org/guide/component)/サービスを含む共有カーネルを構築できます。

Webアプリ、Androidアプリ、iOSアプリ、監視アプリ...すべて、カーネルによって提供される機能を適応的に使用します。

Androidアプリをデプロイする場合を想像してみてください。一部のAndroid機能とともに、https://material.ioを使用することには意味があります。iOSアプリは異なるデザインになります(https://developer.apple.com/ios/human-interface-guidelines/overview/themes/)など...

強固な実装を構築し、アトミックコンポーネントを使用してそれらを適応させます!


0

Ionicを使用するモバイルアプリ、およびAngularJSまたはAngularを使用するWebアプリの場合、これらのアプリの一部は、サーバーに接続してデータを取得するのと同様に機能を共有することは非常に一般的ですが、そのコードのコピーがないことを意味するわけではありません新しいプロジェクトで。

私の要点は、UIレイヤーの違いしかなく、プロジェクトにWebアプリとモバイルアプリが必要であり、WebアプリのUIが角度であり、モバイルアプリがイオンであることができる3層を持つことができる場合です。CordovaのPhoneGapやionicなどのネイティブ関数を使用することで得られるメリットは、すべてを1つのタイプに保つよりもはるかに多くなります。

クライアントがWebアプリをネイティブモバイルアプリに変換したい場合に備えて、これらのUIを切り替えることは難しくないことを明確にしたいだけです。

私は次の質問から始めます

  1. このプロジェクトにはモバイル用の別のUIが必要ですか?
  2. このプロジェクトにはネイティブモバイル機能が必要ですか?
  3. このプロジェクトには、モバイル用の個別のUIおよびbackedn関数が必要ですか?

3つすべての回答が「はい」の場合、2つのプロジェクトを作成します。1と2の答えが「はい」の場合、角度のあるバックエンドとWebアプリを、イオンアプリまたは電話ギャップアプリとともに作成します。あなたの答えが「1」に対してのみ「はい」である場合、両方に角度を使用することをお勧めします。

ある時点で、角度のあるビューをionicで使用したい場合(ionic-ngのものを探す)、フロントエンド、モバイルアプリ、Webアプリの両方に同じコードを使用します。最後に、以下を個別に管理できます。

  1. データベースの移行
  2. データ用に1に接続するAPIを備えたサーバー側バックエンド機能
  3. Angular Viewsを使用するフロントエンドWebアプリ2
  4. モバイルアプリが必要な場合は、デバイスの依存関係を解決するためにIonic / phonegapを使用しますが、ビューを作成して使用するためにAngularを使用します2。

これがお役に立てばと思います。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.