Fellow developers please understand HERE IT COMES!!!
Each of the following should be at least be on your tracking and following list: TypeScript, Node.js, React.js, io.js, Angular.js and millions more and more have been made while typing this sentence!!
I have been working with Node.js / io.js to familiarize myself with the concepts and development paradigm to learn some coding practices and standards.
I decided that I needed to develop an application that would be a created from scratch, an application that would help me understand and use Angular.js.
Well here is my attempt to develop that using an application that I have used before by developing an application in Backbone.js found here on my github account.
I decided to develop this application in a Angular.js format and my best understanding so far of “Best Coding Standards and Practices”. I am by no means an expert on this yet so please understand this could have some issues.
For a better understanding of “Best Coding Standards and Practices” please follow and check out Pluralsight. They are by far the best thing that I have ever done for my career and also to improve my skill set. “NO REPLACEMENT!!!”
Ok enough about me and on to the Angular.js application that I have created.
I will be using Sublime Text 3 as my development environment for this application.
I will place my code on to my github account here also if you want to use it as a reference.
I first have structured my code in the way that I have found works best for me also learned on Pluralsight. This seems to be somewhat simple but really powerful as well, the structure is shown below:
The first file that I wanted to show is the birthday.html file I have created. Again this will be found in my github account also here:
This file is basically a HTML5 file that has basic html structure with a additional Twitter Bootstrap css for layout, and the improve the look of the page. The other thing that is added to this HTML file is the Angular.js, jquery, and my app.js and rectanglecontroller.js files.
In this application this is the View of the MV* Model / View / * (or Whatever).
Next I developed the app.js file that will be the definition of the module that I want have in my application. This gives the ability to develop a modular based structure in the application that will allow for “small do one thing well” process or module.
The app file is very small and is basically used to bootstrap the Angular.js application shown below:
Next really is the crux of the application that is basically the Model and Controller of this application. The model is defined in the rectangle controller and then I have functions that are encapsulated in the Model shown below:
Now the controller for the application that creates the Rectangles and has the order by function that does the work for Alphabetize and Numerical button.
Basically the simple application creates Rectangle Birthday Blocks on the HTML5 application that is dynamically generated with a ng-repeat Angular loop. After the Birthday Blocks are created then the Alphabetize and Numerical buttons will allow for you to sort the blocks. The Alphabetize and Numerical buttons will also do full reversal of the blocks if clicked again. You also have the ability to choose any Birthday Block and it will change color to show the selection. When you select another block the first one will revert back to original color and then new selection will change colors. The page is shown below:
In summary this is my attempt to start to develop an application that is based in the Angular.js, Bootstrap and HTML5 world of development.
I hope you all enjoyed this blog post and remember to please follow my blog @ http://allangagnon.nettryx.net.