Versions Compared

Version Old Version 2 New Version 3
Changes made by

Michel El Hajj (Unlicensed)

Michel El Hajj (Unlicensed)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Objectives

  1. Get more familiar with creating UI modules using SOAJS and AngularJs
  2. Get more familiar with creating a widget using SOAJS and AngularJs



Scenario

  1. Create Pet Store UI module
  2. Create Orders UI module
  3. Create the Widget



Create Pet Store UI module 
Anchor
createPetModule
createPetModule

This UI module is found under Operate pillar in the Dashboard.

It lists the pets available in the store and give you the ability to manage this store using the API created here.

To learn how it is created, click here.

You can find the code here.



Create Orders UI module

This UI module is found under Operate pillar in the Dashboard.

It lists the orders from all the clients, so the admin can confirm or reject an order. He can also filter the orders.

To learn how it is created, click here.

You can find the code here.



Create the Widget

The widget is the frontend SDK where you use your APIs to have a functional website.

This widget is based on JavaScript, AngularJs, bootstrap and jQuery. It's a commercial widget unlike the Dashboard that's a management SDK.

The difference between the Dashboard SDK and the widget is mainly the theme. Unlike the widget, we find in the Dashboard a left menu related to the pillar clicked in the header.


Folder Structure

The widget is divided to 5 folders in addition to the main files: config.js and index.html.

  • config.js: contains the widget configuration including the domain, domain port, theme to use and the api configuration
  • index.html: contains all the needed scripts in the header, plus the main controller in the body

Folders

  1. app: This folder contains all the called libraries, the main controller where the app is created alongside some jQuery for the notifications, the navigation file where all the pages found in the widget are initialised and the services file that contains all the services used as modules in other controllers.
  2. fonts: This folder contains any external fonts 
  3. lib: This folder contains all the forms that could be used in a widget like textarea, checkbox, date-picker, phone, number, etc. 
  4. sections: This folder contains all the pages of the widget: homepage, cart, orders, login and user account.
    Each folder come with its controller, configuration and template. Note that login and user account are in the same folder and each one has its own controller and template.
  5. themes: This folder contains the theme called in the main config.js file. It contains all the css, header and footer templates, the fonts if any and all the images used in the widget.

Image Added