Author Archives: Ajitesh Kumar
Angular 2 – Two Ways to Pass Data to Components
This article represents concepts and code samples in relation to how one could pass data from one component to another in an Angular app. Please feel free to comment/suggest if I missed mentioning one or more important points. Also, sorry for the typos. As Angular is primarily based on components and components interaction, it is important to understand how data is passed from one component to another. Data is passed between the component using property bindings. Take a look at the syntax below: In above syntax, user component’s property “value” is bound to “user” property of the parent component. The data type of the bound property needs to be matched. Thus, if …
Angular 2 – Parent-Child Components Explained with Code Examples
This article represents concepts and code examples for creating parent-child components. Following image represents the view which is referred in the code samples below. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following is explained later in this blog. A parent component, HelloWorld and the interaction with Child Component, UserComponent A child component, UserComponent An interface User Parent Component, HelloWorld, interaction with Child Component, UserComponent A parent component, HelloWorld, represents the view consisting of Hello message and a textfield for user to interact with the view. The Hello message looks like <h1>Hello, <user [value]=”user”></user>&t;/h1>. Notice that the …
Angular 2 – Data Binding to Accommodate Component Relationships
This article represents concepts and related code samples in relation with data binding in Angular 2 vis-a-vis component relationships. Those with prior experience of ReactJS which propagates one-way binding would find it easy to understand and consume. 🙂 AngularJS 1 bragged about the two-way data binding very much. However, Angular 2 decided to promote one-way data binding (as like ReactJS) and, two-way data binding is considered only as a special case. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key points described later in this article: Two-way Data Binding in AngularJS 1 Data Binding in …
5 Reasons Angular 2 Hello World is Trickier than AngularJS 1 Hello World
This article represents my thoughts on why Angular 2 apps is trickier to write than AngularJS 1 apps. I have represented the Hello World code to demonstrate the same. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key reasons: Components Vs Controllers: In Angular 2 Apps, what is key is Components associated with a View. These components have got a selector, a View and a set of properties and methods encapsulated within a Class. In AngularJS 1, it was all about Controllers having logic to interact with View. It was very easy to bootstrap AngularJS …
Sublime – How to Install TypeScript Package on Windows
This article represents code snippets which could be used to install TypeScript package for Sublime 2 and Sublime 3 IDE. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key topics for which code samples are provided: Install TypeScript Package for Sublime 2 Install TypeScript Package for Sublime 3 Install TypeScript Package for Sublime 2 Execute following command to install TypeScript package. cd C:\Users\<yourWindowsUser>\AppData\Roaming\Sublime Text 2\Packages git clone –depth 1 https://github.com/Microsoft/TypeScript-Sublime-Plugin.git TypeScript Install TypeScript Package for Sublime 3 Execute following command to install TypeScript package. cd “%APPDATA%\Sublime Text 3\Packages” git clone –depth 1 https://github.com/Microsoft/TypeScript-Sublime-Plugin.git TypeScript
Angular 2 – Set up TypeScript Dev Environment for Angular 2 Apps
This article represents steps and code snippets that could be used to set up Angular 2 Development environment when working with Typescript programming language. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key points described later in this article: App Folder Structure Creating Package.json Creating tsconfig.json Creating typings.json Execute NPM Install App Folder Structure Following is the app and files structure: ng2-apps app app.component.ts main.ts (optional): This file consists of code such as following to bootstrap the top-level component. The bootstrap function could as well be placed within the component file such as app.component.ts import …
Angular 2 – Hello World Concepts & Code Samples
This article represents concepts and code examples related with Angular 2 Hello World. Trust me it is not as simple as Angular 1 Hello World where we talked about familiar Controller, View and Model. Who said Angular had steep learning curve. Angular 2 is going to haunt an average UI developer much more. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key points described later in this article: HelloWorld Component Concept HelloWorld Component Code Sample Index.html Code Sample HelloWorld Component Concept Following are some of the key points to note in the HelloComponent shown in …
Docker – Quick Java 8 or Java 7 Dev Environment with Dockers
This article represents code samples which could be used to build and start Java 7 or Java 8 Docker containers appropriately based on the needs with a single script and command such as “./startJava.sh -v 7 Java7” for Java 7 and “./startJava.sh -v 8 java8” for Java 8. This would be useful to try and test your Java code against Java 7 and Java 8 versions very easily based on the fact that you could start both Java7 and Java8 containers simultaneously and, run your code in these containers at the same time for testing. Please feel free to comment/suggest if I missed to mention one or more important points. …
Angular 2 – Components Explained with Code Examples
This article represents concepts and code samples around Angular 2 Components which resides at the heart of the Angular 2 framework as like Controller/Scope which resided at the heart of Angular 1 app. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key points described later in this article: What are Components? Components Explained with Code Samples What are Components? Components are at the heart of Angular 2 apps. A component in Angular2 is used to represent a View along with associated logic (encapsulated as a Class), which will get executed based on interaction with …
Docker – How to Build & Get Started with Java 7 Container
This article represents tips and code samples on how to build a Java7 docker image and start Java 7containers. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key points described later in this article: Dockerfile to Build Java 7 Image Command to Start Java 7 Container Dockerfile to Build Java 7 Image Following is the code for Dockerfile which could be used to build Java 7 image: FROM centos:centos6 RUN mkdir /opt/jdk RUN cd /opt RUN yum -y install wget tar RUN wget –header “Cookie: oraclelicense=accept-securebackup-cookie” http://download.oracle.com/otn-pub/java/jdk/7u79-b15/jdk-7u79-linux-x64.tar.gz RUN tar -zxf jdk-7u79-linux-x64.tar.gz -C /opt/jdk RUN …
Docker – How to Access Root User without Password
If you have been trying different passwords to access root user in a docker machine terminal, do not worry. Following is the command which would get you access to root user without needing you to enter any password 🙂 sudo -i One could access the docker machine from docker terminal with following command: docker-machine ssh <docker-machine name such as default>
Docker – How to Install Docker Compose on Windows
This article represents tips and code samples which could be used to install Docker-compose on Windows. The instructions could also be found on this page. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key points: Make sure you have Docker Engine version 1.7.1 or greater. Open a putty terminal accessing the “default” docker-machine or do “docker-machine ssh default”. You could put name of any other machine based on docker-machine in which you want to install docker-compose. Login as a Superuser using command “sudo -i” Install the docker-compose using following command: Do note that one would …
AngularJS – Great Read on Compile & Link Functions of Directives
This is one of the finest page I have read on compile and link functions of AngularJS Directives. Worth a read! Thanks to the author, Jurgen Van de Moere, for putting a great blog on AngularJS. The nitty-gritty of compile and link functions inside AngularJS directives Following are some of the topics covered on this page: How directives are processed in AngularJS Lot of sample codes Great explanation of Compile and Link function
MEAN Stack Apps Explained for Java Developers
This article represents brief description of What is MEAN Stack Web/Mobile App. Coming from Java background, I thought it to present an analogy for Java developers to get a quick understanding on MEAN Web/Mobile App. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following are the key points described later in this article: What is MEAN Web/Mobile App? A Web Application Stack in General Sample Web App using JEE (Spring/Hibernate) Framework A MEAN Stack Web/Mobile App What is MEAN Web/Mobile App? A MEAN Stack based web/mobile app makes use of following technologies: M: MongoDB E: ExpressJS A: …
8 Reasons to Migrate to Ionic 2 Framework
This article represents some of the key reasons why one would want to adopt or migrate to Ionic 2. I am doing for my apps soon. Read out the original announcement on this page. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos. Significant Performance Improvements: Leverages Angular 2 thereby bringing significant performance boosts to the ionic apps. Additionally, some of the following improvements brought by Angular 2 will further boost the Ionic 2 adoption: Server-side rendering cross-platform views Web workers Improved Overall Navigation: The way ionic pages were navigated in past, especially, between standard and tabbed pages was …
Javascript – Promise Concept Explained with Code Samples
This blog represents concepts on Promise concept in Javascript with diagrams and code examples. Following is described later in the blog: Promise explained with simple example Promise execution timeline Promise program code sample Promise Explained with Simple Example Lets say, a consumer program invoked an API and asked for the output. In synchronous world, the value is returned then and there and the caller program waits for the service provider program to respond. The execution of the program halts. Welcome Promise on board! With Promise concept, the service provider program can respond with a “promise” that it would return output value or error in near future and the caller …
I found it very helpful. However the differences are not too understandable for me