Angular 5 Tutorial 02 – Creating Hello World Application

In this post, we are going to discuss how to setup development environment and create an initial angular app using CLI.

Whenever I’m creating a new application, I always prefer some standard folder structure or use file generator like Yeoman.

A quick start tool always helps the developer to save their valuable time and use those time efficient way on improving the quality of the application.

Angular provides us Angular CLI which is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

Using this CLI, we can create apps with a working condition which uses best practices suggested by Angular Team.

To create an Angular application using Angular CLI, all we need is to follow the below steps:

1. Install Node js and npm on your machine.

Visit Node.js web page and download installer. Once you’ve installed nodejs, the npm will get installed along with it.

2. Verify the compatible version

Angular CLI requires the minimal version of node 6.9.x and npm 3.x.x.

We can check the version of node and npm using following commands.

node -v

npm -v

01

3. Install Angular CLI

Run the following command to install Angular CLI globally.

npm install -g @angular/cli

-g flag is used to install the package globally in the npm.

Once we installed CLI globally, we can confirm whether the tool installed successfully by using the following command.

ng -v

 

4. Create a project

Now, creating a project becomes very simple. We have to run following command,

ng new cool-app

  • cool-app is the name of the project.

 

new-app

Once the files has been created, the CLI will start installing npm packages automatically. Wait until the packages getting installed, it will take a bit of time to complete the process.

The folder and file structure will looks as follows

code_ng-app4.png

5. Serve the application

Once the dependencies are installed, traverse to the created projected and serve the application using the following commands.

cd cool-app

ng serve –open

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

Using the –open (or just -o) option will automatically open your browser on http://localhost:4200/.

The default page will gets open with the greeting message.

 

CoolApp.png

 

Stay connected and Keep supporting. 🙂

Happy Coding!

 

In the next post, we can discuss about the architecture of angular application.

Angular 5 Tutorial 01 – Introduction

angular5.png

What is Angular?

A framework for building client application in HTML, CSS and JavaScript/TypeScript.

Why Angular?

Why we need Angular? We can do the same in JavaScript or jQuery. Yes, we complete our most of the task using jQuery.

When the application becomes complex in terms of requirements, jQuery becomes hard to maintain the code. Even though we have lots of design patterns for JavaScript, its hard for beginner to start with design patterns.

When we create large complex application using jQuery it becomes hard to test. To make life easier a lots of frameworks arrived in programming world to help the programmers.

Benefits of Angular

  • Its a component based framework which gives a clean structure for our application
  • It has Declarative templates which Includes lots of re-usable code
  • More testable code – supports to build lots of automated test
  • Dependency Injection – loads dependent objects (called the dependencies) when it creates an instance of an object.
  • We can write our code in either JavaScript or TypeScript – Angular Framework itself developed using TypeScript

Architecture

We have two main sections in Architecture

  • Front-end
  • Back-end

Front-end

In the front-end, we have built our UI using HTML, CSS, JavaScript or TypeScript. It contains HTML templates, Graphical representation, application presentation logic.

Back-end

Back-end Architecture contains the Business Logic, Data from Database or APIs. In angular, we are not going to store any data in client side because once the session or cookies cleared everything will deleted. We will use local storage or cookies in client side to store temporary data. The business logic or data are stored in database or APIs.

angular

The key parts available in angular architecture are

  • Modules
  • Components
  • Templates
  • Directives
  • Data Binding
  • Services
  • Dependency Injection

We can discuss on each topic in upcoming posts.

History of Angular

Before moving to deeper learning part, lets take a look on history of angular.

  • Angular JS – Version 1 – 2010
  • Angular – Version 2 – 2016
  • Angular – Version 4 – 2016 December
  • Angular – Version 5 – 2017 November

The first version on Angular is released in 2010 with the name of “Angular JS”. It became popular framework among developers.

Then in 2016, a complete rewrite has happened in the framework and it has been release with the name “Angular”. The word JS is removed from the framework name. This is a major release with complete rewrite of framework with major architecture and behavioral changes.

In December 2016, Angular version 4 is released. The version number 3 is skipped to match the version number mismatch between other components of angular.

The current version of Angular 5 is released in Nov 2017. The new version of Angular is going to released on every six months. That’s all about the major version changes happened in angular.

In next post, we can see how to create our hello world application in Angular.

Happy Coding!