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.

2018 © Ideas, designs and algorithms