I am in the process of transitioning a product management admin site to Angular. Currently, all my views (such as the product list, detail view, and edit) are displayed inside an ng-view on my admin page, which is working well. However, I have a link for each product that allows me to print its information, and this currently uses a different outer template than the others.
What is the best way to handle this situation in Angular?
Here is the code snippet:
angular.module('myApp', []).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
// All routes except 'print' use an index.html template
$routeProvider.
when('/', {
templateUrl: '/partials/order/manage.html',
controller: ManageOrderCtrl
}).
when('/order/:id', {
templateUrl: '/partials/order/_view.html',
controller: ViewOrderCtrl
}).
when('/order/edit/:id', {
templateUrl: '/partials/order/_edit.html',
controller: ViewOrderCtrl
}).
// For printing order info - custom headers and a separate template (_print.html)
when('/order/print/:id', {
templateUrl: '/partials/order/_print.html',
controller: PrintOrderCtrl
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
In my list of orders:
<div ng-repeat="order in orders">
<a title="Print product sheet" href="/order/print/{{ order._id }}"></a>
</div>
Currently, the _print.html template is loaded within the same ng-view as the other templates. Is there a way to open it in a new window or should I create a new App for this purpose?