Material AngularJS Plug-in Sample App

This example is a description of the Pizza Store app that offers a wide variety of pizzas and also provides the option of making a customized pizza by using a set of ingredients.
The app uses the UI components from the Google’s AngularJS Material library.

🚧

Important Note!

Note that the option of creating new apps with the Bootstrap framework was removed but we still support the projects that were created with itearlier.

Step 1: Import the Material AngularJS App plug-in

• Create a blank Bootstrap project.
• Go to CREATE NEW > From Plugin > Appery.io Examples > Material AngularJS App and click Import selected plugins.
• In the new window, set home to the start page and apply the selection.

Step 2: Import the Database from the Backup

• Go to the Databases tab, click Create a new database, provide a name for your new database, choose the backup file (first, download this .zip archive and save it locally), and click Create.

Step 3: Update the Database ID in the Project

• Copy the database ID under the Database > Settings tab (can be found in the API keys section).
• Paste it into the database_id field (in your app project tab, open Services > AngularPizzaDB > AngularPizzaDB_settings).

Step 4: Create a Server Code

• Go to the Server Code tab and click Create script > Load from file, select the script on your disk drive. (first, download this .zip archive and save it locally).
• Name your script.
• Below, in the fields provided in the Settings object of the server code script, specify your database API keys as the DB_ID and MASTER_KEY properties, save the script.
• Go to the API information tab of the Server Code tab and copy the servercode_id. It can also be found in the Service URL field of your browser which should look like the following: https://api.appery.io/rest/1/code/{servercode_id}/exec.

Step 5: Update theServer Code ID in the Project

• Paste your app servercode_id (see above how to obtain it) into the servercode_id field of AngularPizzaDB_settings.

Test the App

In your project, click Test. You should now see the contents of the Menu collection from the imported database.

There is a search field at the top of the blue panel which allows applying a quick filter to the list of records using their on-screen contents.

At the bottom of each record, there is a set of tags assigned to it. You can filter records by tags using the list of checkboxes on the left side of the page.

By clicking a pencil icon, you can edit the record.

Tags can be deleted or new ones can be added to the set. Click Enter to add a new tag.

Records can be deleted by clicking the icon in the top right corner.

Adding a Custom Field to the Collection

After you have checked the functionality provided out of the box, you will probably like to customize the app to add some new fields to your collection.

Suppose, you would like to add a drop-down to choose the pizza size to be big, medium or small. To do it, add a new column named size of the string type to the Menu collection of your database.

You can browse through the list of available UI components at the Demos section of our AngularJS Material site.

Next, go to your project SCOPE tab and set the available sizes in the $scope.sizes* variable (to do it, open the Variables** tab).

Then, add the following code at the end of the init() method (the tab Functions) of the Edit_Screen page:

$scope.pizzaSizes = ['Small', 'Medium', 'Big'];

Adding a Markup for the Custom Field

To open the Edit_Screen template, click the Edit button for the HTML component on this page. You can expand the editor to full-size with an icon located in the top left corner.

The dropdown menu component with a limited set of values similar to the HTML component can be found in the Select section of Demos as and directives. After closing the tag of of the Description field, add the following markup: <md-input-container class="md-block matapp-margin"> <label>Size</label> <md-select ng-model="app.size"> <md-option><em>None</em></md-option> <md-option ng-repeat="size in pizzaSizes" ng-value="size"> {{size}} </md-option> </md-select> </md-input-container> You are now ready to test the updated app. You should now be able to update the Size field in your Menu collection.