SPA using AungularJS Materials with REST API

0
239

Introduction

Someone who wants to start the responsive single page application with api support, here the template to download and make use with customization. Including the login, logout, dashboard, single forms, grids and reports. The angular animations, materials reflects the progress loading, multiple tab scrolling, menu navigations towards the responsive.

The bootstrap, jquery can be replaced with angularjs through out the application lifecycle. This UI + API template helps to customize quickly. With the screenshots and the code unit explanation, the user can understand lot to implement.

Angular Module and Controllers

Angular module is a collection of services, directives, controllers, filters, and configuration information. It is used to configure the $injector.

ngRoute module provides routing and deeplinking services and directives for AngularJS apps.

ngMessages is a directive that is designed to show and hide messages based on the state of a key/value object that it listens on.

ngMaterial module increases the design infographic around the UI elements.

$routeProvider is the key service which set the configuration of urls, map them with the corresponding html page or ng-template, and attach a controller with the same. “otherwise” is used to set the default view.

ng-app named “mainApp” and included state, url routing, lazy loading, the default /log load the login view.

app.js

'use strict'; angular.module('mainApp', ['oc.lazyLoad', 'ui.router', 'ui.bootstrap', 'angular-loading-bar',     'ngMaterial', 'ngMessages', 'ngAnimate', 'ngRoute'])     .config(['$stateProvider', '$urlRouterProvider', '$ocLazyLoadProvider', '$routeProvider',         function ($stateProvider, $urlRouterProvider, $ocLazyLoadProvider, $routeProvider) {             $ocLazyLoadProvider.config({                 debug: false,                 events: true });             $urlRouterProvider.otherwise('/log');             $stateProvider                 .state('dashboard', {                     url: '/dashboard', templateUrl: 'views/dashboard/main.html',                     resolve: {                         loadMyDirectives: function ($ocLazyLoad) {                             return $ocLazyLoad.load({                                 name: 'mainApp',                                 files: ['scripts/directives/header/header.js',                                     'scripts/directives/header/header-notification/header-notification.js',                                     'scripts/directives/sidebar/sidebar.js',                                     'scripts/directives/sidebar/sidebar-search/sidebar-search.js']                             }),                             $ocLazyLoad.load({ name: 'ngTouch', files: ['com/angular-touch.js'] })                         }                     }                 })

When a Controller is attached to the DOM via the ng-controller directive, AngularJS will instantiate a new Controller object, using the specified Controller’s constructor function. A new child scope will be created and made available as an injectable parameter to the Controller’s constructor function as $scope.

grid.js

'use strict'; angular.module('mainApp', ['ngRoute', 'ngTouch', 'ui.grid', 'ui.grid.resizeColumns', 'ui.grid.moveColumns','ui.grid.pinning', 'ui.grid.grouping','ui.grid.pagination', 'ui.grid.selection', 'ui.grid.exporter', 'ui.grid.importer']) .controller('grdContrl', ['$scope', '$http', '$q', function ($scope, $http, $q) { $scope.gridOptions = { saveFocus: false,saveScroll: true,saveGroupingExpandedStates: true, enableFiltering: true,enableGridMenu: true }; $scope.gridOptions.columnDefs = [ { name: 'RollNo', field: 'id' },{ name: 'Name of the Student', field: 'name' }, { name: 'Gender', field: 'gender' },{ name: 'Date Of Birth', field: 'dob' },{ name: 'Location', field: 'city' } ]; var canceler = $q.defer(); $http.get('data/stud.json', { timeout: canceler.promise }) .success(function (data) { $scope.gridOptions.data = data; }); $scope.$on('$destroy', function () { canceler.resolve(); }); }])

Angular Views and Materials 

A view provides the UI and UI behavior for a state. A state’s view is a component, which consists of both markup and logic. The view is plugged into the matching  viewport directive. AngularJS directives are used to extend HTML.

In dashboard view, home inherits header, header inherits header-notification, side-bar then sidebar-search.

header.html

<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0"> <div class="navbar-header"><ul style="margin-top:20px;"> <li style="list-style: none;"> <img src="../../../images/logo.png" alt="ezSchool" style="height:30px;width:30px;" class="img-circle"> <a href="index.html">Institution</a></li></ul></div> <header-notification></header-notification><sidebar></sidebar></nav>

headernotification.html

<ul class="nav navbar-top-links navbar-right"> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown"> <img src="../../../images/p1.png" alt="who is online?" style="height:30px;width:30px;" class="img-circle"> <i class="fa fa-caret-down"></i></a> <ul class="dropdown-menu dropdown-user"> <li><a ui-sref="profile"><i class="fa fa-user fa-fw"></i>User Profile</a></li> <li><a ui-sref="settings"><i class="fa fa-gear fa-fw"></i>Settings</a></li> <li class="divider"></li><li><a ui-sref="login"><i class="fa fa-sign-out fa-fw"></i>Signout</a></li> </ul></li></ul>

sidebar.html

<div class="navbar-default sidebar" role="navigation"> <div class="sidebar-nav navbar-collapse" style="overflow:auto;height:520px;max-height:520px;"> <ul class="nav in" id="side-menu"> <sidebar-search></sidebar-search> <li ui-sref-active="active"><a ui-sref="dashboard.home"><i class="fa fa-dashboard fa-fw"></i>Dashboard</a> </li></div></div>

Angular Material provides over 30 UI components and services. The framework offers a suite of components and containers: from simple Button components with built-in ink and hover effects, theming, and ARIA support… to more complex container components like mdList and Tabs.

home.html

Highly responsive layout to operate with the horizontal tab scrolling and the menu navigations.

controlpanel.html

ui-gird provides the dynamic column grouping with expand, collapse option, The complete data explorer on the grid with the features like sorting, filtering, paging, export, import, resizing, hide/show colums, select all, edit.

studreg.html

The form enhanced with full of material design and validation metrics. on the fly DOM event error messages and the layouts made user-friendly.

 <md-input-container class="md-block" flex-gt-sm> <label>Aadhaar Number</label> <input name="social" ng-model="user.social" ng-pattern="/^[0-9]{4}-[0-9]{4}-[0-9]{4}$/" /> <div class="hint" ng-if="!showHints">####-####-####</div> <div ng-messages="userForm.social.$error" ng-if="!showHints"> <div ng-message="pattern">Please enter a Aadhaar Number</div> </div> </md-input-container> <md-input-container class="md-block" flex-gt-sm=""> <label>Postal Code</label> <input name="postalCode" ng-model="user.postalCode" placeholder="123456" required="" ng-pattern="/^[0-9]{6}$/" md-maxlength="6"> <div ng-messages="userForm.postalCode.$error" role="alert" multiple=""> <div ng-message="required" class="my-message">You must supply a postal code.</div> <div ng-message="pattern" class="my-message">That doesn't look like a valid postal code.</div> <div ng-message="md-maxlength" class="my-message"> Invalid...</div> </div> </md-input-container>

EditMaster.html

md-dialog frames the form with materials md-toolbar, md-content, md-button with close, hide, update buttons.

<md-dialog aria-label="Edit Master"> <form ng-cloak ng-controller="masterCon"> <md-toolbar class="md-primary"> <div class="md-toolbar-tools"> <h1 class="md-flex">Master (Edit)</h1> <span flex></span> <md-button class="md-icon-button" ng-click="cancel()"> <md-icon md-svg-src="images/close_24.svg" aria-label="Close"></md-icon> </md-button> </div> </md-toolbar> <md-dialog-content> <md-content layout-padding=""> <div layout-gt-sm="row"> <md-input-container class="md-block" flex-gt-sm=""> <label>Types</label> <md-select placeholder="Select" ng-model="mas_type.title" style="min-width: 200px;"> <md-option ng-value="master" ng-repeat="master in masters">{{master.title}}</md-option> </md-select> </md-input-container> </div></md-content> </md-dialog-content> <md-dialog-actions layout="row"><span flex></span> <md-button class="md-primary" ng-click="addnew()">Update</md-button> <md-button class="md-primary" ng-click="cancel()">Cancel</md-button> </md-dialog-actions> </form> </md-dialog>

REST API and Database 

REST Representational State Transfer is a stateless architecture. RESTful Web API lightweight HTTP service to consume for all the devices. It reaches a broad range of clients, including browsers and mobile devices. 

$http is an AngularJS service for reading data from remote servers which takes a single argument — a configuration object — that is used to generate an HTTP request and returns a promise.

public class MasTypeController : ApiController { private acadModel db = new acadModel(); public IQueryable GetMasType() { int modid=0, masid = 0; object[] param = { new System.Data.SqlClient.SqlParameter("modid", modid), new System.Data.SqlClient.SqlParameter("masid", masid) } db.Database.CommandTimeout = 3600; List objMasType = db.Database.SqlQuery("spGetMasType @modid,@masid", param).ToList(); ​return objMasType.AsQueryable(); }

@grid.js, the scope.loadmasters calls the get api, it connects the $rootScope.$on to trigger from other controller. 

$scope.loadmasters = function () { var canceler = $q.defer(); $http.get('/api/MasType/1/1', { timeout: canceler.promise }) .success(function (data) { $scope.gridMasters.data = data; }); $scope.$on('$destroy', function () { canceler.resolve(); }); } $scope.loadmasters(); $rootScope.$on('reloadmasters', function () { $scope.loadmasters(); });

$scope.addnew posts the data to database in the grid via dialog window, hide,close,submit, cancel etc..,

$scope.addnew = function ($route) {
if ($scope.mas_type == true)
$scope.items = { "id": 0, "typeid": 0, "title": $scope.mas_title, "desc": $scope.mas_desc, "isactive": $scope.mas_status };
else
$scope.items = { "id": 0, "typeid": $scope.master ? $scope.master.id : 0, "title": $scope.mas_title, "desc": $scope.mas_desc, "isactive": $scope.mas_status }; var config = { method: "POST", url: "/api/MasType", data: $scope.items };
$http(config); $mdDialog.hide(); $scope.$emit('reloadmasters'); };

Database sample provided to explore, the table with initial data and stored procedure scripts needs to be executed to create database. @ web.config, the connection string needs to be added.

Solution

Here the solution explorer figured to explain as below. 

1.1. WebApiConfig  here the api implemented with in the application using the different route template api/{controller}/{id}, api/{controller}/{mod}/{id} ex: /api/MasType,  /api/MasType/1/1

1.2 API Contoller mas_01Controller simply the GET and POST methods inherited the acad.Models entities with IQueryable, [FromBody]. It executes the database context to result.

1.3 Data folder keeps the *.json file to store and retrive the data locally. stud.json used at ui-grid for demo purpose. it could be used for offline storage to later posting to server or any logs or drafts.

1.4 Models the entity framework generated the database connectivity and the table model, the stored procedure excluded.

1.5 UI Controllers angular ng-controller added on the module ng-app grid.js, main.js contains the route and local scope to implement at view. the angular components, http get/post bindings handled here with exceptions. 

In detail the grdContrl, grdMasters supports the ui-grid operations, masterCon operates the controlpanel view, ImportCon implements the ui-grid import functionality.

1.6 Directives angular directives brings the reusable tags with optimized loading. it implements header, side-bar, search in this application.

1.7 app.js configures the environment of this entire application. It starts the application.

1.8 Views the dashboard provides the landing page for this application. It connects main, home html’s for container and layout.

1.9 SPA single page application html’s has div container to load the part of the page. It classified header with multiple tabs using horizontal scroll naviagation. It adds more tabs as much user wants.

The angular material md-tabs implements the animated fly-outs, progress, ink bars to have rich usabilities, It works on the controllers – masterCon, gridMasters, ImportCon and others.

1.10 index loads the default angular components and other dependencies like scripts, styles, fonts. some could be added via lazy loading whenever required. It initiates the layout to stand the ui-view. It could be bundled and minified more as you develop.

Conclusion

The SPA with REST API template provides the quick understanding to start the custom development for any web apps. 

LEAVE A REPLY