AngularJS – How to Code from Scratch

AngularJS  or Angular JS is a front-end application framework based on Javascript. It adheres to the MVC (Model View Controller) architecture as well as MVVM (Model View View Model). Google is the main developer for AngularJS. However, it is also maintained by a lot of other developers. This makes AngularJS one of the most active open-source development frameworks.

To keep me abreast with this framework, I am planning to make a series of posts as tutorials. This will be the first part. Other parts are here:

On this tutorial, we are going to go through a development of a common app. To start off, we need NPM installed.

Installing AngularJS CLI

Once you have NPM, you can install a global instance of Angular CLI:

> npm install -g @angular/cli

The above command may take a while to do its thing. Just be patient. This will install a global angular CLI (command line interface) that we can call to create our project. After that, you may now start.

First, let us confirm whether it is properly installed by checking its version. The appropriate command is

> ng --version

As of this writing, I’m using Angular 7.1.3. On your command line you should expect to see something like this:

AngularJS CLI version
Fig. 1. AngularJS CLI Version information

Creating a AngularJS New Project

Now, lets go to creating a new project. Creating a project on our desired project folder is simply done with just one command. So, if you want to call your project my-app we can just do:

> ng new my-app

When we call this command, it will show us a dialog asking us whether we 1. use routes, 2. what css format we are going to use. For number 1, I answer yes because I’m going to use Angular routing. On the second dialog, I answer SCSS since I’m familiar with SASS or Syntactically Awesome Style Sheets.

As a result, we will see inside the my-app folder the following directory structure as shown:

AngularJS directory Structure
Fig 2. AngularJS Directory Structure.

Serving your Application

Once you verified that you get similar directory structure as above, you can now start your server. To start the server, we just do the command:

> ng serve

You can now open a browser and point it to http://localhost:4200. You may also add a switch -o to the command to open your default browser to that address.

Fig. 3. What you’ll see on your AngularJS App

If you see this image, you successfully created your AngularJS application. So, there you have it – Congratulations!

Please follow and like us:
error

Javascript Rest Operators and the “arguments” Variable

javascript rest operator and the argument variable
read about javascript rest operator and the argument variable

This article is all about javascript rest operators and how it could be used in javascript programming. A little discussion is also included for the arguments variable and how to process it inside a function.

Have you ever thought of how some Javascript built-in functions like Math.max() contain multiple arguments? Yes, it is possible – javascript functions may have an arbitrary number of arguments.

This is made possible with the javascript rest operators and it looks like this:

function getSum(...addends) {
  let sum = 0;
  for (let addend of addends) sum += addend;
  return sum;
}

alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6

As you see in the function’s argument, we added three dots before our argument: addends. The three dots (…) also called the rest operator tells the function to merge the arguments in the function into an array.

In the function, we can then process the inputs similar to how we process arrays.

We must follow some rules though when we use rest operators. For example, it is not possible to place the rest operator at the first or middle part if your function has multiple arguments.

function person(...arguments, firstname, lastname) {
//the argument arrangement above does not make sense...
}

The above function does not make sense. So we must arrange the arguments like this:

function person(firstname, surname, ...args){
//this is clearer and this will work
}

Simply put: we must place the rest operator as the last argument.

The arguments variable

Another useful javascript trick is not placing arguments in the function. We may then process all inputs though with the argument variable. The argument variable is an array and we can process it like how we treat arrays. For example:

function testing(){
  for(var args of arguments){
    //arguments is the variable fed to testing function
    console.log(arg); //lets just output each argument
  }
}

testing('a','b');
testing('a','b','c');

However, creating functions like this would result in readability problems. The reason is that we don’t know what inputs we’re feeding our function. The arguments variable though is NOT really an array such that Array.map() may not work.

Another problem is: arguments can not be used with arrow functions. This will NOT work:

const arrowfunc = () => {
  for(var arg of arguments){
    console.log(arg);
  }
}

Take note that arrow functions cannot have their own this. They can not have their own arguments variable also.

Please follow and like us:
error