web-dev-qa-db-ja.com

angularjsの複数の部分ビューに対して単一のhtmlビューを作成します

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

    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）。どうすればいいですか？

routingroutesangularjs
23
z22

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

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

    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>
42
Andrew Joslin

Angularの$ routerProvideは複数のng-viewをサポートしていないため、ビューのネストとディープリンクに問題がありました。しかし、これを実現する方法を見つけました こちら 。要求コンテキストとレンダリングコンテキストを使用して手動でルートを処理することに基づいています。

0
Max Podriezov

私は同じ問題を抱えていましたが、今はそれを使用した解決策があります： I-Router

NgRouteではなくこれを使用する利点は、「ui-view」命名規則を使用して同じページに複数のビューを作成できることです。

0
Offir Pe'er