OData + Angular.js + Bootstrap + JavaScript Grid = application in 5 minutes
Suppose in a certain project there is a need to add some form of user polling on a web site (detailed form) and a form for viewing and editing the list of users for the system administrator (list form).
Consider the process of creating these forms using OData, Angular.js, Bootstrap and JavaScript Grid. All requirements for such an application are already implemented in these tools, and we practically do not need to write anything.
We list the basic requirements for the survey form (in parentheses are the tools that implement this requirement):
Basic requirements for the form to work with the list of users:
Any JavaScript grid fully satisfies all these requirements. For example, you should look at the Kendo UI libraries, DevExtreme Web , Syncfusion HTML5 controls , Infragistics HTML5 controls , OpenUI5 , Wijmo .
')
Basic server requests:
To avoid the need to implement handlers for all the listed requests, we will take the databoom , which is a ready-made OData server and fully provides automatic processing of all these requests.
We will create a survey form (detailed form) using Bootstrap and Angular.js:
We recommend that you always have on hand several ready-made templates of various shapes. For example:
It is very good to keep templates on any site like JSFiddle, Bootply, CodePen, Plunker, etc.
Using a simple copy-paste based on a similar example form:
The list of users (list form) will be made based on the example of the grid control from the Kendo UI library. Virtually all programming will be reduced to specifying the correct URLs for data modification operations and to the description of the grid columns.
To process all the requests required in this example, we will not need to develop any codes at all. All database requests are fully covered by the Odata standard, and the databoom automatically processes them.
There are many libraries to simplify web development, for example: Angular.js , Bootstrap , Kendo UI , DevExtreme Web , Syncfusion HTML5 controls , Infragistics HTML5 controls , OpenUI5 , Wijmo , JayData , Breeze.js , datajs , ODataJS , databoom , etc. Each of them solves his problem. Successful selection of a set of libraries for a specific task can significantly reduce development time.
Using ready-made form templates using the libraries listed above allows you to develop on the fly using copy-paste and making only minor changes to the code.
Consider the process of creating these forms using OData, Angular.js, Bootstrap and JavaScript Grid. All requirements for such an application are already implemented in these tools, and we practically do not need to write anything.
We list the basic requirements for the survey form (in parentheses are the tools that implement this requirement):
- Form fields: “First Name”, “Last Name”, “Email”, “Comment”
- The form must save data in a database for later review and analysis by the system administrator (Angular.js)
- The form must verify the data before sending it to the server (Angular.js)
- The form should not reload the page when sending data to the server (Angular.js)
- The form must modify its size to a different width of the screen or div block, in which it will be inserted on the site page (Bootstrap)
Basic requirements for the form to work with the list of users:
- Provide a page mechanism or virtual scrolling in case of a large number of users.
- Provide sorting by any fields (grid columns)
- Provide the ability to search data
- Provide the ability to add-edit-delete data
Any JavaScript grid fully satisfies all these requirements. For example, you should look at the Kendo UI libraries, DevExtreme Web , Syncfusion HTML5 controls , Infragistics HTML5 controls , OpenUI5 , Wijmo .
')
Basic server requests:
- Add new entry
- Change record
- Delete record
- Get the total number of records that satisfy a certain condition.
- Get a selection of the total set of records to be displayed on one page.
- Get the whole set of records
- Sort records by one or more fields.
- Filter entries by some set of conditions.
- Performing batch update operations - adding, changing and deleting a group of records at once
To avoid the need to implement handlers for all the listed requests, we will take the databoom , which is a ready-made OData server and fully provides automatic processing of all these requests.
Survey Form
We will create a survey form (detailed form) using Bootstrap and Angular.js:
- Bootstrap greatly facilitates the design of the form and provides the ability to easily change the size, location of elements, etc.
- Angular.js provides minimal code for verifying data and sending it to the server. A bunch of Bootstrap + Angular.js allows you to create simple forms on the fly.
We recommend that you always have on hand several ready-made templates of various shapes. For example:
- Simple detailed form with fields of various types
- A simple detailed form with a small list, for example, a detailed form of data about a person with a list of contacts
- Etc.
It is very good to keep templates on any site like JSFiddle, Bootply, CodePen, Plunker, etc.
Using a simple copy-paste based on a similar example form:
- Create form fields, change their names.
- Indicate that the fields “First Name”, “Last Name” and “Email” are mandatory
- We set the URL for saving data from the form - in this case 'https://samples.databoom.space/api1/sandboxdb/collections/user'.
- Slightly customize the layout of the form (in this case we place a comment to the right of other fields). And that's all we need to do.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example - example-example32-production</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <link href="http://bootswatch.com/cerulean/bootstrap.min.css" rel="stylesheet" type="text/css"> <style>.form-control {border-width:2px}</style> </head> <body ng-app="formExample" ng-controller="ExampleController"> <div class="container"> <div class="col-md-12"> <h1>Simple Bootstrap + Angular.js form</h1> <br /> </div> <form name="myForm"> <div class="col-md-4"> <div class="form-group"> <label for="firstname">First Name:</label> <input class="form-control" id="firstname" type="text" placeholder="Enter first name" ng-model="user.firstname" required autofocus /> </div> <div class="form-group"> <label for="lastname">Last Name:</label> <input class="form-control" type="text" id="lastname" placeholder="Enter last name" ng-model="user.lastname" required /> </div> <div class="form-group"> <label for="email">Email:</label> <input class="form-control" type="email" id="email" name="input" placeholder="Enter email" ng-model="user.email" required> </div> </div> <div class="col-md-8"> <div class="form-group"> <label for="comment">Comment:</label> <textarea rows="9" class="form-control" id="comment" placeholder="Enter comment" ng-model="user.comment"></textarea> </div> </div> <div class="col-md-12"> <input class="btn btn-primary" type="submit" ng-click="insert(myForm.$valid, user)" value="Add new user" /> <input class="btn btn-info" type="submit" ng-click="update(myForm.$valid, user)" value="Update" /><br /><br /> </div> </form> </div> <script> angular.module('formExample', []) .controller('ExampleController', ['$scope', '$http', function ($scope, $http) { $scope.update = function (isvalid, user) { if (!isvalid) return; $http.post('https://samples.databoom.space/api1/sandboxdb/collections/user', JSON.stringify(user)) .success(function (data, status, headers, config) { $scope.user = data.d.results; }); }; $scope.insert = function (isvalid, user) { if (!isvalid) return; user.id = undefined; $scope.update(isvalid, user); } }]); </script> </body> </html> a list of users
The list of users (list form) will be made based on the example of the grid control from the Kendo UI library. Virtually all programming will be reduced to specifying the correct URLs for data modification operations and to the description of the grid columns.
<!DOCTYPE html> <html> <head> <base href="http://demos.telerik.com/kendo-ui/grid/remote-data-binding"> <style>html {font-size: 12px;font-family: Arial, Helvetica, sans-serif;} body {margin: 0;} </style> <title></title> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" /> <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script> </head> <body> <div id="example"> <div id="grid"></div> <script> $(document).ready(function () { $("#grid").kendoGrid({ dataSource: { type: "odata", transport: { read: "https://samples.databoom.space/api1/sandboxdb/collections/user", create: { url: "https://samples.databoom.space/api1/sandboxdb/collections/user" }, update: { url: "https://samples.databoom.space/api1/sandboxdb/collections/user" }, destroy: { url: function (data) { return "https://samples.databoom.space/api1/sandboxdb/collections/user(" + data.id + ")"; } } }, pageSize: 20, serverPaging: true, serverFiltering: true, serverSorting: true, schema: { model: { id: "id" } } }, filterable: true, editable: true, toolbar: ["create", "save", "cancel"], sortable: true, pageable: true, columns: ["firstname", "lastname", "email", "comment", { command: "destroy", title: " ", width: 150 }] }); }); </script> </div> </body> </html> Server
To process all the requests required in this example, we will not need to develop any codes at all. All database requests are fully covered by the Odata standard, and the databoom automatically processes them.
Conclusion
There are many libraries to simplify web development, for example: Angular.js , Bootstrap , Kendo UI , DevExtreme Web , Syncfusion HTML5 controls , Infragistics HTML5 controls , OpenUI5 , Wijmo , JayData , Breeze.js , datajs , ODataJS , databoom , etc. Each of them solves his problem. Successful selection of a set of libraries for a specific task can significantly reduce development time.
Using ready-made form templates using the libraries listed above allows you to develop on the fly using copy-paste and making only minor changes to the code.
Source: https://habr.com/ru/post/252657/
All Articles