Showing posts with label Angular. Show all posts

Getting Started with Angular

We have setup the development setup of angular in angular-installation blog. Now in this blog, lets start a new project and lets see how we can create a new project in Angular.

How we can create a new project in Angular?

To create a new project, open Angular CLI and type below mentioned command and press enter. This will take some time to create an ready to build application for you.

ng new angular-project

Now this will create a full ready to build angular application. In below image you can see the full folder structure of angular application.

We'll be mainly working in the src folder.

Run or Serve application

You can build and run the application by using below CLI command. The default port for angular application is 4200.

Go to angular-project folder and then run the application.

cd angular-project

ng serve

build and run the application by using below CLI command

We can open this application on our browser at http://localhost:4200/

So this application is working fine. If you are facing some problem while running your application , let me know in comments section.

Angular Installation

Akram Angular ,

Lets talk about the installation process of Angular, which tools and IDE is required for angular,

How to install Angular?

Which IDE is used for angular?

Before getting started with Angular you have to download IDE like Visual Studio Code, Eclipse, Atom etc.

We will be using Visual Studio Code in our tutorial.

Visual Studio Code is open source and it is light weight, easy to use. It has vast range of built-in code formatting, editing and refactoring features.

You can download Visual Studio Code from: https://code.visualstudio.com

Install Node.js

You should install node.js to run the angular application, node.js provides npm dependencies and required libraries.

You can download and install node.js from: https://nodejs.org/en/

After node.js installation you will see the below command prompt.

You should install node.js to run the angular application, node.js provides npm dependencies and required libraries

Angular CLI

Angular app is mainly developed and run by the CLI, that helps in creating new project, adding files and other task.

To install Angular globally run below command or go to Angular official site https://cli.angular.io/

1. Run npm install -g @angular/cli on Node.js command prompt. This command will globally install angular on your system.

CodeByAkram - Run npm install -g @angular/cli on Node.js command prompt

2. Now you need to create a new angular app/project by using this command ng new my-dream-app

CodeByAkram - command ng new my-dream-app

3. Go to project directory using cd my-dream-app command and hit ng serve command to run the angular application.

CodeByAkram - hit cd my-dream-app command and hit ng serve command to run the angular application.

4. Now open http://localhost:4200/ in browser and will see angular app running in browser.

CodeByAkram - will see angular app running in browser.

Angular is a latest front-end framework of JavaScript, a development platform for building mobile and desktop web applications that makes you able to create reactive SPA (Single Page Applications). Angular framework is developed and main by Google. Angular framework is totally based on components forming a tree based on parent child component.

Angular comes with many features such as Component, Pipes, Directives, Forms, Dependency Injections etc.

SPA (Single Page Application)

Single page application or SPA is a website or web application which provides very extensive and fast experience to users. When user click on any menu, button or link it dynamically re-write the url instead of loading the entire page.

Angular

Akram Angular ,

Angular Tutorial: Getting Started With Angular

Welcome to Angular tutorials, in this tutorial i will cover all the topics of angular and after this tutorial you will be able to write the code of angular.

So lets start the tutorial step by step.

What is Angular

Installation

Getting Started with Angular

Angular Features

Differences between AngularJS and Angular

Angular Directives

Angular Pipes

Angular Databinding

Angular CLI

Forms

Form Validation

HTTP

Router

Module

Styling

Errors

Configuration

Getting Started with Angular