AngularJSパラメタを使用した動的ルーティングベストプラクティス

Question

私は動的ルートを持っており、できるだけ効率的に状態を切り替えるようにしています。

私は、インスタンスの元の擬似コードの状態を持っている場合は

.state("apartmentDetails", { 
     url: "/apartmentDetails/:id", 
     templateUrl: "templates/apartmentDetails.html", 
     controller: apartmentDetailsCOntroller 
}) 

私のコントローラは、写真付きのアパートオブジェクトのリストである（パラメータIDを取得し、その後、インスタンスのサービスを呼び出すか、データをフェッチしますビルド名など）をファイルから取得する場合は、

buildApartmentTemplate（）のような関数を実行してから、テンプレートを作成して$ scope？を渡します。これは私が考えることができる唯一の方法ですが、私はテンプレートを生成する関数を含まないより良い方法があると確信しています。それをよりダイナミックにするベストプラクティスはありますか？

Answer 1

これが役に立ちます。

私は通常行うことは、それはようなものになるだろう、あなたのケースでいくつかのコンポーネントをロードする前に、すべて私のものを解決している。また、あなたはあなたの解決のデータが利用できるようになりますsomeResolvedDataのバインディングを作成する必要があります

state("apartmentDetails", 
{ 
url: "/apartmentDetails/:id", 
templateUrl: "templates/apartmentDetails.html", 
controller: apartmentDetailsCOntroller, 
resolve: { 
    someResolvedData: ($stateParams) => { 
    return YourService.getMyData($stateParams.id); 
    } 
} 
}) 

コントローラ上またはテンプレート内に存在します。 YourServiceはあなたのサービスの名前です（注入することを忘れないでください）。getMyData()は、サービスを利用してデータを返す関数です。ここでのデータの解決についての詳細

チェック：

https://toddmotto.com/resolve-promises-in-angular-routes/

https://medium.com/opinionated-angularjs/advanced-routing-and-resolves-a2fcbf874a1c

Answer 2

より良いオプションは、ルート定義で約束を使用して、約束が解決された場合の結果を注入し、この方法であなたはunnecesaryクエリを避けるためでありますテンプレートが読み込まれた後、約束が拒否された場合は、404ページまたは任意のものにリダイレクトできます。

app.service('apartamentService', ['$http', function ($http) { 
 
    this.list = function (id) { 
 
     return $http({url: '/apartaments/' + id}); 
 
\t }; \t 
 
}]); 
 
\t \t 
 
app.config(['$routeProvider', 
 
function ($routeProvider) { 
 
\t $routeProvider 
 
\t \t .when('/apartmentDetails/:id/', { 
 
\t \t templateUrl: 'templates/apartmentDetails.html', 
 
\t \t controller: 'apartmentDetailsController ', 
 
\t \t resolve: { 
 
\t \t \t apartaments: ['$route', 'apartamentService', 
 
\t \t \t \t function ($route, apartamentService) { 
 
\t \t \t \t \t return apartamentService.list($route.current.params.id) 
 
\t \t \t \t }] 
 
\t \t \t }}); 
 
\t \t \t \t \t 
 
}]); 
 

 
app.controller('apartmentDetailsController', ['$scope', 'apartaments', function ($scope, apartaments) { 
 
\t $scope.apartaments = apartaments; \t 
 
}]);

希望は私はそれが**主に意見をベース**ので、この質問はstackoverflowのためにオフトピックですあなた