AngularUI: Companion suite for AngularJS

We all know that Angularjs is a framework solely for Front-End development and NodeJS for server-side stuff.

Coding from scratch to variety of features can really be a pain, but now with AngularUI a companion “plug ins” it takes all the drama and hassle from creating them from scratch. This is one I will definitely use for my projects .

There are lot more out there that an Angularjs developer can use. I also like to include to use Bower package manager to install them.

Here is the link to it: http://angular-ui.github.io

And the link to a tutorial by Bee Kalliger: https://youtu.be/bSy_eTK1MkU?list=PLGwTv1L2yi5jovGz3OFO3lL7ZrmZ1D2so

Or video down below:

Challenge#1: Angularjs Shopping Cart

Here is a challenge to me. Create an Angularjs app using various technology that I have encountered during my learning.

Technology:

  • AngularJS
  • Express
  • ejs templating
  • ui-bootstrap
  • Gulp for task runner and build
  • REST api call or database call using MySql
  • Sass for styling
  • NodeJS and other nodeJS plugin
  • GitHub

This is just a simple SPA(single page) where the app gets its products from a REST api call or a query to a mysql database, and presented to the visitor. The visitor will add items to the shopping cart, fill up a form and submit their details until the last check out page.

There is alot going on this application. I will also make a repository on Github so I can grab the project anywhere I use a different computer. My goal is to create the application within a month. And hopefully will teach me a whole lot more about AngularJS.

Wish me luck!

Javascript Inheritance

How do you do inheritance in Javascript? These 3 lines of code are the key:

Child.prototype = new Parent();

you assign the prototype of child to parent, to inherit parents prototype, methods and data.

Child.prototype.constructor = Child;

Then you assign the name of the child object, to its constructor property to give back its identity.

Parent.call(this)

And inside the Child object constructor, you call the super class constructor, to take the context of “this” of the Child object into the Parent constructor. Here you can initialize any members of the parent object of the child property and control goes back to the child’s constructor and initialize the child property this time. Also known as Constructor Chaining.

Took me  awhile to understand it. I hope anyone reading this would get it the first time otherwise let me know!

Shims and Polyfills Note

<!–[if lt IE 9]>
<script src=”js/html5shim.js”></script>
<![endif]–>

This is a shim or a way to make html5 work for older browsers. Its more of a work around for browsers who does not support new html5 tags like <article> <section> <header> <footer> <aside> etc.

There are also shims out there that can be used like <canvas> shim, <svg> shim etc.

A polyfill is also a work around or a plugin for features not currently supported by the browsers or technology at hand. For example css3 transform property , or a javascript version not yet updated.

HEARTLESSG.COM ———– © Ideas, designs and algorithms