2017-02-17 9 views
0

私はAngularを使いこなしていましたが、私はすべてのファイルを自分のアプリで自分の役割に従って分割したかったのです。AngularJSの本当のモジュラーアプリとそれらのインクルード構造を取得するには?

私は、/ homeや/ productsのような各 "ページ"のためのフォルダを作り、それぞれのフォルダ内のすべてを世話します(素晴らしいアイデアのように聞こえました)。

しかし、私はどのようにこれらのファイルの読み込みにアプローチするか、あるいはどこでそれを行うかについてはわかりません。

これが私の現在のファイル構造である:により一定の制限に enter image description here

が、他の有用なツールを使用することはできませんイム、これは直接コードで発生する必要があります。

このアプローチにはどのような方法が最適でしょうか?あなたの質問の

+0

あなたが最も可能性が高い兵卒のようなタスクランナーのいくつかの並べ替えは、あなたのindex.htmlを – Ankh

+0

利用一口に必要と単一のファイルにすべてのソースファイルをマージしたいと思いますor grunt task manager –

答えて

2

第一部分:

あなたの角度のアプリを整理するために何デフォルト方法はありません。

ただし、いくつかのガイドラインがあります。私はあなたが求めているのと同じ質問で私を啓発したAngular 1 app-structuring-guidelines by John Pappaを読んでくれてありがたく思っています。

現在のところ、すべてのアプリをフォルダ単位のアプリケーションで構成するのではなく、コントローラフォルダ内のすべてのコントローラ、サービスフォルダ内のすべてのサービスなどを構成しています。あなたの質問の

第二部分: ちょうどがぶ飲みやうなり声を使用して、Webは、より多くのコンポーネント指向を取得しているあなたのインデックス内の単一のファイル


+1

[Todd Motto's Angular 1.6 with ES2015](https://github.com/toddmotto/angular-styleguide)は、コンポーネントベースのAngular Webアプリケーションを構築するためのもう1つの優れたリソースです。 –

+0

完全にあなたに同意する、1人の男をサポートするつもりはなかった。 Todd Mottoのガイドも素晴らしいです – flashjpr

+0

私はJohn Papaのスタイルガイドを数十回も使用していますが、 –

1

をインポートし、現在すべての最も有名なフロントエンドフレームワークが採用再利用可能なコンポーネントポリシー(Reactable and Angular 2はそれに大きく依存します)

角型アプリケーションを可能な限りモジュール化したい場合は、コンポーネントに関するすべてを別のフォルダに配置する必要があります(htmlテンプレート、CSSスタイル、 jsロジック)、サービスと資産の間で共有ロジックを分割する

あなたのケースでは、プロジェクトの構造の例は次のようになります。

アプリ/

  • 資産/ //ここに置か画像、フォントおよび共有スタイル
  • サービス/
    • apiService.js
    • utilsService.js
    • のなどなど...
  • コンポーネント
    • ホーム/
      • 家。JS
      • home.css
      • home.html
    • 製品/
      • products.js
      • products.css
      • products.html
    • などなど/ ...
    • index。 JS

index.htmlを

関連する問題