zocada

Getting started with Angular 5

Angular (Angular 5) is a TypeScript/JavaScript based front end framework developed and maintained by Google.

angular logo

It is used to build client side applications like SPA (Single Page Application) and PWA (Progressive Web App). The code is written in TypeScript and it gets compiled to JavaScript.Angular applications are well structured and modular so it’s easy to understand and maintain. Angular provides many functionalities that makes developing complex stuff easier. Using Angular Material you can give modern material design feel to your application.

Angular is not only limited to web apps, you can use frameworks like Ionic and Electron to build cross-platform mobile and desktop apps.

Note: Angular and AngularJS are not the same. AngularJS is the first version then it got a major rewrite and now it’s called “Angular” (without version number). Current stable version is 5.2.1. Angular 5 is not backward compatible with AngularJS.

Prerequisite :

You should have NodeJs and npm installed if not then you can check out these tutorials for installing NodeJs(Windows, macOS, Linux). You need to know basic HTML, CSS, TypeScript(superset of JavaScript with static typing and class).

Now lets get started with making our first application with Angular CLI (Command Line Interface).

The CLI reduces your effort of writing boilerplate code and handles the project structure.

Step 1:

  • Open up your terminal and run this command to download the latest version of Angular CLI.
npm install -g @angular/cli@latest

Step 2:

  • Once it’s installed create a new Angular application called myProject by running
ng new myProject

Example

Step 3:

  • Now enter myProject directory and run the application.
cd myProject
ng serve

Example

This starts the development server on your system listening on port 4200 by default.

Open your favourite browser and go to “localhost:4200”.

Example

And there you have it, your very first Angular app created with Angular-CLI.

Other CLI options:

  • ng serve -o  Opens the application automatically in your default browser after starting the server.
  • ng serve --host 0.0.0.0 --port 8080 Create your server by specifying custom host and port.
  • ng -v Check the version of your installed CLI.

A quick view on the project files

Now lets take a look at the files generated by the CLI.

Angular project structure

  • e2e, protractor, karma: These are the testing configurations.
  • node_modules: All the external modules/packages installed by npm are present in this directory.
  • .angular-cli.json: It contains the configuration for the angular cli.
  • package.json: This is the important file that contains the detail of all the packages, dependencies of  your application. The devDependencies are used only during development build, when you build a production application these dependencies are not required.
  • src/app/: This is the default directory that contains all our components, services etc. which are generated by the angular cli. For our first application it creates app component and app module. During the development you will be writing inside this directory.

Chaman

Javascript developer, Web enthusiast.