Learn how to Setup Angular Application

Introduction

In this article, we will understand how to setup an angular application and understand how to select a language and editor to use, Next we’ll dive into components. We’ll create the app component using a simple template and minimal component code and metadata. We’ll see how to create the user interface for our application using templates, interpolation, and directives. after that, We’ll define interfaces, encapsulate styles, and leverage life cycle to build better components. and We’ll see how to build a component designed to be nested within other components and how to communicate between the nested component and its container. and also We’ll learn how to create services for this purpose and use dependency injection to inject those services into the components that need them. Most web applications need to communicate with a backend server to get or post data and to execute back-end business logic. In this module, we’ll leverage HTTP to retrieve the data for our application.

1] Selecting a Language

ES5	ES2015	Typescript	Dart
Runs in the browser	lots of new features, likes classes, let, arrow etc.	superset of javascript	No javascript
No compile required		Strong type and great IDE

When building Angular applications, we have many language choices available to us. The JavaScript language specification standard is called ECMAScript, or ES. Up until recently, the ES versions were define by a sequential number. ES3 is support by older browsers. the ES5 version currently supported by most modern browsers. The ES6 specification was rename ES2015. Most browsers don’t yet support ES2015, so ES2015 code must first be transpile to ES5. What does that mean? Code developed with ES2015 must be compile by a tool that converts the ES2015 syntax to comparable ES5 syntax before the browser executes it. That way, we as developers get the benefits of the new ES2015 productivity features and the browsers still get the code they understand.

The Angular is a JavaScript library. so, we could use any of the many compile to JavaScript languages to build our Angular application. So, the most common language choices for Angular include the

1] ES5
ES5 version of JavaScript. ES5 code runs in the browser without transpilation. so, no compile step is required.

2] ES2015
If we want to take advantage of some of the new ES2015 features to improve our productivity. such as classes, the let statement, and arrow syntax, we can write our Angular code using ES2015. We then transpile our code to ES5 before running it.

3] TypeScript
Another language option is TypeScript. TypeScript is a superset of JavaScript and must be transpile. The TypeScript is its strong typing, meaning that everything has a data type. So, the strong typing, TypeScript has great tooling including inline documentation, syntax checking, code navigation, and advanced refactorings. The TypeScript helps us better reason about our code. The Angular get advantage of these benefits and uses TypeScript to build Angular.

4] Dart
Dart is a non-JavaScript based language for building Angular applications.

Why use TypeScript?

The TypeScript is an open source language that is a superset of JavaScript. and compiles to plain JavaScript through transpilation. TypeScript is strongly type, so every variable, every function, and every function parameter can have a data type. The TypeScript determine appropriate types when using JavaScript libraries. that are not strongly typed. By using TypeScript type definition files. so, The files contain the definition of each type in a library. These files are named with a library name,. d. ts. TypeScript implements the ES2015 class-based object orientation, plus more. It implements classes, interfaces, and inheritance.

Choose Editor

There are many editors that fully support TypeScript, either out of the box or with a plugin, including all of these.

1] Visual Studio
2] Visual Studio Code
3] WebStrom
4] Atom
5] EClipse

Visual Studio Code is open-source and it runs on Linux, Windows, and OS X platforms. It has great features that support TypeScript. such as auto-completion, IntelliSense, syntax checking, and refactorings.

Setting up Our Environment

Setting up our development environment requires two basic steps.

1] Install NPM, or Node package manager.
2] set up the Angular application.

Node package manager

It is a command line utility that interacts with a repository of open-source projects. Npm has become the package manager for JavaScript. The NPM can install libraries, packages, and applications, along with their dependencies. We’ll need NPM to install the libraries for Angular and to execute scripts to transpile our code and launch our Angular application.

Installing an Angular Application

Let’s go to VS code and open the directory structure. So, all our source files are under a folder called src. Under that folder is an app folder that contains the source files specific for our application.

We have subfolders under the app folder for each major feature in the application. The other files here are configuration and setup files, often called boilerplate files. We’ll learn more about them in the Building, Testing, and Deploying with the CLI module.

So, Before we can execute this code, we need to install all the libraries required to develop and run our application. Where are those defined? In the package.json file here. This file contains a list of all the application’s dependencies. The @angular entries are Angular system libraries.

Now, let’s install all these libraries. First, open a command prompt. VS Code has an integrated terminal we can use terminal. Next, navigate to the folder containing the package.json file. VS Code did that for us. Before we continue, let’s check the version of NPM by using the following command.

npm -v

here, Angular requires the version of NPM. If required, update your NPM before proceeding. Then use the following command.

npm install

This installs all the dependencies defined in the package.json file, along with any of their dependencies. Note that you may see some warnings and messages during this installation process.

Running an Angular Application

You can see here, scripts area in our package.json file.

Here is the start script. When we type NPM start, it will execute the command defined here. The ng executes the Angular CLI. The string after the ng is the CLI command. The serve command builds the application and starts a web server. The -o is a command option that opens the URL in our default browser. The CLI has many more commands and options.

This executes the start script, builds the application, starts a web server, and opens the URL in the default browser. which in my case is Chrome.

When using VS Code, we can set it to automatically save our changes. Here under File, Preferences, Settings, Workspace Settings, it set to automatically save after a short delay.

What is Modules?

With JavaScript, there’s always the problem of namespaces. If we are not careful, we can easily end up with variables or functions in the global namespace. Also, JavaScript didn’t provide features to help with code organization. Modules help resolve these issues. AngularJS has modules to help us organize our code and resolve some namespacing issues. TypeScript also has modules that help keep things out of the global namespace.

ES2015 set a standard for defining a module. In ES2015, a module is a file, and a file is a module. so when coding in ES2015, we don’t need to define or name modules, create a file, write some code, export or import something, and bang, the file becomes a module.

Let’s look first at how Angular makes use of ES2015 modules. How do ES2015 modules work

we create a code file called employee.ts and export a class named employee from that file. This file then becomes a module. Because the class is exported, we can use that class and any other module by importing it.

example

// employee.ts

export class Employee
{
}

It transpile into javascript

function Employee()
{
}

So, here we have a file called employee-list.ts and we import our employee class. This file also becomes a module because we imported something.

example

// employee-list.ts

import { Employee } from
'./employee'

Angular modules organize an application into cohesive blocks of functionality. Every Angular application, has at least one Angular module, by convention called app module. As an application gets more features, we can group those features into their own feature modules. We can define shared or common modules for the code used by multiple Angular modules. This keeps the code organized and provides a cohesive unit we can load on start or lazy load as it is needed. In each Angular module, we declare the set of components and other code files associated with the module. and the dependencies needed by those components.