Leaning Towards Angular

 A quick look into the world of Angular with a brief introduction into creating an Angular project

Created by Miško Hevery and Adam Abrons, Angular is a framework that has been around since it's unveiling in 2009 and it's subsequent release in 2011.

Before moving on to how exactly to go about using Angular, let us take a brief look at what Angular is and what it was created for.

What is Angular?

Angular is a framework designed in order to ease the development process for web designers. It was not really aimed for web developers as the framework mostly aids in the creation of dynamic websites. 

The framework was mainly meant to help people who needed to easily convert a web page of static format into something dynamic.

In fact, when the concept was first introduced at Google during the development of Google Feedback, the team was able to cut down the development time from an approximated six months to three weeks. This was the stepping stone in proving how effective and useful Angular could be.

Why Angular?

1. This framework provides significant support in terms of data binding, routing and animations.
2. There is no requirement to learn a new language since the development can be done in JavaScript.
3. Provides support in easing collecting data from forms and manipulating that data.
4. Enables loose coupling, making the code cleaner and mostly portable.
5. Eases the testing process.
6. After building a proper Angular project, it is possible to have a clear and concise code which can be easily maintained.

 Considering this advantage, let us look at how to create a proper Angular project.

Working with Angular

For the purpose of this example, the following tools will be required;

1. IntelliJ Idea IDE
2. Node.js installed 

After installing node.js, it is possible to confirm the installation by running the node -version command in Command Line/Terminal.

Creating an Angular Project

1. Open IntelliJ Idea IDE.

2. File -> New -> Project

3. From the left-hand pane, select JavaScript and then, select Angular CLI from the options that the Wizard presents.

JavaScript -> Angular CLI -> Next

4. Specify a name for the project.

In the Node Interpreter section, specify the node path in your system.

To find the Node path, you can run the following command in your Terminal (if you use Linux OS):

which node

If you use the Windows OS, run the following command in your Command Prompt:

 where node

In the Angular CLI section, specify the following: npx --package @angular/cli ng 

5. Click Finish.

You have now created an Angular project.

Before moving on, be sure to run the npm install command to install the dependencies.

Running the Angular Project

There are three methods that can be used to run an Angular project on IntelliJ.

1. Run the ng serve command in the IntelliJ terminal
2. Click Start in the npm tool window. (This can be accessed from the bottom of the left-hand pane in the IDE)
3. Configure the Angular CLI Server to the Run Configuration in IntelliJ and press the green play button to run the above command automatically.

After the project has been run (the ng serve command has been executed), the application can be viewed by navigating to http://localhost:4200/. 

Since the project is new, it will be displayed in the following manner;

The reason this page is displayed is because there is a default HTML page that has been designed as shown above (app.component.html). 

This is simply given as a template or example of the types of websites that can be developed with the help of Angular. 

Helpful links and documentation is provided in this page, but when the actual design and development of the website begins, this code can be deleted from the HTML document.

Let us now look at how to develop the first basic Angular application.

Building Web Pages with Angular

All changes that should be made to the web page, should be done via the app.component.html and app.component.css files.

1. In the app.component.html, enter the following code;

<h2>This is my first Angular Project</h2>
<div class="container">
  <form>  <div class="form-group">
    <h1 class="text-center text-primary">Names</h1>
    <div class="input-group-prepend">
      <input #name class="form-control" name="todo" ngModel placeholder="Enter Name" 
        type="text">
      <p>{{name.value}}</p>
    </div>
  </div>
  </form>
</div>

The # key declaration lets the program know that it is the name of a variable. This variable has then, been used to display the value later on.

2. In the app.component.css, enter the following styles to stylize the page;

body{ padding: 0; margin: 0;}
form{ max-width: 25em; margin: auto;}

3. If it does not prompt the import of NgModule (This is what allows for the use of the ngModel as specified in the input tag above), in the app.module.ts file, add the following line;

import { NgModule } from '@angular/core';

This will ensure that ngModel works properly.

4. Run the application and view in localhost:4200.

In Angular projects, unlike in Spring or any other application, when the changes that are made to the code are saved, the changes are automatically made in the deployed version and therefore, the programmer does not need to stop and restart the server.

After running the application, you can view the following page on your browser.

Typing in the text box will display the typed text beneath the input box in real time as shown below.

Now, we can step up the web page.

Modifying the Angular Project

1. To add styling to the page from Bootstrap 4, add the following tag to your index.html file, which can be found in the src folder.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/
css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E26
3XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

2. Make the following changes to the app.component.html file 

<h2>This is my first Angular Project</h2>
<div class="container">
  <form>  <div class="form-group">
    <h1 class="text-center text-primary">Names</h1>
    <div class="input-group-prepend">
      <input #name class="form-control" name="todo" ngModel 
        placeholder="Enter Name" type="text">
      <span class="input-group-text">Add</span>
      </div>
  </div>
    <p>{{name.value}}</p>
  </form>
</div>

Now, let's make changes to add the values that the user enters into an array.

3. In app.component.html, add the following attribute to the <span> class;

(click) = addNames(name.value)

Here, name is the name given to the variable declared by the # key in the input tag. 

4.  In the app.component.ts file, make the following changes to the AppComponent class;

export class AppComponent {
  title = 'SampleAngular';
  namesArray = [];
  
  addNames(value){
    this.namesArray.push(value)
    console.log(this.namesArray)
  }
}

(If you have enabled TSLint, which is an analysis tool which gauges the readability and maintainability of the code, it will require a higher level of syntax, i. e., semicolons at the ends of statements. 

It is possible to write TypeScript code without the use of the semicolon, provided that TSLint is disabled in your IDE.)

Running this code at this moment will allow the user to add multiple names, which will be stored in an array and logged to the console as coded above. 

After entering a few names, the console log would be as follows;

Now, let us look at how to display these names that have been added on the web page.

5. In order to display the data, the following code can be added to the app.component.html file.

<div class="data">
  <ul class="list-instyled">
    <li *ngFor="let name of namesArray">{{name}}</li>
  </ul>
</div>

After the program is run and some names are added, it would be displayed as follows;

And that is how you create a very basic Angular project.

The Angular Framework can help build dynamic and powerful websites with ease.

Happy Angling!