Developing Single Page Application (SPA) using AngularJS

The frameworks and technology itself impressed me to write my first blog. I am happy to introduce you about the javascript MVC framework named as AngularJS.

Why AngularJS ?

The first answer to this question must be, it is supported by Google. As it is supported by google the documentation and help is easily available online. If your application is REST based and you want to develop the most interactive application you must go with the AngularJS. It is also matured javascript MVC framework.

Sample Code to Download from Github: 

Click here to download sample code

Once you download the code from github please follow the below link to access application setup :

localhost/AngularJs-master/#/table/operation

We have worked on the projects which is having Single Page Application(SPA) requirements. It contains Sorting, Custom search, Nested search and CRUD operations on table.

These type of requirements are pretty generic for Single Page Application(SPA) and our blog and Github project would help you on that.

Sorting in Application : 

//inside controller
$scope.sortType     = 'name';
$scope.sortReverse  = false;

//on html page
<tr ng-repeat="user in userRecords | orderBy:sortType:sortReverse | filterUserMgmt:searchUserMgmt">

Custom and nested filters in angularjs : 

//on html page
<div class="btn-group" role="group">
   <input type="text" class="form-control" placeholder="NAME / COMPANY NAME" ng-model="searchUserMgmt" style="height: 30px; background-color: #EBF1F5; border: none;">
</div>

<tr ng-repeat="user in userRecords | orderBy:sortType:sortReverse | filterUserMgmt:searchUserMgmt">

//inside tableFilter.js
tableMainApp.filter('filterUserMgmt', function () {

        return function (dataArray, searchTerm) {
            if (!dataArray) return;

            if (!searchTerm) {
                return dataArray
            } else {

                return dataArray.filter(function (user) {

                    if(user.companyProfile != undefined){

                        return (angular.lowercase(user.name).indexOf(searchTerm || '') !== -1 || angular.lowercase(user.companyProfile.coName).indexOf(searchTerm || '') !== -1);
                    }else {
                        return (angular.lowercase(user.name).indexOf(searchTerm || '') !== -1);
                    }
                });
            }
        }
    });

It also include CRUD operation on table, if you have any query you can ask me on this. Otherwise it is straight forward.

Result would be something like this :

tableCRUD

Will be continuing to write blogs on AngularJS framework in the mean time if you have any query you can ask me. Appreciate your suggestion.

Patterns7tech is software Development Company based in United Kingdom & India. The world is changing so fast that it is becoming increasingly difficult to plan ahead. We use Innovative Solutions to help businesses to get ready for the future by providing Innovative Technology Services.

Currently we are using AngularJS for projects in Healthcare, Tracking, Accountancy and Social community domains to provide highly interactive user experience with progressive-enhancement strategy for mobile platform.
Please feel free to contact us on info@patterns7tech.com

Submit a Comment

Your email address will not be published. Required fields are marked *