Getting start with Square template for Angular.js

Square is a template  you can find on themeforest for 19$ for a single site and for a non profit website. It contains angular, twitter bootstrap and other package already configured to make your project quickly operational.

This post is detailing some way to use it. You won’t find everything but the points I had to search longer before finding a solution. Hope it will help

Start a project with square

  • Copy the sqare directory to your project
# mkdir ~/Sites
# cp -R ~/Download/square-v1.4/square .
  • Install dependencies
# npm install
# npm install grunt
# npm install bower
# bower install
  • fire
# grunt server

At this point you should get Square working

Modify square to add a new page

The first thing you can do to add a new page is to create a new entry in the main menu, this can be done by opening client/views/nav.html and add a new entry like this :

   <li><a href="#/store">
        <i class="fa fa-dashboard"></i>
        <span data-i18n="store"></span>
      </a></li>
   <li><a href="#/dashboard"> ...

This create a store entry on the left column  identified by the /store url

Now, we have to route this url to a new html file ; this is done by editing the client/scripts/app.coffee file to add the route

.config([
    '$routeProvider'
    ($routeProvider) ->
        $routeProvider
            # store
            .when(
                          '/store'
                          templateUrl: 'views/store.html'
                       )
            # dashboard
            .when(...

Don’t forget to create a new file corresponding : client/views/store.html

<div class="page">
    <section class="panel panel-default">
        <div class="panel-heading">
          <strong><span class="glyphicon glyphicon-th"></span> Store Page</strong>
        </div>
        <div class="panel-body">
            <p>Content goes here</p>
        </div>
    </section>
</div>

The server have to be relaunched after a such modification

# grunt server

Now you can test and see your new blank page.

Make this new page a full screen page (like the signin page exemple)

To create a full screen page, you have to do some customizations in the scripts:

In client/scripts/shared/directives.coffee file you have some url where ‘body-special’ class is injected by script in the main <body> tag. You must add your url in the list to make is full screen

# add certain class based on path
switch path
   when '/' then $element.addClass('body-home')
   when '/404', [...], '/stores' then $element.addClass('body-special')
   when '/pages/lock-screen' then $element.addClass('body-special body-lock')
   when '/tasks' then $element.addClass('body-tasks')

Start the server

There is two way to start the server, in a development mode you just run

# grunt server

Eventually you have to add –force if you have no X client

The second way to start it is in a production mode. In this mode all the files are minified. the livereload.js script is also removed.

#grunt server:dist

As a side remark, I had some difficulties due to livereload : as this service is using a specific port like 35728, it was not working over my corporate firewall & proxy. This make my page to load really slowly waiting for timeout. I did not find how to remove livereload in a clean way but server:dist start saved me.

This entry was posted in Programming and tagged , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.