create a single html view for multiple partial views in angularjs

Question

I wish to create a single html file with multiple tags. These should act as separate individual views that are usually kept in partials folder. And then i wish to specify

Answer 1

I Had the same problem, now there is a solution for it using: UI-Router

The advantage of using this and not the ngRoute is that you can have multiple views in the same page using "ui-view" naming convention.

Answer 2

You could use ng-switch to conditionally render your productList with an include, depending on the route parameters.

Try this in your config:

    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'});

And in your controller:

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

And in your html:

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

Answer 3

I had problem with nesting views and deep linking in Angular as $routerProvide doesn't support multiple ng-view.. But I found a possible solution how to make this happen here. Its based on handing routes manually using request context and render context.