Getting started with Angular 4


Bookmark and Share

Angular is a most popular platform for building applications with the web. Angular empowers developers to build applications that live on the web, mobile, or the desktop. The AngularCLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

As compared to the older versions of Angular, there are many new things added to the list. Not only new features but also some twists are there that enhance old features. Forget Angular 3, Google jumps straight to Angular 4 after Angular 2. Angular4 applications are much faster and less space consuming.  Angular4 is compatible with TypeScript’s newer versions 2.1 and 2.2. Components are the basic building blocks of your application. Every component has an associated template, style sheet, and a class with logic.

Prerequisites

1. NodeJS ( 6.x.x or greater )

2. npm (3.x.x or greater )

Installation

1. You have to install AngularCLI globally.

2. Create a new project.

3. To serve the application, get into the project repo and run :

For launching our server and for rebuilding our app …

Read More

Event Listeners in VueJS


Bookmark and Share

Vue.js is a Javascript framework for user interface. There are many directives in Vuejs. A directive’s job is to reactively apply special behavior to the DOM when the value of its expression changes. You can use the v-on directive to bind event listeners to DOM events.

We are binding a click event listener to a method named clickMe. Here’s how to define that method in our Vue instance. Here we have a counter variable initialized to zero. Inside the method, we are incrementing the value of the counter. So for each click on the button, the method is invoked. You will get the code here.

Here in this example, we are using two button and methods. One for incrementing the count and other for decrementing. You can see code here.

Note :-

For example,

This will give same result as before.

We can see another example. Here we have an input field where we type the url which is bound to the Js using v-model.  We have a button with click event listener which is bound to the method humanizeUrl. We have two urls, url and cleanUrl. url  is what we type in the input field and …

Read More

Two way binding in Vue.js


Bookmark and Share

Vue.js is a JavaScript framework getting popular considering its simplicity praised a lot these days. There are a lot of JavaScript frameworks among which React and Angular are popular among web developers. Vue.js is much flexible and less opinionated framework than Angular. It’s similar to React but much simpler. Vue.js supports Two-way binding. That is it keeps your data in sync with your DOM without you having to do anything. Two-way binding in Vue.js is MVVM pattern. That is Model View View Model. Like MVC, Model is the data object and view is what is displayed up. The Model can tie to the View and the View can tie back to Model.

In one way binding, JS variable is bound to the DOM.

Here when you change the data in JS, it will also update in the DOM. So you will get the updated message on the page. You can get the basic code here.

But in two way binding, Js variable can be bound to the DOM and data is also bound from the DOM back to JS.

Now, if you type anything into your input, your JS variable is updated with the change, which in turn updates your span. You can …

Read More

Getting Started with Vue.js


Bookmark and Share

 

Vue.js

What is Vue.js?

Vue.js is yet another JavaScript framework getting popular considering its simplicity praised a lot these days. There are a lot of JavaScript frameworks among which React and Angular are popular among web developers. Vue.js pronounced as “view.js”  is a much flexible and less opinionated framework than Angular. It’s similar to React but much simpler.

Vue.js gives you more freedom in designing your app, unlike Angular. So that you are not forced to do everything in their way. It can be adapted very easily to your existing application. You don’t need to know JSX, unlike React. All you have to do is to drop the link into your HTML page header and you are up and ready.

Overview

This is the basic folder structure.

– index.html

This is the main HTML template for your application. You can link your static assets inside the head tag while your processed assets will be auto injected in the body.

– src/router/index.js

This is the file which initiates vue-router with the given …

Read More

ReactJS for Beginners | A Step by Step Approach


Bookmark and Share

There are many problems while building large applications with data that changes over time. To solve this ,I suggest checking out ReactJS. React lets you express how your app should look at any given point, and can automatically manage all UI updates when your underlying data changes.

React is one of the most popular JavaScript front end libraries which is developed by Facebook. It’s used for handling view layer for web and mobile apps. The main feature of ReactJS is that it allows us to create reusable UI components.  The syntax used in React is JSX which allows you to mix HTML with JavaScript. This is not a requirement – you can still write in plain JavaScript. But this is suggested because this makes writing your components a breeze.

Installation

To install React with Yarn, run:

To install React with npm, run:

The bundlers like webpack or Browserify is recommended. So you can write modular code and bundle it together into small packages to optimize load time.

Use React with Babel to let you use ES6 and JSX in your JavaScript code. ES6 is a set of modern JavaScript features that make …

Read More