JavaScript - Angular - Install Angular CLI

To create an angular project, we need to first setup our development environment. First let us install the latest version of NodeJS. Visit the nodejs website and download the LTS version:

https://nodejs.org/en/

Check the version of node at the terminal. 

$ node --version

v8.11.1

$ npm --version

5.6.0

The minimum version required to install angular applications is version 6.9. So we can proceeed with installing Angular CLI.

Angular CLI is a Command Line Interface which we use to create a new angular project.It:
generates the boiler plate code
creates deployable packages

To install angular cli. At the command prompt:

$ npm install -g @angular/cli
/home/ubuntu/.nvm/versions/node/v8.11.1/bin/ng -> /home/ubuntu/.nvm/versions/node/v8.11.1/lib/node_modules/@angular/cli/bin/ng
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/@angular/cli/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ @angular/cli@6.2.3
added 242 packages in 23.945s
$ 

Now to check if the installation was successful. At the command prompt:

$ ng --version

     _                      _                 ____ _     ___

    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|

   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |

  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |

 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|

                |___/

    

Angular CLI: 6.2.3

Node: 8.11.1

OS: linux x64

Angular: 

... 

Package                      Version

------------------------------------------------------

@angular-devkit/architect    0.8.3

@angular-devkit/core         0.8.3

@angular-devkit/schematics   0.8.3

@schematics/angular          0.8.3

@schematics/update           0.8.3

rxjs                         6.2.2

typescript                   2.9.2

    

$ 

JavaScript - Install nodejs and npm in Ubuntu 18.04

On trying to install npm in Ubuntu 18.04, I received the following error:
$ sudo apt install npm
Reading package lists... Done
Building dependency tree       
Reading state information... Done
Some packages could not be installed. This may mean that you have
requested an impossible situation or if you are using the unstable
distribution that some required packages have not yet been created
or been moved out of Incoming.
The following information may help to resolve the situation:

The following packages have unmet dependencies:
 npm : Depends: node-gyp (>= 0.10.9) but it is not going to be installed
E: Unable to correct problems, you have held broken packages.

Hence, I removed the nodejs referring to the following URL:
https://askubuntu.com/questions/626383/node-package-manager-got-corrupted-in-some-way-now-it-cannot-be-installed


To setup nodejs and npm using nvm in ubuntu 18.04:


Step 1: To download the nvm installation script from the project's GitHub page, you can use curl. Note that the version number may differ from what is highlighted here:

$ curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh -o install_nvm.sh

Step 2: Check the contents installation script with nano:

vi install_nvm.sh

Step 3:

$ bash install_nvm.sh

Step 4: It will install the software into a subdirectory of your home directory at ~/.nvm. It will also add the necessary lines to your ~/.profile file to use the file.

To gain access to the nvm functionality, you'll need to either log out and log back in again or source the ~/.profile file so that your current session knows about the changes:

$ source ~/.profile

Step 5: With nvm installed, you can install isolated Node.js versions. For information about the versions of Node.js that are available, type:

$ nvm ls-remote

Step 6: As you can see, the current LTS version at the time of this writing is v8.11.1. You can install that by typing:

$ nvm install 8.11.1

When you install Node.js using nvm, the executable is called node. You can see the version currently being used by the shell by typing:

$ node -v
v8.11.1

$ npm -v
5.6.0

Reference:

• https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-18-04

JavaScript - writing Modular code

Instead of multiple script tags in the body. We can combine them all using Webpack. This helps us in ordering of the scripts and managing dependencies.

For webpack:
https://webpack.js.org/
https://webpack.github.io/
https://github.com/systemjs/systemjs
https://jspm.io/

JavaScript - Frameworks - Angular - React

Sometimes, we want to build a single page application. In a SPA (Single Page Application) the user experience is handled through JavaScript. This is the modern way of building applications. The popular frameworks are React and Angular. These frameworks are written in JavaScript. This is much more powerful than Jquery. Jquery only adds certain parts on the webpage.


Refer:

• https://angular.io/
• https://reactjs.org/

JavaScript - Libraries - Jquery

Jquery uses JavaScript. But, it added many convenience functions. For example AJAX or accessing the DOM, traversing through the DOM or manipulating the DOM. This where Jquery can be really helpful.

We can download it from:
https://jquery.com/download/

JavaScript - Events - Changing Propagation Order

Let us consider the following HTML code for our examples:

<body>
  <div style="width: 100px
              ; height: 100px
              ; background-color:green"
       id = "greenDiv">
    <div style="width: 40px
                ; height:40px
                ;background-color:yellow"
         id = "yellowDiv">  </div></div>
</body>

What if we want to change the propagation order of the triggering events.

var yellow = document.querySelector("#yellowDiv");
yellow.addEventListener("click", yellowListener);


function yellowListener(event){
  console.log("clicked Yellow Square!");
}

var green = document.querySelector("#greenDiv");
green.addEventListener("click", greenListener,true);

function greenListener(event){
  console.log("clicked Green Square!");
}

Now, if we want to change the order of propagation of events. then we can add the argument true to the green eventListener. 

JavaScript - Events - Event Object Properties

The event object has some useful properties.

Let us consider the following HTML code for our examples:

<body>
  <div style="width: 100px
              ; height: 100px
              ; background-color:green"
       id = "greenDiv">
    <div style="width: 40px
                ; height:40px
                ;background-color:yellow"
         id = "yellowDiv">  </div></div>
</body>



Example:
We can log in the event target:

var yellow = document.querySelector("#yellowDiv");

yellow.addEventListener("click", yellowListener);

function yellowListener(event){
  console.log("clicked Yellow Square!");
}

var green = document.querySelector("#greenDiv");

green.addEventListener("click", greenListener);

function greenListener(event){
  console.log(event.target);
  console.log("clicked Green Square!");
}

We get a complex object. This object actually represents the div element. So, event.target gives the object on which the event happened. This is very useful because there are times when you need this object. During runtime, we may want to know, which element precisely triggered this event.

To know the problematic element, we can set the background color of the target element to "blue".

var yellow = document.querySelector("#yellowDiv");
yellow.addEventListener("click", yellowListener);


function yellowListener(event){
  console.log("clicked Yellow Square!");
}


var green = document.querySelector("#greenDiv");
green.addEventListener("click", greenListener);

function greenListener(event){
  console.log(event.target);
  event.target.style.backgroundColor = "blue";
  console.log("clicked Green Square!");

}

Now, we can click on one of the squares and change its color to blue. So, event.target is very useful for debugging purposes.

We can also extract the position of where the click happened. For example:

var yellow = document.querySelector("#yellowDiv");
yellow.addEventListener("click", yellowListener);


function yellowListener(event){
  console.log("clicked Yellow Square!");
}


var green = document.querySelector("#greenDiv");
green.addEventListener("click", greenListener);


function greenListener(event){
  //console.log(event.target);
  console.log(event.clientX, event.clientY);
  console.log("clicked Green Square!");
}


This will print the X and Y position of the point of click on the document. So, now, if I click on one of the squares. We can see that the coordinates change depending on where my cursor is.

This is extremely useful. As we can use these coordinates to move something on the page or some other action. To check all the properties that are available by default on each event - can be found on this page:
https://developer.mozilla.org/en-US/docs/Web/API/Event#Properties

But, for specific event like say.. mouse click event we can just google for it. We can then arrive at a MDN page:
https://developer.mozilla.org/en-US/docs/Web/Events/click

... which will give us an overview of the properties which we can access at the time of developing.
https://developer.mozilla.org/en-US/docs/Web/Events/click#Properties

 If we want to get a list of all the available events on a certain object. We can either:
- log the element to the console
- google for it.




Refer:
https://developer.mozilla.org/en-US/docs/Web/API/Event

Practice at:
http://jsbin.com