AngularJS Key Concepts – Part 1
The article represents certain key concepts of AngularJS javascript framework. I shall be writing further articles presenting my learning as I go ahead. AngularJS is a great (so-called Super-heroic) framework if you want to build single page applications (SPA) consisting of multiple views (smaller web pages so to say). That said, it is not limited to SPAs and could be used with any kind of web applications. If you have worked in past with JQuery, you would be amazed to see the simplicity that AngularJS brings on the table with respect to DOM manipulation. Just this feature has got me on board with Angular. Modular framework: Angular is a modular …
AngularJS – Adding/Removing Table Rows Dynamically (Updated)
This article is updated to include concepts and related take-away code related to adding/removing the table rows on different Angular versions including Angular 2.* and later version (Angular 4.*, Angular 5.*) and, also, AngularJS 1.* releases. Add/Delete Table Row (Angular 2.*, Angular 4.*, Angular 5.*) The code given below demonstrate the following: Display a table consisting of one or more rows with each row representing teachers’ detail Add a teacher using a Model Window Delete a teacher This is how the screenshot of the table looks like: The code is designed as following: Teacher Class: There is a teacher class (teacher.ts) which representing teachers’ detail. The code given below represents the same: …
AngularJS Hello World Code Example
The article presents hello world code sample for AngularJS javascript framework. Following are important aspects to note while you are going through the Hello World demo and the code samples listed below. Directives ng-app, ng-controller, ng-model Template with double curly braces Step 1: Include Angular Javascript within <Head> Section Include following code within <head></head> to include Angularjs javascript file. Get the latest code such as below from Google hosted libraries page. <script src=”//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js”></script> Step 2: Apply ng-app directive to <Html> element Apply ng-app directive to <html> element such as following. Giving name of the app is optional. It could be written as simple as <html ng-app>. This directive is used to …
Things to Learn Prior to Getting Started with AngularJS
The article represents the pre-requisites in form of topics one would want to learn to get started with AngularJS Javascript framework in a faster and effective manner, and make the learning a fulfilling experience. These are based on my own AngularJS initial experiences which was inline with the popular “deeper learning curve” associated with AngularJS. Please feel free to suggest further items if I have missed on any of the important ones. Here is the wiki page for Angular. I, primarily being the Java Developer, wanted to play with Angular and other related Javascript frameworks. Thus, I got on to the AngularJS website and started playing and soon found …
Eclipse Key Shortcuts for Greater Developers Productivity
The article presents Eclipse Key Shortcuts (for Windows) which could be used to perform most common coding tasks in a much efficient/faster and effective manner thereby enhancing overall productivity of the Java developers. Please note there are lot more key shortcuts which could be accessed from Eclipse IDE Windows/Preferences/Keys. However, I have made a mention of only those shortcuts which I found very useful in coding faster. If I missed on any shortcuts keys that you feel would be useful to be added in the list below, please give a shout. There were some useful feedbacks on reddit post from where I took some commands and added to the list …
Template Project for Spring MVC 4 & Eclipse Dynamic Web Project
The article presents information, instructions and a downloadable eclipse dynamic web project that one could import in his/her Eclipse IDE and quickly get started with Spring MVC Hello World project. Web Application Folder Structure Following is the Eclipse dynamic web project folder structure based on which files in the template are laid out. Important Files Pay attention to some of the following important files: /WebContent/WEB-INF/web.xml: A file that cnsists of configuration related with how web requests will be handled using DispatcherServlet. /WebContent/WEB-INF/spring-servlet.xml: A file that consists of information on component model/lifecycle along with view handling. /WebContent/WEB-INF/views: A folder that consists of JSP files that acts as a view and referred …
MongoDB Commands & Concepts – Rookies Quick Reference
The article presents some of the basic concepts and commands which could prove useful for rookies starting with MongoDB. Key Concepts Simply speaking, MongoDB is a very popular NoSQL database with document-oriented storage. If you are a SQL developer and having challenges understanding document-oriented database, check out this page on mapping between SQL to MongoDB mapping. For a detailed introduction on MondoDB, check out this introduction page. Following are some of the key terminologies: Database Collections Document Field Primary key (_id) index JSON-styled Documents: The most important concept is document-oriented storage, and the documents are JSON-styled. Thus, one would require to learn JSON very well to do well with MongoDB …
Spring Data MongoDB Hello World with Spring MVC – Example
The article presents detailed steps on what is needed to get started with Spring Data MongoDB while you are working with Spring MVC web application. The article assumes that you have got Spring MVC application setup done. Step 1: Create Documents in MongoDB One could download MongoDB from http://www.mongodb.org/downloads page. Once downloaded, do the following to get started. Open a command prompt & goto bin folder found within MongoDB root folder. Before starting MongoDB server, create the data directory within root folder. Start the MongoDB server with command such as “mongod -dbpath <path-to-mongodb-root-folder>” Open another command prompt and goto bin folder. Execute “mongo” command and you are all set. Access …
Bootstrap UI Template for Quick Web UI
The article presents copy and paste bootstrap code that one could take and get started with quick UI. Personally, as a Java developer, I use it very often to create quick UI without focusing much on the UI details. From there on, I keep on adding further UI elements as and when required. You could get code samples from Bootstrap UI website. <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″> <title>Hello World</title> <link rel=”stylesheet” href=”//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”> <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script> <script src=”//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js”></script> </head> <body> <header class=”navbar navbar-static-top” id=”top” role=”banner”> <div class=”container”> <div class=”navbar-header”> <button class=”navbar-toggle” type=”button” data-toggle=”collapse” data-target=”.bs-navbar-collapse”> <span class=”sr-only”>Toggle navigation</span> <span class=”icon-bar”></span> <span class=”icon-bar”></span> <span class=”icon-bar”></span></button> <a href=”/” class=”navbar-brand”>WebSiteName</a> …
Recipe for Non-UI Developers to Build Great Web UI
The article presents recipe for non-UI developers to build and serve great WEB UIs for their next Web projects. If ever you wanted to break free from your dependency on UI developers for small changes in UI, you may want to read the following. If you are a UI developer and believe that I have missed on one or more aspects, which I admit I may miss, please shout out loud. Ingredients HTML concepts including DIV (Key ingredient) CSS basic concepts Javascript basic concepts JQuery Bootstrap Preparation Time (2-3 Weeks) If focused for an hour a day on an average with possibly few extra hours in the weekend :-), …
Bootstrap UI TextField, Dropdown and Button – Code Examples
The article presents quick code samples on Bootstrap form and its elements such as textfield, dropdown, button etc that one could copy and paste and get started quickly. For those unaware of what is Bootstrap, following is a very brief write-up: Bootstrap is a popular UI framework which helps one to create great UI for both Web and Mobile projects. The information and code samples could be accessed on http://getbootstrap.com/. All I could say is that the day I came across Bootstrap, I managed to create great UIs for all of my Java projects in no time. Something that I always looked upon others to help me with. Something which …
Spring MVC Web.xml & Spring-Servlet.xml – Code Example
The article presents information around two key configuration files and code samples that one could pickup, put in their web application folder and get up and running. What & Why Web.xml? Web.xml is a deployment descriptor file. Simply speaking, see web.xml as a file used to describe classes, resources and configurations which is used by web server to serve the requests. As the request reaches to the web server, the server uses web.xml to map the URL of the request to the code that would handle the request. While working with Spring MVC, the server, in turn, delegates the request to DispatcherServlet which retrieves appropriate controller that would be used …
How to Configure SpringLoaded with Eclipse Dynamic Web Project
The article presents simple steps to use SpringLoaded framework to have your classes loaded onto the tomcat server without you having required to restart the server, while you are working with Eclipse Dynamic Web Project. The instructions below applies when you have installed Tomcat server and added the same to the eclipse. Quick Introduction on SpringLoaded SpringLoaded, a framework published by Spring.io, is a JVM agent for reloading class file changes whilst a JVM is running. It transforms classes at loadtime to make them amenable to later reloading. Read further on this github page. Personally, I have found it very useful as I do not have to build and restart servers …
How to Gradle Spring MVC Web Project
The article describes steps that are required to build the a Spring MVC web application project using Gradle tool. Step 1: Web Application Folder Make sure you have maven-based web application folder. We recommend you to check our article published on different possible layouts of web application folders. As a recap, following is how the web application folder structure would look like: src/main/java (Consists of Java files) src/main/resources src/main/scripts src/main/webapps: This would further have following folder structure: assets (publicly accessible files) css js images META-INF WEB-INF lib (spring/hibernate & other libraries) views (jsp files) hibernate.cfg.xml (if hibernate is used as well) spring-servlet.xml web.xml Step 2: Create a Gradle Script …
Google Datastore Query Get By ID & Filter – Code Example
Following are code samples on Google App Engine Datastore Query and how to get entities by id and based on filters. Get Entity By Id Pay attention to the code “datastore.get(KeyFactory.createKey( “savedreport”, reportId). “savedreport” is the name of entity. DatastoreService datastore = DatastoreServiceFactory.getDatastoreService(); Entity entity = null; try { entity = datastore.get(KeyFactory.createKey(“savedreport”, reportId)); } catch(EntityNotFoundException e) { e.printStackTrace(); } Get Entity By One Filter Pay attention to “setFilter” method Filter createdByFilter = new FilterPredicate(“created_by”, FilterOperator.EQUAL, userId ); Query query = new Query(“sqm”).setFilter( createdByFilter ); DatastoreService datastore = DatastoreServiceFactory.getDatastoreService(); List entities = datastore.prepare(query).asList( FetchOptions.Builder.withLimit( count ) ); Get Entity By Multiple Filter Pay attention to usage of multiple FilterPredicate …
Code Example – User Authentication with Google App Engine Java Applications
The article presents quick code samples that could be used to adopt Google User authentication service. These strategies have been used in the google app, http://agilesqm.appspot.com. Following key aspects are presented in this article. Web.xml configuration to restrict access to pages Use Google User service Web.xml configuration to restrict access to pages With following code in web.xml, one could restrict access to one or more pages in matter of no time. You could try on how below configuration works by accessing the page, http://agilesqm.appspot.com/createreport and you would be sent to Google login if not yet logged in on the browser. <security-constraint> <web-resource-collection> <web-resource-name>createreport</web-resource-name> <url-pattern>/createreport</url-pattern> </web-resource-collection> <auth-constraint> <role-name>*</role-name> </auth-constraint> <user-data-constraint> …
I found it very helpful. However the differences are not too understandable for me