How we built our blazing fast promotional website in Angular.JS SPA

I just wanted to share how we built our public facing Radiology website https://www.aztechradiology.com  developed using our homegrown minimalistic, lean & mean CMS framework called as “Helen CMS” built on top of Angular.js and Node.JS libraries

toolsets

Features of our home grown Helen CMS

  • Built for speed of the development
  • Blazing fast
  • Clean code separation
  • Template driven user interface
  • Highly scalable
  • Multilingual
  • No database required
  • Deploy by git / Gulp tasks
  • First class support for AWS Deployment
  • Hosted in server less environment AWS S3
  • Can run in AWS free tier – Zero operating cost
  • App in appliance (Container ready) for xcopy deployment on local server (on-premise) or on the cloud
  • 100% offline capabilities implemented through advances cache, Local Storage and Index DB with automatic cache busting and refresh
  • RESTAPIs can be built on any programming language of your choice, we use Node.JS deployed as Lambda Services and exposed through API Gateway
  • Each lambda services built on SRP (Single responsibility Principle) design principles and they are completely loosely coupled
  • Built on Micro services architecture
  • User actions persisted in lightweight database for analytics
  • Fluid page rendering without freezing the UI

aztechwebshot

AngularJS web app scaffold with YEOMAN, BOWER & GRUNT and deploy in SURGE.SH

There are number of ways one can create AngularJS web application and often times we search for seed projects for bootstrapping. For AngularJS plenty of seed projects out there in the web but the one from YEOMAN is lean, clean with outstanding code lab which is super simple for anyone from novice to advance.

yeoman  bower-phoenix-javascript-meetup-1-638 grunt

 

surge

 

YEOMAN – Create New web projects

BOWER – Search, Add and Manage dependencies

GRUNT – Task runner i.e. watch, preview, bundle, build, test and the list goes

SURGEStatic web publishing for front-end developers. Using grunt-surge npm package, you can automate the deployment through grunt cli with the command grunt deploy

AngularJS – Datatable Directive hack for nonSortable property

We use AngularJS Datatable Directive. As per our UX standard for datagrid, all the actions buttons should be on the left extreme out title and sort icon.

(See screen shot “Before”). The datatable directive exposes a property called “nonSortable” but it doesn’t work as expected for columns which appears first (See screen shot “Before”). To overcome this I added a invisible column as first column made this one as second column (See screen shot “After”.). Hope this will be useful.

Before

image

After

image

image

Disclaimer: By any means this is not a elegant solution but it works.

How to set content-type header in Angular.JS Ajax Call

Having worked in Jquery and its Ajax for some years, I thought the the internal workings of Angular.JS Ajax call is similar because code looked very similar or no change but I didn’t get the result as expected. Let us see what was the problem and how to resolve it.

Jquery Ajax Call Code

image

Angular Ajax Call Code (Equivalent of the above)

image

After looked at the Http Header in the Chrome Inspector, I realised that the Content-Type header passed was missing

image

Following stack overflow provided me the solution, it said that “You need to include a body with the request. Angular removes the content-type header otherwise

image

Modified Angular Ajax Call Code (With dummy body i.e. data : ‘’)

image

After setting the body, Content-Type was passed and I got my results.

image