Создать один HTML-представление для нескольких частичных представлений в angularjs

Я хочу создать один HTML-файл с несколькими тегами. Они должны действовать как отдельные отдельные представления, которые обычно хранятся в папке partials. И тогда я хочу указать их в контроллере маршрутизации. Сейчас я делаю следующее: 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>

в папке partials: у меня есть 2 представления HTML с именами edit.html и productlist.html

вместо того, чтобы создавать эти 2 файла, я хочу объединить их в один в отдельности и вызвать их (div) через маршрутизацию. Как мне это сделать?

Источник

3 ответа

Вы можете использовать ng-switch для условного рендеринга вашего 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>
Источник

У меня была такая же проблема, теперь есть решение для нее с помощью: UI-Router

Преимущество использования этого, а не ngRoute, состоит в том, что вы можете иметь несколько представлений на одной странице, используя соглашение об именовании "ui-view".

Источник

У меня была проблема с вложенными представлениями и глубокими ссылками в Angular, так как $routerProvide не поддерживает множественное представление ng. Но я нашел возможное решение, как это сделать здесь. Он основан на передаче маршрутов вручную с использованием контекста запроса и контекста рендеринга.

Источник
Другие вопросы по тегам