I'm converting a product management admin site to use Angular - I have all my views (product list, detail view, edit, etc) showing inside an ng-view on my admin page. All good there. However I have a link for each product that lets me print it's info - it currently uses a different outer template as the others.
What would be the angular way of handling this?
App:
angular.module('myApp', []).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
// all routes but 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
}).
// I want this link to not use the same outer template (i.e. something like printer.html as well as use custom headers)
when('/order/print/:id', {
templateUrl: '/partials/order/_print.html',
controller: PrintOrderCtrl
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
In my manage list:
<div ng-repeat="order in orders">
<a title="Print product sheet" href="/order/print/{{ order._id }}"></a>
</div>
Right now this would cause _print.html to be placed inside the same ng-view as the other. I do want it to open in a new window - would I just make a new App?
You can write a service and inside that service do a ajax call to fetch the html. Now your html will contains placeholders i.e. {{}}, so you need to a template library(e.g. mustache) to substitute those {{}} with the real data
factory('print', ["$window", function($window) {
/* service in charge of printing */
return function(templateUrl, context) {
/* send a GET request to templateUrl for template, render the template with context
* and open the content in a new window.
*/
$.ajax({
url: templateUrl,
async: false, //otherwise the popup will be blocked
success: function(html) {
var template = html.replace('<!DOCTYPE html>\n<html lang="en">\n', '').replace("</html>", ''),
output = Mustache.render(template, context);
$window.open().document.documentElement.innerHTML = output;
}
});
};
}]);