2017-12-20 5 views
-4

Angular JSを学び、Webアプリケーションプロジェクトで使用しようとしていて、特定の角度jに関する質問に答えるだけでなく、いくつかのガイダンスを探しています。私が使用しているTechのスタックは、MySQLデータベース、Javaの/ Spring Framework、HTML/CSS/Bootstrap/JSなどです。Angular JSでアプリケーションを構造化する方法

このアプリの目的は、基本的には "ソーシャルメディアcraigslist"です。 1ユーザーアカウント 2.「ニュースフィード形式」のポスト(1つの「ビュー」)を作成する能力
3.セールスポストを作成する能力(別個のビュー)
4.「インベントリ」ビュー
5.「ウィッシュリスト」の表示
など
(注:項目2-5は、マイページの左側にある種類のナビゲーションバーを介してアクセスされ、アイデアはメインセクションページswの)あなたがクリックしたナビアイテムに基づいてコンテンツを痒くします。)

私がやっていたことは、私のWebサービスを呼び出すためのJavscriptコードを書いていたことです(静的コンテンツを取得してドロップダウンを埋め込み、ログイン用のログイン情報など)と<スクリプト>タグが増えていて、これはすべてindex.htmlのページにあり、Angular JSのようなものを使用して少し違うコードを「モジュール化」して、インデックスページの巨大な混乱ではなかった。私もいくつかの手動の.hide()と.show()JSのものをやっていましたので、AngularJSのようなものを使ってコンテンツを切り替える方が、一度に.show()を有効にするのではなく、手動でコンテンツを切り替えるには、必要なだけ多くの.hide()をやらなければなりません。これはSPA(シングルページアプリ)のように聞こえますか?

私はAngularJS StackOverflowの投稿を調べ、w3schoolsやその他の有用なウェブサイトを見ていますが、これを構造化する方法に問題があり、コードの努力だけでなく組織的なベストプラクティスも使用しています。

1)私は考え方が正しいですか?角度は、コンテンツの隠れや見せ方を簡単にしますか?

2)私は私のウェブサイトの各「機能」は、独自のコントローラを持っており、などController1.js、Controller2.jsを、持っている..しかし、私は

var app = angular.module('myApp', []); ... 

ラインを持っている必要がありますしたいと思います各コントローラーの上部にあるか、メインコントローラーのようなものが一度しかなく、メインコントローラーから各コントローラーへの呼び出しが必要ですか?それとも、私はそれについてどうやって行かなくてもいいのですか?考えプロセスは再びモジュール化し、その中のすべてのJSロジックを持つ1つの巨大なbeastlyファイルを持つことを避けました。

3)HTMLコンテンツの表示と非表示を行うには、ng-routeのものを使用する必要があると思います(これは正しいですか?)。 (上の項目2〜5)しかし、どのファイルにそれを生かすべきですか? javascriptのコントローラファイルですか? index.html?他の?

4)アプリケーションごとに1つのng-viewしか持つことができません。つまり、ウェブアプリのONE < div> /セクションのコンテンツのみを切り替えたり変更することができますか、複数の異なるdivを変更することはできますか?

5)fyi - 私の現在のファイル構造はかなりです。これはどのようにする必要がありますか?

多くの私の質問は、私がAngularJSの初心者であり、JS自体で味付けされていないため、理解しています。事前にすべての助けをありがとう。

答えて

0

まず、アプリごとに複数のビューを使用する場合は、角度経路モジュールの代わりに角度-ui-routerモジュールを使用する必要があります。

ここでファイル処理を行います。したがって、あなたはできるだけ多くのファイルを作成して、アプリケーションのコントローラ、設定、サービス、および工場を定義することができます。これを行うには3つの方法があります。

最初のファイルは、最初のファイルにvar app = angular.module("MyApp",[]);を置き、最初のファイルの下の他の各ファイルにapp.controller('ctrl', ControllerFunction)のようなコントローラとサービスを定義しています。しかし、個人的には、ここでグローバル変数としてあなたのアプリケーションを公開しているので、私はこの方法を使用することを好まない。

angular.module('MyApp',[])を使用して最初のファイルにメインモジュールを作成し、それ以外のファイルでは、angular.module('MyApp').controller('ctrl', ControllerFunction)を使用してコントローラを定義します。これは以前のものよりも安全な方法です。

第3の方法は、各ファイルに異なるモジュールを作成し、単一のメインモジュール内のすべてのモジュールを依存関係として使用することです。

別のファイル

angular.module('Module2',[]).controller('ctrl2',CtrlFun2); 

におけるメインファイルのファイル

angular.module('Module1',[]).controller('ctrl1',CtrlFun1); 

一つに、メインモジュールは、

angular.module('MyApp',['Module1','Module2']) 

ブートストラップするには、以下のようなものです異なるファイルでサービスを定義する最も安全な方法です。私は個人的には、単一のアプリケーションで複数のjsファイルを使用するこの方法をお勧めします。ここではグローバル変数や単一のモジュールを公開しないので、誰もコンソールを使って簡単にコードを注入することはできません。

関連する問題