introduction & requirements

Introduction

Each client is different, with their tastes and needs, Ordering team has implemented an eaay and smooth way to modify each projects' look, this allows to make customizations using the base code of Ordering (Routes, functions, controllers, variables, etc.) allowing to re-write and add new utilities in this.

Requirements

First of all, for everything that is done to work properly must be developed with IONIC 1 and ANGULAR.JS which are the frameworks that were used for the base development. For the themes to work properly the theme must contain the views folder and the includes.json file as shown below:

|— /Theme
|—— /views
|——— …
|—— includes.json

Includes.json: This file contains the scripts and styles that will be loaded for this topic, as well as an index.html everything that is loaded here, works in cascade in the order in which they are placed. to show how this file is structured we will show an example below.

{
  "async_scripts": [        "https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-58f7669ee41f8041"
                   ],
    "scripts": [
      "js/router-ui.js",
      "js/moment.min.js"
    ],
      "styles": [
        "css/bootstrap.css",
        "css/font-awesome.min.css"
      ]
      "angular": [
        "js/customCtrl.js",
        "js/customFactory.js",
        "js/customService.js"
      ]
      "angular_required": [
        "orderingApp.NewControllers"        
      ]
}

As we saw in the example, all the attributes of config.json are an array with everything that you want to include and these are loaded in the order in which they are placed.

• async_scripts: It places the scripts that do not need an order to be loaded like the libraries, generally they are heavy files.
• scripts: All theme scripts are listed and loaded in the order they are placed
• styles: All these csss work in cascade just as in an index.html
• angular: in this attribute all the scripts that depend on angular.js are listed, as are new controllers, factories or services.
• angular_required: This attribute is used to inject new angular dependencies into the app.js as are new controllers, factories or services.

Development Guidelines

Indentation

In order to maintain a good flow of development with the ordering team, it is important to maintain the indentation of each document. Each document has its own indentation, for example in ordering web constants.js and controller.js are indented to 4 spaces while factories.js is indented to 2 spaces. This is the main rule that must be respected.
In case it is not clear the indentation of the document regarding tabs or spaces to maintain the size of the indentation but with spaces and with the number of corresponding spaces.

📘

Important

The new files created in the ordering projects must be indented to 2 spaces.

Functions

The functions must have descriptive names and written in camelCase but not abused (thisFunctionDoThisAmazingThing).
Examples of recommendations:
getOrders instead of getTheOrders because it is a short descriptive and understandable name Therefore you do not need the "The".
getOrderId or getOrderById infer different things one refers to obtaining the ID of one order and the other to obtain an order by its ID
Functions structure:
There must be space between everything in the function name, parameters and brackets. In the parameters after each comma, there must be space also.

function functionName (param, param2) {
  //something to do
}

Anonymous function structute:
There must be a space in the "equal" to the right as well as to the left and a space between the parameters of the function and the opening bracket.

functionName = function (param, param2) {
  //something to do
}

📘

Important

If a function will be used many times in the code it is advisable to declare them in the rooScope to avoid code redundancy.

IF Statement

In the structure must be spaced the if, condition and instructions. Also in the sentence of the condition, everything must be separated with space, the comparators <,>, ==, etc. and the || and &&.

if (condition && condition2 || value1 == value2) {
 //instructions
}

Variables

The variables must have descriptive names and written in lowercase whit underscore but not abused (variable_to_compare_if_the_option_is_ok).
Examples of recommendations:
orders instead of the_orders because it is a short descriptive and understandable name Therefore you do not need the "The".

Semicolons (;)

Although JavaScript does not require a semicolon at the end of all the code lines in the Ordering guidelines, it must be done.