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

Create Pet Store UI module
Create Orders UI module
Create the Widget

This UI module is found under /wiki/spaces/BL/pages/61906563 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 check the code here.

This UI module is found under /wiki/spaces/BL/pages/61906563 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 check the code here.

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.

Note that the widget could be written in any language and still benefit from urac, oauth and all the security provided by SOAJS.

You can check the code here.

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

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.
fonts: This folder contains any external fonts
lib: This folder contains all the forms that could be used in a widget like textarea, checkbox, date-picker, phone, number, etc.
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.
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.

Go to your browser and enter petstore.soajs.org:81. The widget will open on the homepage where all the available pets are listed.

The user can either fill his cart without logging in or after logging in, so we have two scenarios:

Scenario 1 - Anonymous User:

- The user adds to his cart
- Check his cart by clicking on the cart icon or word in the header
- Remove items from his cart in case of mind change
- Get back to the homepage in case the user want to add other items
- Finally go to the cart, click on checkout and you will be redirected to the login page to choose between 4 login methods: standard login, through Facebook, Twitter or Google+

2. Scenario 2 - Logged in User:

- After the user login, we merge his previous cart with the session cart in case of any
- The user can access his account to manage it
- The user can add to his cart
- The user can remove from his cart
- The user can checkout his cart
- The user can see his previous orders in My Orders page (only available if logged in)

The widget contains a search box located in the header. It's found in the homepage, cart and My Orders pages.

Browser not supported