複数の部分ビューのための単一のHTMLビューを作成する

複数のタグを持つ単一のhtmlファイルを作成したいとします。これらは通常、部分フォルダに保存されている個別の個別のビューとして機能する必要があります。そして、ルーティングコントローラでそれらを指定したいと思います。次のように今の私はをしています： app.jsパーシャルフォルダ内の複数の部分ビューのための単一のHTMLビューを作成する

angular.module('productapp', []). 
    config(['$routeProvider', function($routeProvider) { 
    $routeProvider. 
     when('/productapp', {templateUrl: 'partials/productList.html', controller: productsCtrl}). 
     when('/productapp/:productId', {templateUrl: 'partials/edit.html', controller: editCtrl}). 
     otherwise({redirectTo: '/productapp'}); 
     }], 
     ['$locationProvider', function($locationProvider) { 
      $locationProvider.html5Mode = true; 
}]);

index.htmlを

<!DOCTYPE html> 
<html ng-app = "productapp"> 
<head> 
<title>Search form with AngualrJS</title> 
     <script src="../angular-1.0.1.min.js"></script> 
     <script src="http://code.jquery.com/jquery.min.js"></script> 
     <script src="js/products.js"></script> 
     <script src="js/app.js"></script> 
</head> 
<body> 
    <div ng-view></div> 
</body> 
</html>

：を私はedit.htmlとproductlist.html

という名前の2 HTMLの景色を眺めることができます

これらの2つのファイルを作成する代わりに、それらを別々に1つに結合してルーティング（divを使用）してください。どうすればいいですか？

出典

2012-09-25 z22

説明してください。 index.htmlにdivを追加しますか？ –

index.htmlではなく他のhtmlファイル – z22

jqueryを使用しない理由は何ですか？またはdivを表示/非表示するためのjavascriptをすべて同じdivに含めます。 – nycynik

ng-switchを使用すると、ルートパラメータに応じて、includeを使用してproductListを条件付きでレンダリングできます。

あなたの設定でこれを試してみてください：

angular.module('productapp', []) 
     .config(['$routeProvider', function($routeProvider) { 
     $routeProvider 
     .when('/productapp', {templateUrl: 'partials/productList.html', controller: productsCtrl}) 
     .when('/productapp/:productId', {templateUrl: 'partials/productList.html', controller: productsCtrl}) 
     .otherwise({redirectTo: '/productapp'});

そして、あなたのコントローラで：

function productsCtrl($scope, $routeParams) { 
     $scope.productId = $routeParams.productId; 
    }

し、HTML内：

<...productListHtml...> 
    <div ng-switch="productId != null"> 
     <div ng-switch-when="true" ng-include="'partials/product.html'"> 
    </div>

出典

2012-09-25 14:10:17

私はネスティングビューとディープリンクに問題がありましたAngular in $ routerProvideは複数のng-viewをサポートしていません。しかし、この解決策を立てる方法を見つけましたn here。リクエストコンテキストとレンダーコンテキストを使用して手動でルートを渡すことに基づいています。

出典

2013-01-18 13:57:47

私は今、それが使用するためのソリューションがあり、同じ問題を抱えていた： UI-Router

をngRouteは、あなたが「UI-ビューを使用して、同じページ内の複数のビューを持つことができるということです、これを使用していないことの利点は、 " 命名規則。

出典

2016-04-10 11:56:23

複数の部分ビューのための単一のHTMLビューを作成する

答えて

関連する問題