Convert any PSD into both Angular and Ember JS templates with minimal setup. Export Kit supports Class Tags allowing you to customize your PSD layer to support any Custom framework both HTML5 and JavaScript. Export Kit will create ready-to-go views for your new or existing Anger JS system, and integrate directly with your controllers.

Angular and Ember JS is used is many applications both small and large scale. Both systems are different yet similar in nature, and both use MVC platforms. Export Kit is designed for MVC and other design patterns used by many JavaScript frameworks and libraries.

IMPORTANT: We recommend you purchase Webmaster to create both HTML and JavaScript based projects.

Fork In The Road

Export Kit offers two unique methods for converting your PSD to Angular and Ember templates, depending on your situation you may find one or the other more suited based on your requirements. In traditional Anger JS systems, HTML is used as the UI for the JavaScript framework. You have the choice with Export Kit to keep it old-school with HTML templates, or go new-school with JavaScript UI.

New School UI

Export Kit makes JavaScript UI quick and painless. Using our JavaScript Output or jQuery Output, you can easily create full a JavaScript UI or website with pure JS elements. This makes it SUPER-EASY to add the JavaScript UI output to your existing project and call the element directly inside your current code – without HTML templates!

IMPORTANT: There is no special steps with new-school, just add the output files to your project and call your elements normally.

Old School Templates

You can easily create traditional HTML templates for your JavaScript frameworks with Export Kit to fully customize all module elements including styles and values. Using our HTML5 Output and CSS Output, you can create any HTML based template file and link directly to your Angular or Ember JS framework values.

IMPORTANT: You should read how to Convert Your PSD to HTML5 with our online guide before creating HTML templates.

IMPORTANT: You will likely have to cut-and-paste your required output elements into your current Angular or Ember JS project and place them accordingly.

Before You Begin

HTML templates make heavy use of Class Tag and Code Tag to correctly output the required framework properties.

Framework Controllers

Most JavaScript template engines are MVC based and will require a controller for any given view object. You can link any custom controller to your PSD elements for total control of your JavaScript template engine.

Example Angular Controller

1
2
3
4
5

//angular controller
function personController($scope){
    $scope.firstName = "Richard";
    $scope.lastName = "Pennycooke";
}

Example Ember Controller

1
2
3
4
5

//ember controller
App.ApplicationController = Ember.Controller.extend({
    firstName: "Richard",
    lastName: "Pennycooke"
});

Controllers give you direct access to properties and methods for a given view object. Use these methods and properties in your project for full customization.

Template Containers

Most JavaScript template engines have a special setup to render templates. You will need to be familiar with how your individual framework handles HTML templates and the requirements to render them correctly.

Angular Containers

1

${class|div:ng-app="myApp" ng-controller="personController"}

Ember Containers

1

${class|script:type="text/x-handlebars"}

In Photoshop you will need to use our Class Tag with Layer Groups/Folders to add the required element containers to your project.

IMPORTANT: You must create the required containers for your project.  Many projects use custom containers, so you will need to add the required properties to your layer tag.

Framework Properties

A very common method to denote a framework/controller property is to use {{ and }} with your content. Both Angular and Ember JS will translate content within these brackets into native framework property values.

Example Property Controllers

1

Hello, {{firstName}} {{lastName}}.

In Photoshop you will need to use our Code Tag with Text Layers to add the required properties to your elements. Your properties should reflect those defined in your Application Controller (see example above).

IMPORTANT: You should read how to Convert Your PSD to HTML5 with our online guide before creating HTML templates.