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 them in routing controller. For now i am doing as follows: 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>

in partials folder: i have 2 html views named edit.html and productlist.html

instead of creating these 2 files i wish combine them into one in separate and call them (the divs) through routing. How do i do this?

why not use jquery? or just javascript to show/hide divs, all in the same div. — nycynik
– nycynik, Commented Apr 5, 2013 at 15:35

Andrew Joslin · Accepted Answer · 2013-02-15 01:14:16Z

42

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>

edited Feb 15, 2013 at 1:14

answered Sep 25, 2012 at 14:10

Andrew Joslin

43k21 gold badges102 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Max Podriezov · Accepted Answer · 2013-01-18 13:57:47Z

0

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.

answered Jan 18, 2013 at 13:57

Max Podriezov

1,11813 silver badges14 bronze badges

Comments

Offir · Accepted Answer · 2016-04-10 11:56:23Z

0

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.

answered Apr 10, 2016 at 11:56

Offir

3,5015 gold badges50 silver badges81 bronze badges

Collectives™ on Stack Overflow

create a single html view for multiple partial views in angularjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related