シングルページWebアプリケーション設計アプローチ

Question

はじめに、私はウェブページ開発において経験/知識がほとんどなく、一般的なプログラミング言語で中間的な知識を持っています。私は、アプリケーションでは

をAngularJS（JavaScriptの）/ HTML/CSSを学び、単一ページのアプリケーションを構築しようとしていると私は（たとえば、http://..../Month/Day.json用）JSON APIのリソースを持ってい

、私がしたいのですが2つ以上のディスプレイ（たとえば、概要と詳細ビュー）

私の最初の質問は、メインビューから詳細ビューに切り替える場合です。どのようにHTMLファイルを構成するべきですか。 全く異なる表示構造？ （HTMLでの私の知識は初心者です）

2番目の質問は、JavaScriptのプロパティ/値に基づいて別のJSONファイル（またはデータ）を取得する必要がある場合です。どのようにAngularJSを使ってこれを達成できますか？私は$ httpメソッドが1つのJSONファイルを取得することを知っていますが、別のURLでこの要求を再作成するにはどうすればいいですか？

素晴らしい週末を過ごす！

Answer 1

1）Angular JSを使用していると述べたので、ng-route/ui-routeのようなAngular JSの機能を使用できます。これにより、ユーザーは同じページ内で複数のビューをロードできます。 HTML部分では、メインビューと詳細ビューのオプションを使用して簡単なナビゲーションバーを作成し、異なるビューを読み込むことができます。状態またはURLがそのは、ここでの主なまたは詳細な可能性が上記div.Itの内側にそのHTMLを組み込むために行くあなたのNG/UIのルートの下に一致するたび

<div ui-view></div> 

上記のdivがあなたのビューすなわちからコンテンツをロードします。 以下のリンクをクリックすると、詳細を理解するのに役立ちます。 https://github.com/angular-ui/ui-router

2）2番目の質問では、私は完全にあなたを得ることができません。別のJSONをロードしたい場合は、角度JSのコントローラ内で別の関数を定義し、必要なJSONファイルを呼び出すことができます。

Answer 2

UI-Routingあなたの要件は前述のとおりです。

これを達成するための追加構成はわずかしかありません。モジュール全体を調べるのではなく、具体的にするためです。 >この中studentDetails.html

に移動 - あなたはstudentName上ごIndex.htmlと

クリックで学生のリストを持っている

• 、これら

  最初のケースで始まります場合によってはというRESOLVEというプロパティがあり、 には事前にデータを入力することができますbeforeナビ。

  Clear Explanation is given here

後者の場合、

• あなたは、いくつかのユーザーに表示し、classDetails.html

• というページで一部のユーザーに を隠してしなければならない二つの部分を持っています

  学生が見ている人は、クラスのスタッフ の情報を見ることができないはずです。

• スタッフが見ている場合は、クラスの詳細をすべて確認する必要があります。私たちは財産を持ってこの問題を解決するには

• がNAMED VIEWSと呼ばUI-ルーティング

• にはどちらも異なる見解ですが、同じコントローラを使用します。また、あなたの2番目の質問については Sample Demo with code

（要約を述べ）について、以下のコードスニペットを見つけてくださいを探ります。

は、あなたのコントローラで上記のサービスを使用して依存関係

angular.module('myApp').factory('dataService', function ($http) { 
    var connectionurl = 'http://localhost:8000/'; 
    return { 
     ////Common Service call for json files 
     getJsonContent: function (jsonfileName, successcallback) { 
      $http({ 
       method: 'GET', 
       url: connectionurl + jsonfileName + '.json' 
      }) 
      .success(function (data, status, headers, config) { 
       successcallback(data); 
      }) 
      .error(function (data, status, headers, config) { 
       //error handling 
      }) 
     } 
    } 
}); 

としてコントローラに注入することで再利用することができサービスを作成します

angular.module('myApp').controller('myController', function ($scope, dataService) { 

    ////Function triggered on some event 
    $scope.someFunction= function (value_changed_in_view) { 
     if (value_changed_in_view) 
     { 
      dataService.getJsonContent("jsonfileA",function (successcall) { 
       $scope.variable_name= successcall; 
      }) 
     } 
     else { 
      dataService.getJsonContent("jsonfileB",function (successcall) { 
       $scope.variable_name= successcall; 
      }) 

     } 
    } 
}); 

Answer 3

A simple Single Page Application using AngularJs. 

Download

Extract and execute in your local machine which will give you little idea about SPA