Angular 4 Tutorial For Beginner With Simple App Project

The Angular introduction and tutorial for beginners. Recently I was working hard to learn Angular 4 for my upcoming project needs. Technological development requires me to learn so much that I can keep up with the evolution. Lightweight, easy-to-build application system, well-organized programming structure, single page application, that’s what today’s programmers dream of.

At this time (this article was written), the Angular framework can answer all desire. Let’s look at Angular 4 tutorials for beginners along with an example project.

Tutorial Angular 4 For Beginner From Zero To Hero

What is an Angular Framework

Angularjs currently called Angular (ver 4) is an open-source front-end javascript framework created by Google’s Angular Team that is used to handle the large and complex web applications. Angular is a development of the older AngularJs that is more complete and powerful.

Angular is very different from AngularJs although the concept of Angular is the result of AngularJs development.

A little story, before learning about Angular (Ver 4), I first learned about AngularJs. And what I earn is a zero. I have trouble to understanding the basic concept of AngularJs because I am not a smart kid. But Angular 4 provides a different and extraordinarily structured concept so that Angular 4 is easier to learn and use. I will not go into more detail about the difference between AngularJS and Angular because it has been widely discussed on the big sites.

Angular is specifically designed to help developers build SPA (Single Page App) for complex project development. Simply put, SPA is a web application accessed through a browser but offers a more dynamic interaction that resembles desktop and mobile apps.

The biggest difference between standard and SPA websites is that SPA hardly never uses page refresh which makes the system slow. The advantage of using SPA is how to communicate with a back-end server without refreshing the page using dynamic AJAX functionality. And automatic page rendering occurs on the client side.

It looks like my intro is too long, okay we just start Angular 4 tutorial create a simple app to display the list of items using PHP REST API and Angular

Initial preparation:

1. install node.js and NPM

To install node.js, I have discussed in the previous article. You can read it through the following article

Why does Angular 2 need Node.js and NPM?

Node.js and NPM are not required to run Angular applications. However, this is required as a development environment before we can do anything. Some reasons why need it:

TypeScript: Angular uses typescript which is then compiled into the .js extension. Typescript is a superset of JavaScript, and it’s compiled to JavaScript anyway.

Web Server: Node.js is used as a web server before it is compiled as a production file.

Reference : https://stackoverflow.com/questions/37267510/why-do-we-have-install-node-js-for-Angular-2-0

2. Install Angular cli

Angular cli is the command-line interface for Angular. The Angular CLI requires all of the configuration and setup.

Reference : https://github.com/Angular/Angular-cli#installation

3. Install Visual Code Editor

The visual code editor is an IDE created by Microsoft. Using this IDE is an appropriate step where typescript is an open source project supported by Microsoft. So using IDE and Project in one package is a smart step. Please download the Visual Code Editor at https://code.visualstudio.com/

4. Mysql Database and Data Preparation

As a material of this example project, we use MySQL as a data container. For the initial preparation, we will use a database that I often use in previous articles, namely “pos” database. Please visit Tutorial Build Point Of Sale With PHP, PDO, MySQL And Jquery Part 1 for database preparation.

REST API MySQL Database

5. Make a Simple REST API

I use PHP as the backend server of this Angular tutorial to create a simple REST API. I am not discussing further the creation of this REST API because I have discussed in previous articles in Rest API And HTTP Methods (GET, POST, PUT, DELETE) Using Slim Framework And PHP. But you can download REST API Project as a supporting file of this tutorial here.

If the five steps above have been completed, the next step we create the main application.

Create a simple application to display product list using Angular 4, Rest API PHP and MySQL

# Create an Angular project

Create new project with Angular cli with following code in the terminal or command prompt

After create new project, please go to on the learnangular4 folder

# Create an interface

What is an interface? Please read here about the interface description. In essence, an interface is a class that can be used as a variable type.

Copy the following code to create an interface on the terminal or command prompt

And then copy the following script in the items.ts

# Create a service

In Angular, a service is a function, or object, that is available for, and limited to, your Angular application.

We will create services that are used to communicate with REST API Server that we have prepared before.

Copy the following code to create the service in the terminal or command prompt

Then copy the following code in data.service.ts

A brief description:

To communicate with REST API Server, Angular requires functions that can be used to communicate with the backend server. The function called httpclient .

In essence, using the RxJs Observable library makes it easy for Angular to process data from HTTP requests. I am not clever to explain in detail, you can learn about the full observable on the site https://scotch.io/tutorials/Angular-2-http-requests-with-observables. I also learned from there.

# Make 2 pieces of component

The Component brief description.

Angular Component is a special command type that uses a simple configuration suitable for the structure of component-based applications.

This makes it easier to write applications in a similar way to using Web Components or using the new Angular application architecture.

Advantages of Components:

  1. Configuration is simpler than regular commands.
  2. Promote smart defaults and best practices.
  3. Optimized for component-based architecture.
  4. Writing component directives makes it easy to upgrade to Angular

Reference: https://Angular.io/api/core/Component

Create the first component of the listitem, use the following commands to create the component in the terminal or command prompt

From the above command will create 4 pieces of new files like the following picture

Listitem Component Tutorial Angular 4 For Beginner

Open the listitem.component.ts file and add the following code

Open the file listitem.component.html and add the following HTML code

A brief description:

Listitem.component.ts is the main component used to display list items.

Listitem.component.ts will call servicedata service that has been created to communicate with the server backend.

The product data will be accommodated into the listitem variable then displayed in the HTML template.

Listitem.component.html is an HTML template that will displayed on the browser screen

The second component is detailitem, use the following code to create the component

From the above command will create 4 pieces of new files like the following picture

Detailitem Component Tutorial Angular 4 And Php Rest Api For Beginner

Open the file detailitem.component.ts and add the following code

Open the file detailitem.component.html and insert the following HTML code

A brief description:

This component is used to display item details.

In this component, we learn to use @input() decoration. @Input() decoration performs bindings to component members within template expressions and statements that appear on the right side of the binding declaration

# Styling you app

The final step of this tutorial, we will set the application to appear neat and good.

To facilitate my styling using the Foundation CSS Framework. Add the following CDN to the index.html file

Edit styles.css and insert the following CSS script

Done! Please test your app with script below

Or if you want to run from the other pc please use the following script

192.168.1.20 is my current ethernet IP Address, change with yours

Test Angular Project With Ng Serve

If successfully, open your browser and run http://localhost:4200 in the url address

Tutorial Angular 4 For Beginner With Simple Project

Conclusion

Understanding angular 4 is not as difficult as we imagine. Many guides or tutorials have been shared through youtube or google search engine. Also, Angular 4 has implemented the MVC concept even though its use is slightly different from the existing MVC concept. This causes the structure of the program we create to be more neat and structured.

You can download example project using the download link below. Please help me to share this article with those who need it by sharing the article through share button below.

So the article about angular tutorial 4 for beginners with a simple project, hopefully useful.

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.