AngularJS MVC and Scopes

AngularJS MVC Architecure

MVC stands for model view controller. It is a software design pattern for developing web applications. It is very popular because it isolates the application logic from the user interface layer and supports separation of concerns. The controller receives all requests for the application and then works with the model to prepare any data model by the view. The view then uses the data prepared by the controller to generate a final presentable response. The MVC abstraction can be graphically represents as follows

mvc

1. Model

It is responsible for managing application data. It responds to the request from view and to the instructions from controller to update itself.

2. View

It  is responsible for displaying all data or only a portion of data to users. It also specifies the data in a particular format triggered by the controller’s decision to present the data.

3.Controller

It is responsible to control the relation models and views. It responds to user input and performs interactions on the data model objects. The controller receives input, validates it, and then performs business operations that modify the state of the data models.

AngularJS Scopes

Scope is a special JavaScript object which plays the role of  joining controller with the views. Scope contains the model data. In controller, model data is accessed via $scope object.

Example:

 scope

Code Explanation

  1. Scope is passed as first argument to controller during its constructor definition.
  2. $scope.firstName and $scope.lastName are the models.
  3. We have set values to models which will be reflected in the application module whose controller is myController.

Output

scopeoutput

AngularJS Modules and Controller

AngularJS Modules

A module defines an application. It is container for the different parts of your application like controller, services, filters, directives etc.

Controller always belong to a module.

Creation of a module

A module is created by using the AngularJS function angular.module

module

The “myApp” parameters refers to an HTML element in which the application will run. Now we can add controllers, directives, filters, and more, to your AngularJS application.

AngularJS Controllers

AngularJS application mainly relies on controllers to control the flow of data in the application. A controllers is defined using ng-controller directive. A controllers is a JavaScript object containing attributes/properties and functions. Each controller accepts $scope as a parameter which refers to the application/module that controller is to control.

Example:

In the following example we will explain module and controller.

 controller

Output:

 controleroutput

Code Explanation:

  • ng-app directive is used to denote that this application should be considered as an angular application. “myApp” is the name given to our AngularJS application.
  • In body tag we have added an ng-controller directive along with the name of our controller “myControl”. This basically makes our body tag the ability to access the contents of the “myControl”. We need to mention the name of the controller under the directive to ensure that we are able to access the functionality defined within the controller.
  • We are creating a module which will attached to our “myApp” So this module now becomes part of our application.
  • In the module, we define a function which assigns a value of “Bit” and “Byte” to our firstName and lastName variables respectively.

AngularJS Directives

AngularJS Directives

AngularJS facilitates you to extend HTML with new attribute. These attributes are called directives.

Directives are special attributes starting with ng- prefix.

We are going to discuss following directives which are the most common directives –

  • ng-app:- This directive starts an AngularJS application.
  • ng-init:-This directive initialize application data.
  • ng-bind:-This directive binds the value of HTML inputs controls to application data.
  • ng-model:-This directive binds the values of AngularJS application data to HTML input controls(input, selection, text area).
  • ng-repeat:-This directive repeats HTML elements for each item an collection.

 

ng-app directive

ng-app directive defines the root element. It starts an AngularJS application and automatically initializes or bootstraps the application when web page containing AngularJS application is loaded. It is also used to load various AngularJS modules in AngularJS application.

Example:

ngpp

The ng-app directive also tells AngularJS that the <body>  is the owner of the AngularJS application.

ng-init directive

ng-init directive initializes an AngularJS application data. It is used to put values to the variables to be used in the application.

In the following example. we will initialize the variable

nginit

ng-bind directive

ng-bind directive bind the application data to HTML view. The ng-bind directive bind AngularJS data to HTML the same way as AngularJS expression.

ngbind

Output:

 ngbindoutput

ng-model directive:

This directive binds the values of AngularJS application data to HTML input controls. In following example, we’ve defined a model named “name” and access that variable using ng-bind directive.

 ngmodel

Output:

 

 

ng-repeat directive:

ng-repeat directive repeats HTML elements for each item in a collection

ngrepeatprogram

Output:

ngrepeat

We have so many other built in directives that we will discuss later.

Spring Boot

 

SpringBootLogo
Spring Boot

 

 

Before entering into spring boot just a brief summary about spring

What is Spring??

Spring is a high performance, lightweight, non-invasive, easily testable application framework. Using spring we can develop all layer implementations unlike struts (struts framework supports only developing web applications).

In one line we can say spring is the end to end application development framework.

The core concept of spring framework is dependency injection. By dependency injection, we can achieve loose coupling.

 What does it do??

 Spring approach is developing enterprise Java applications by using POJOs. Because of using POJOs no need of application server we can use the servlet container.

 There are so many enterprise Java applications, all these applications having some similarities. When we write a business service to solve business problem spring handle all those things like connecting to the database, establishing transaction service and so on…Spring provides a template for this to build these applications.

The flexibility with the spring is we can concentrate only building on business services and spring handle rest of the common things like connecting to the database, running queries and handling HTTP requests…

Spring provides infrastructure support, for example, spring connecting to the databases like the relational database and mango DB, spring has infrastructure support when we are building our applications.

Spring framework Pros and Cons….

Pros:

  • Simple
  • Testable
  • Loose Coupling.
  • Performance
  • Security
  • Integration

Cons:

  • Huge framework.
  • Multiple setup and configuration steps.
  • Multiple build and deploy steps.
  • The learning curve would be high.

So Spring Boot comes as handy…!!!

What is Spring Boot??

Spring Boot makes it easy to create stand-alone, production-grade Spring based Applications that you can just run.” — from official spring.io

The main aim of spring boot is accelerating (speed up) application development, by the “convention over configuration” approach.

By using Spring Boot, we can develop end to end application with production ready.

What does it do??

Spring Boot reduces the complexity of dependency management with the help of spring boot starters concept. Whereas in spring we need to search for the required libraries for specific spring version.

For example, if we want to declare the web related dependencies, in general, we need to declare each and every dependency related to the web. But in the case of Spring Boot, we declare only one dependency “spring-boot-starter-web” it pulls all the required dependencies for the web module.

Some common configurations such as DataSource, JdbcTemplate, DispatcherServlet, HandlerMapping……. Spring Boot comes with the auto configuration to configure all these configurations by adding @SpringBootApplication or @EnableAutoConfiguration.

By using Spring Boot, we can create the standalone application and just run like normal java application we don’t have to find out servlet container because Spring Boot comes with the embedded servlet container. Whereas traditional Spring application we are building a war file and deploy in the servlet container.

Spring Boot comes with production ready features.

Setup:

  • We will use Maven or Gradle build for Spring Boot application.
  • Spring Boot works with Spring 4.x version and later. And JDK 1.8
  • Eclipse or STS

To build spring application we need to manage dependencies, so we need to add required jars for the specific version of spring. We will add the jars to the classpath so that the classes in jars are available to that application.

We are not following this approach, we are using Maven (build and dependency management tool) in Maven we will declare all the dependencies in pom.xml file and so that maven tool will automatically import required jars from the repository to our classpath.

Sample Spring Boot Application:

Create a simple Maven project.

Picture1

 

Skip the archetype by selecting the create a simple project

Picture2

 

Enter the group id, Artifact Id, and Name

Picture3

 

Package Structure of SampleSpringBoot project

Picture4.png

The default dependency file (pom.xml) is like below.

Picture5.png

We adding the dependency spring boot starter parent which will act as a parent for the all remaining spring boot dependencies. And we are adding Java version and spring boot starter web dependency

Picture6.pngWe are creating SpringBootDemo application this is the starting point for our application and @SpringBootApplication tells spring this is spring boot application and create servlet container and deploy in a container.

What SpringApplication class will do??

Setup default configuration

 Starts spring application context

Every spring application has application context which runs the spring application

Performs class path scan

 If we declare a class with annotation @Service or @Controller … spring will look at those classes and treated service annotation service, controller annotation as a controller to identify all these classes it has to be scan the class path

Starts Tomcat Server

 No need to download any Tomcat server by default it comes with spring boot so the output of the application is as standard application

Picture7.png

We are creating Rest Controller to handle HTTP requests.

Picture8.pngOverriding Tomcat port number in “application. properties” file, if the Tomcat default port (8080)  is listening to some other process.

Picture9.png

Run the sample spring boot application as like normal Java application.

Picture10.png

By running sample spring boot application as a standalone java application, tomcat will have started automatically on the port 9090.

Picture11.png

To verify this in the browser, just enter the localhost port number and request mapping.

Picture12.png

 

 

 

 

 

 

 

AngularJS

 

 

angularjs

Introduction to  AngularJS

AngularJS version 1.0 was released in 2012.

Misko Hevery, a Google employee, started to work with AngularJS in 2009.

AngularJS is a JavaScript framework designed for creating single page web application.

AngularJS is entirely based on HTML and JavaScript, so there is no need to learn any other syntax or language.

What is AngularJS?

AngularJS is structural framework for dynamic web apps. It lets you use HTML as your template language and lets you HTML’s syntax to your application’s components clearly and succinctly. AngularJS’s data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

Features of AngularJS

1.You don’t need to write special code to bind data to the HTML controls. This can be done by just adding few snippets of code.

2.When carrying out DOM(document object model) manipulation a lot of JavaScript was required to be written to design any application. But with AngularJS, you will be amazed with the lesser amount of code need to write for DOM manipulation.

3.AngularJS provides developers options to write client side application(using JavaScript) in clean MVC(model view controller).

4.AngularJS is open source, completely free, and used by thousands of developers around the world

 

Advantages of AngularJS

1.MVC(Model view controller)

Most frameworks require programmers to splitting the app into multiple MVC components. After that, the programmer has to write a code to put them together again. AngularJS, however, strings it together automatically. That saves you time, and reduces the app’s time to market.

2.Two way Binding

It is possible to do two way binding with AngularJS, meaning you can make any data related  changes and would immediately be propagated to the corresponding views and when any change is made in the view, that would happen in the underlying models as well. As soon as the app data changes, there will be corresponding changes in the UI as well.

3.Dependency Injection

The built in dependency injection is something most developers love about AngularJS. This feature helps them to develop, test and understood application in a better way.

Dependency Injection is a software design pattern in which components are given their dependencies  instead of hard coding them within the component. This relieves a component from locating the dependency and makes dependencies configurable. This helps in making component reusable, maintainable and testable.

4.Routing

AngularJS can take care of routing which means moving from one view to another. This is the key fundamental of single page application, wherein you can move to different functionalities in your web application based on user interaction but still stay on the same page.

Disadvantages of AngularJS

Though AngularJS comes with lots plus points but same time we should consider the following points:-

1.Confusing

There are multiple ways to do the same thing with AngularJS sometimes, it can be hard for novices to say which way is better for a task. Hence it is imperative for programmers to develop an understanding of the various components and how they help.

2.Not secure

Being JavaScript only framework, application written in AngularJS are not safe. Server side an authentication is must to keep an application secure.

3.Not degradable

If your application user disables JavaScript then user will just see the basic page and nothing.

First AngularJS program

Before we start with creating our first AngularJS program, let us see what are the important part of a AngularJS application

1.ng-app

This directive defines AngularJS application.

2.ng-model

This directive bind the value of HTML controls to application data.

3.ng-bind

This directive bind the application data to HTML view.

4.Expression

AngularJS expression can be written inside double braces.{{expression}}

NOTE:

AngularJS lets you extend HTML with new attribute called directive.

AngularJS directive are prefix with ng-.

Steps to create AngularJS program

1.Load framework

framework

 2.Declare HTML body as an AngularJS application using ng-app

ngapp

3.Define model name using ng-model directive

ngmodel

4.Accesing member varible

expression

Now our first AngularJS program

first

output

output1

output2

 

 

Java 8 | Lambda Expression

The lambda expression feature reshaped the Java language. Lambda expression comes with the functional programming construct to the object oriented programming. Lambda is nothing but an anonymous method.

Features:

  • Lambda expression reduces the number of lines of code.
  • Lambda expression provides implementation to the functional interface.
  • New capabilities are added to the API library.
  • Parallel processing of multi-core environments, especially handling of the for-each style of operations.

 Example:  


@FunctionalInterface

package in.co.bitbyte.java8;

public interface Developer {

public void writeReadableCode();

}

 Implementation of Functional Interface(without lambda expression):


package in.co.bitbyte.java8;

public class Test {

public static void main(String[] args) {

Developer d = new Developer() {

@Override

public void writeReadableCode() {

System.out.println(“At bitbyte, developers  think simple”);

}

};

d.writeReadableCode();

}

}

Implementation of Functional Interface(with lambda expression):


package in.co.bitbyte.java8;

public class Test {

public static void main(String[] args) {

Developer d = () -> {

System.out.println("At bitbyte developers think simple");

};

d.writeReadableCode();

}

}

 This feature changing the way that code is written. Two primary reasons to change the style of coding:

Added new syntax elements that expressive power of the language.

In addition to this added new capabilities to the API library, a big step into the collection API for iteration.

Syntax:

Lambda operator:         (parameters)  -> {actions}

The left side of lambda operator indicates “parameters” right side of the lambda operator lambda body specifies the “actions” need to be performed by the lambda expression.

Lambda expressions are not executed on its own. It works with the implementation of the functional interface.

Before lambda expression, we used the anonymous inner class to implement a functional interface (Single Abstract Method). So many built-in interfaces in Java 7 Runnable, Comparable and so on… Java 8 called this interfaces as functional interface some of the added functional interfaces are BiConsumer, Bi

Example:


package in.co.bitbyte.java8;

public class TestingBuiltInFunctionalInterface {

public static void main(String[] args) {

Runnable r = new Runnable() {

@Override

public void run() {

System.out.println("I am from run method of Runnable interface using anonymous inner class");

}

};

r.run();

}

}

We can implement the above same Runnable interface by using the lambda expression in a very simple way.

Example:


package in.co.bitbyte.java8;

public class TestingBuiltInFunctionalInterface {

public static void main(String[] args) {

Runnable r = () -> {

System.out.println("I am run method from Runnable interface using lambda expression");

};

r.run();

}

}

In the above example, we didn’t mention the method name of the interface because in the functional interface having exactly only one abstract method. We implemented the functional interface using the lambda expression.

If we want to do iteration in the collection, we will do iteration one of the following way.


package in.co.bitbyte.java8;

import java.util.ArrayList;

import java.util.List;

public class Ecommerce {

public static void main(String[] args) {

List list = new ArrayList();

list.add("Hybris");

list.add("ATG");

list.add("DemandWare");

list.add("Intershop");

for(String ecommerceTech : list)

{

System.out.println(ecommerceTech);

}

}

}

But the lambda expression defines a new style for the for-each operation. The main advantage here is we can achieve parallel processing. Without lambda, expression iteration is like processing each element.

Example:


package in.co.bitbyte.java8;

import java.util.ArrayList;

import java.util.List;

public class Ecommerce {

public static void main(String[] args) {

List list = new ArrayList();

list.add("Hybris");

list.add("ATG");

list.add("DemandWare");

list.add("Intershop");

list.forEach(ecommerceTech ->{System.out.println(ecommerceTech);});

}

}

Java 8 | Functional Interface

An interface which is having only one abstract method then it is called as a functional interface. (only one abstract method, one or more default methods or static methods)

Example:

package in.co.bitbyte.java8;

@FunctionalInterface

public interface Mobile {

public void makeCall();

}

We can use the annotation @FunctionalInterface to declare the interface as a functional interface. If it is not valid functional interface, Compiler will throw an error.

This annotation is optional. The compiler will consider interface as a functional interface if it contains exactly one abstract method.

Uses:

  • The functional interfaces are used extensively in lambda expressions.
  • The functional interface acts as a function. We can pass the interface as a parameter this is the functional programming approach.
  • So many interfaces in Java are functional interfaces (built in functional interfaces) like Comparator, Runnable and so on.
  • The main advantage of using functional interface is backward compatibility.

Note: we can declare abstract methods that are overriding the public methods of Object class. These methods did not consider as abstract methods in a functional interface. [Reason behind this thing is any implementation of the interface will have an implementation from Object class]

Example:

package in.co.bitbyte.java8;
@FunctionalInterface
public interface Mobile {  

public void makeCall(); 

public String toString(); 

boolean equals(Object obj);

static useInternetServices()
{
  System.out.println("use whats app");
}
default void mailServices()
{
System.out.println("Use e-mail service");
}