start

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

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.

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

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 get open with the greeting message.

Stay connected and Keep supporting. 🙂

Happy Coding!

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

What is TypeScript?

TypeScript is a syntactic sugar for JavaScript.
TypeScript syntax is a superset of ES5 & ES6 syntax.
Every valid JavaScript code is also a TypeScript code.

The TypeScript compiler emits JavaScript. The TypeScript compiler performs only file-local transformations on TypeScript programs and does not re-order variables declared in TypeScript. This leads to JavaScript output that closely matches the TypeScript input.

TypeScript does not transform variable names, making tractable the direct debugging of emitted JavaScript. TypeScript optionally provides source maps, enabling source-level debugging. TypeScript tools typically emit JavaScript upon file save, preserving the test, edit, refresh cycle commonly used in JavaScript development.

It can improve your productivity by enabling rich tooling experience. TypeScript supports tools for large-scale JavaScript applications for any browser, for any host, on any OS.

Why TypeScript?

JavaScript is standardized through the ECMAScript standards. TypeScript supports most of the latest ECMAScript features (the various posts under ECMAScript can be found here). Some of the interesting features of latest ECMAScript like modules, lambda functions, classes, the spread operator, destructuring, template literals are supported in TypeScript.

TypeScript makes JavaScript more and reliable by having following features

Optional static typing
Supports the latest JavaScript features
Supports classes, interfaces, generics
More productive than JavaScript

Optional static typing

JavaScript is dynamic type, it does not know type of variable until we initialize it. Typescript provides types support to code. Using static typing we can define the data type of the variable.

var x : string = "Make a smile";

Here we have declared a variable of type string. The popular data types available in TypeScript are Boolean, Number, String, Array, Tuple, Enum, Any, and etc.

We have mentioned TypeScript is optional static typing.

What does it mean?

It means, we don’t have to mention the exact type of variable always. If we don’t wish to mention the type of variable, we can user any type to declare the variables. Once we are initializing the any type variable, it will decide the type of variable based on the values.

example:

var y: any = “Clear Screen”;

Supports the latest JavaScript features

Most features of ECMAScript has been supported by TypeScript.

The latest features of ECMAScript like

Arrow functions
Classes, Inheritances
Destructuring

are supported in TypeScript as well. We can discuss about those topics in upcoming blog posts.

More productive than JavaScript

If the developer is already familiar with any of the Object Oriented Programming, it will be easy for them to adopt to TypeScript. The syntax are similar to Object Oriented language like C#.

As C# developer, in my personal experience I felt learning and understanding the syntax of TypeScript is easy.

IDEs can help you throwing error right away when you are coding itself. So you can focus more on coding and less time at debugging. Enhanced IDEs provides greater support to this language which provides significant productivity compared working with JavaScript.

This is just an introductory post, we can discuss more topics under TypeScript in upcoming posts. Please share your thoughts in comments section and follow this site for more updates.

Happy Coding!

Efficient User

What I know? – Since 2014