Angular- Getting started

Hi all, This is my first post on Angular . I wish to do a post series of angular. I hope it will be a funny journey for both you and me.😊

Before dive in to deep, let us see what is Angular ?Angular is a JavaScript framework which allows us to create reactive Single Page Applications (SPAs). In here we get another abstraction that is ‘Single Page Applications’. Well,Now we try to understand what is a single-page application (SPA). A single-page application (SPA) is a web application or website that interacts with the web browser by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages.

Now we simply dive into the most interesting part of this article. I hope you all have familiar with Html, CSS and JavaScript.Because these skills are the prerequisites in order to use Angular framework.let’s see how to set up your environment for Angular development using Angular CLI tool.

Angular CLI official interface

By following above steps on the Angular CLI, you can create your first angular project.These steps are same for both windows and mac.In order to execute those commands you will need to install an additional tool. That is Node.js. Once you finished installation, we can run above commands on your terminal if you are on mac or command prompt if you are on windows.

Step:1 install Angular CLI

open your terminal/command prompt and enter following code and hit enter.

npm install -g@angular/cli

if you are on mac or Linux most probably you should add ‘sudo’ in front of this code snippet in order to get right permissions.

Step:2 create a work space and initial application

ng new demo-app

In here you must give your new project name after the ng new CLI command.The project name doesn’t contain word like ‘test’ because it is a reserved word.

create work space and initial application

The ng new command prompts you for information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key.The Angular CLI installs the necessary Angular npm packages and other dependencies.

step:3 run the application

Get Nipuni Kodithuwakku’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

In order to run the application go to work space folder.

cd demo-app

Use above code to navigate to right folder. After that execute,

ng serve

The ng serve command launches the server.

You can use ng serve --open instead of using ng serve.The --open(or just -o) option automatically opens your browser to http://localhost:4200/.

you will see:

This is how you see your first angular app

Now we are going to edit our first app. In order to do that you will need an editor or IDE. You can use WebStorm .It’s a great IDE for angular development.But it is not free. The great free alternative would be Visual Studio Code. You can simply download and install both for Mac and Windows.In my case I use Visual Studio Code.First you should open your project folder.

This is how you can see when you open your project using vscode

open src folder in your project structure. you will see an app folder inside of the src folder. Open that app folder and go to app.component.html file. That file contains what we see on the browser. Scroll down through app.component.html until you meet <span>{{ title }} app is running!</span> . Then edit that line of code to <span>This is my {{ title }} </span> and save the file. Now you can see the browser, it automatically updates the app. Make sure you keep the localhost:4200 process running.

Updated app interface

That’s the end of this article. Hope you get something by reading this article.let’s see you soon on my second article -Angular-Basics.

Stay safe🤗 , Thank You!