How to create a multi-use partial "template" in AngularJS?

Question

I have a large list of items. Each item has it's own details.

In my main view/partial, I simply display a large list list of the item names. When the user clicks on an item, I want the page to go to a partial which works as a "template", displaying information based on which list item is clicked, and hence possibly what the URL looks like. E.g. /listItem1/

This diagram below hopefully sums up what I want to achieve pretty clearly.

How can I do this?

Right now, I have a pretty standard set up in which I have all the information for each list item in an array of object literals, which is contained in a controller injected into the main app module. Like so:

    var app = angular.module('app', [/*nodependencies*/]);

    var controllers = {};

    app.controller(controllers);

    controllers.listController = function ($scope){ 
    $scope.list = [
            {name: 'List Item 1 Name',  detail1: 'blahblah1', detail2: 'blahblah2'},
{name: 'List Item 2 Name', detail1: 'blahblah1', detail2: 'blahblah2'},
{name: 'List Item 3 Name', detail1: 'blahblah1', detail2: 'blahblah2'}  
        ..... and so on

I know how to create basic views/partials as well. But what would be my next steps?

Answer 1

You can do what you want, using the built-in router which ships with AngularJS.

var app = angular.module('app', [/*nodependencies*/])

    .config(function($routeProvider) {
        $routeProvider
            .when('/:itemId', {
                templateUrl: '/path/to/partial',
                controller : function($scope, $routeParams) {
                    $scope.item = $routeParams.itemId;
                }
            })
    });

Basically, what the above means, is that if you browse to pdf/item/1

Then you will have access in your controller to $routeParams.itemId which will be equal to 1. You can then do whatever logic is necessary with this information on your partial to show the information you want.

Hope this helps.

Update

Please look at the controller, this is how you would get the param you passed via the URL, you would then do whatever it is you need to do with that param in the controller, and pass the data back to the view.

Answer 2

You can create a small directive that will use the multi-use partial to display each item on the list

Take a look at this working example (http://plnkr.co/edit/0jNVxRg6g3p8uxpustzz?p=preview)

 var myApp = angular.module('myApp', []);

  myApp.controller('listController', ['$scope', function ($scope) {

    $scope.list = [
            {
              name: 'List Item 1 Name',  
              url: 'pdfs/item1.pdf', 
              detail: 'blahblah'
            },

      {
        name: 'List Item 2 Name',  
        url: 'pdfs/item2.pdf', 
        detail: 'blahblah'
      },

      {
        name: 'List Item 3 Name',  
        url: 'pdfs/item3.pdf', 
        detail: 'blahblah'
      }
    ];

    $scope.selectItem = function(item){

      $scope.selected = item;

     }

 }]);

  myApp.directive('listItem', [function () {
    return {
      restrict: 'A',
       scope: {
        item: '='
      },
      templateUrl: 'multiple-partial.html',
      link: function (scope, element, iAttrs) {


      }
    };
  }])