Install and Setup Angular

Before we start, lets install the angular cli with the following command

npm install -g @angular/cli

Angular CLI is a tool that can

  1. make a new project,
  2. compile your typescript files,
  3. configure your typescript compiler
  4. run your code with live preview,
  5. build and package your project.
Note

Make sure you have latest node and npm installed, at least node version 6.9.x and npm version 3.x.x. To see the versions you can run commands node -v and npm -v for node and npm versions respectively.


 Warning

While installation you might get the following warning

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/@angular/cli/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

You can skip them, since they are optional warnings


Making First Angular Project

To create a new project in angular you can use the angular cli command

ng new <project-name>

Let's say we want to create a project hello then the command will be ng new hello. This will create a new project inside a folder hello we specified while creating the project.

Now go inside the directory. You can do the following now,

  1. Run ng serve for a dev server.
  2. Run ng generate component component-name to generate a new component.
  3. Run ng build to build the project.
  4. Run ng test to execute the unit tests via Karma
  5. Run ng e2e to execute the end-to-end tests via Protractor

Now run the commands to see the app working

cd  <project-name>
ng serve

This will start a local server and start the angular application on this server.


Uninstall global node dependency

To uninstall a node dependency installed with -g command you can use the following command.

npm uninstall -g <dependency>

The above command will remove that dependency from your system.

Uninstall node dependency

To remove a dependency from your project you can use the following command.

npm uninstall <dependency>

This will remove the dependency and remove its entry from the package.json file.

Points to Remember

If you are installing node for the first time then, use the NodeSource PPA and first choose the version of node you want to install.

Following are the sources for the node versions

for Node.js v4

curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -

for Node.js v5

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

for Node.js v6

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -

for Node.js v7

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -

Once this is done, then update your repositories by command

sudo apt-get update

Now, finally install NodeJs and Npm using the following command

sudo apt-get install nodejs
sudo apt-get install npm

To check the version of node, try command node -v and npm version by command npm -v

Upgrading NodeJs and Npm

If you already have node and npm install and you want to upgrade the version then you should first run the following command to remove them.

sudo apt-get purge nodejs npm

This will remove nodejs and npm, now you can follow the steps mentioned above to install fresh copy of node and npm.

What is Identity == operator

In Java, == operator is used for checking the reference of objects. In Groovy, it is used to check if the object are equals, i.e it is the implementation of equals() method in java.

== operator in

  1. In java, checks the reference of the objects.
  2. In groovy, == is equivalent to .equals() and checks if the two objects are equal

is operator

  1. In java, does not exist
  2. In groovy, checks the reference of the objects which is == in java

equals() method

  1. In java, checks if the two objects are equal
  2. In groovy, checks if the two objects are equal

Let's have a look at the following examples

class A{
  String name;
  
  boolean equals(A a){
    this.name == a.name
  }
  
}

A a1 = new A(name : 'ekiras')
A a2 = new A(name : 'ekiras')

println (a1 == a2) 
println (a1.equals(a2)) 

The above output will give the following output.

Output

true
true


Point to Remember

  1. Coercion Operator is used for casting
  2. Custom Coercion rules can be applied to a class by defining asType method in a class.
  3. Syntax of coercion operator is as

What is Coercion Operator

Coercion operator is used to do type casting of objects in groovy. It converts objects of one type to another type.

Lets take a look at the following examples

int a = 123
String s = (String) a

The the above example, the assignment of a to s will give a ClassCastException in java but when you run the same in groovy it will not give an error since Groovy as defined how to typecast integer to string.

Coercion version of the above example is as follows

int a = 123
String s =  a as String

How to Define Custom Coercion Rules.

Let's take an example where we want to convert an object of class A to class B.

class A{
  String name
}

class B{
  String name
  String email
  
  def asType(Class target){
    if(target == A)
      return new A(name : this.name)
    if(target == String)
     return new String("${this.name }  ${this.email}")  
  }
}

def b = new B(name : 'ekansh', email : 'ekansh@ekiras.com')

def a = b as A
def s = b as String

println b.dump()
println a.dump()
println s
Output

<B@6040d37b name=ekansh email=ekansh@ekiras.com>
<A@b0fb0cc name=ekansh>
ekansh ekansh@ekiras.com


Here the important thing to note is the asType() method. In asType you can return the any object since the return type of the method is def. You can return object of any class depending upon the type of class it has to be casted to

When the as A is called on object of class B, then an object of class A will be returned. When as String is called on object of class B is called then a String object is returned.

Direct field access operator

In groovy when we access the property of any object as object.property then groovy under the hood calls the getter method of the property even if we have not specified it. The default getter and setter methods return the property and set the property respectively.
Let's have a look at the example.
class User {  
  String name
  String email
  
  String getName(){
    return "Name is $name"
  }
  
}

User u = new User(name : 'ekiras' , email : 'ekansh@ekiras.com')

println u.name
When you execute the above code you will get the output Name is ekiras.
Note
What happens under the hood is u.name will internally call the getter method of instance variable name.
Here calling u.getName()' is equivalent to calling u.name

Also, all the classes and their instance variables are by default public in nature. So you can access the instance variable without calling the getter method byb using the Direct Field Access Operator
Syntax of Direct Field Access operator is as below
<object>.@<property>
So we can use this operator as shown below
class User {  
  String name
  String email
  
  String getName(){
    return "Name is $name"
  }
  
}

User u = new User(name : 'ekiras' , email : 'ekansh@ekiras.com')
println u.name  // 1
println u.@name  // 2
The above code will give the following output
Output

Name is ekiras
ekiras

The 1st print statement prints Name is ekiras because it calls the getter method of the property name while 2nd statement calls the property directly.

Ternary Operator

Ternary Operator is the short hand of the if-else block, where a condition is evaluated to true or false and following statement is executed.

Syntax of the ternary operator is below

<boolean expression> ? <executed when condition is true> : <executed when condition is false>

A typical example of if-else block is shown below where we check if a variable is null or not.

String s = "hello"
if( s != null )
  println s
else 
  println "not found"

We can replace the above code with the ternary operator as shown below

String s = "hello"
println s !=null ? s : "not found"

Here, the variable s is assigned a string hello and condition s!=null evaluates to true hence the statement after ? is executed which returns s itself.

Elvis Operator

Elvis operator is the short hand of the Ternary operator explained above. In this operator we do not specify the true condition. The true condition is will evauate to the expression itself.

Syntax of the elvis operator is

<expression> ?: <executed when condition is false>

Let's see an example

​String s = "hello"
println s!=null ?: "not found"  // true
println s ?: "not found" // hello
println null ?: "not found"

In the above example,

  1. Expression s!=null evaluates to true, and will print true
  2. Expression s in will evaluate to true according to Groovy Truth, and will return hello, the value of variable s
  3. Expression null will evaluate to false according to Groovy Truth and will return not found string