Imago

Getting Started

Setup

Create an imago account //www.imago.io/get-invite

Clone one of our themes for example the photography theme

git clone https://github.com/Imago-io/imago.photography.angular.git newapp

Install dependencies by running the following commands in the theme folder

cd newapp
npm install
bower install

Start local developement server by running gulp

all gulp commands

Theme basics

app

Contains all the apps the theme has. usually every section is it's own app. For example a contact form, shop list, product detail, home etc...

public

Contains all the complied files and static resources which get uploaded to the servers.

index.sass

the global style sheets of the theme. there are sub files are imported.

The index.coffee is the head of the app. This is where angular does it's dependency injection, config and boot.

Adding an about section

Let's assume we define a state about with the url /about fetching the asset on the path /about from the imago backend. We will use the default page controller from imago and the page.jade template inside the page app.

Create the following structure

page
├── page.jade
└── page.sass

Add an import statement in the index.sass to import the page.sass file.

.state 'about',
  url: '/about'
  templateUrl: '/app/page/page.html'
  controller: 'page as page'
  resolve:
    promiseData: (imagoModel) ->
      imagoModel.getData
        path: "/about"

Note that the jade files are complied to html. You need to reference the templates with the html extension.

We use the resolve object to load data with imagoModel from imago before the controller instantiates.

Adding a new bower or npm package

bower install --save packagename

After you add a now dependency you need to make sure gulp is including it. open the gulp.coffe and add the path of the js file to the lib section. If the package comes with css don't forget to add the css import to the index.sass