What is Angular?

Angular is a leading framework for building JavaScript applications and often, it is used for building single page applications.

Angular 1.0 to Angular 2.0

Angular

What is a single page app?

In a standard web application, when we click on a link, the entire page is reloaded. In single page app, instead of reloading the entire page, we need to place a view in the content area. Here, we are able to keep track of the history when the user navigates between forward and backward.

Mainly, Angular is used to restore the application into a right state. Developing an application in Angular is a fast and fluid experience.

The best example for single page applications is Gmail.

Angular

If you want to develop a single page application that allows the user to reload a single view without loading an entire view, take a look at the article below.

Angular JS helps us to develop an application in a modular, maintainable, and testable way.

With the huge improvement in technology, there are a lot of frameworks available for developing an application. Then the question is, “Why we are going with AngularJS?”

Angular is one of the leading frameworks that has achieved huge improvements over the years. It has a huge community next to .NET because it is developed by Google.

Google Trends report

Angular

India is a country which is at the top on the list of Angular JS Active developers.

In this article, we are going to see a step by step process of working with Angular JS 2.0. If you are not familiar with Angular 1, it's okay, because Angular 2 is entirely a new framework.

Here, we are using TypeScript instead of JavaScript.

TypeScript

Typescript is a superset of JavaScript. Any valid JavaScript code is said to be TypeScript, which means, you don’t need to learn an additional programming language. TypeScript has some new features that are supported by modern browsers as well as by JavaScript, such as - modules, classes, interfaces, access modifiers like public, private etc. We will be able to get compile time errors by using IntelliSense.

The following are some of the key players that are available to develop an Angular application.

Angular

Component

The component encapsulates the data, template, and behavior of view. It is also called View.

Directive

A class that allows us to extend or control DOM (Document Object Model). It is used by adding the custom tools and custom tags.

Getting the Tools

The following are the tools that are required to execute a simple Angular application. Download node.js from official node.js website.

Angular

Visual Studio Code is a light-weight code editor that can be downloaded from the Microsoft Store.

Angular

Google Chrome browser can be downloaded from Chrome Store.

First Angular app

The proper way to create an Angular app is through Command Line Interface. But this tool is not available yet. So, download the package from the Angular official site or from Angular GitHub.

Download Quickstart Seed project file, unzip it, and move to your project folder. Then, perform the following operations through command line called CMD.

cd quickstart
npm install
npm start

If you are using command line, use the following commands
npm install -g angular-cli
ng new app_name
ng serve

Demonstration

Finally, I got a solution. As I mentioned earlier, the proper way for deploying an application is through Command Line Interface. So, follow the steps given below to configure and deploy and application.

npm install -g angular-cli

The above command is used to install Angular Command Line Interface globally on developer machine.

It takes sometimes to install Angular-CLI package. It takes about 2 to 3 minutes.

ng new first-app

This command is used to create a new application in the directory which you have specified.

ng serve

This command is used to deploy an application. It is served to the web browser plugin to display the output.



Congrats! Finally, we got an output.



Structure of Quick Seed

The quick seed contains the following files that are required to run the project. All the files are TypeScript files with ".ts" extension.
Angular
app.component.ts
  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'app-root',
  4. templateUrl: './app.component.html',
  5. styleUrls: ['./app.component.css']
  6. })
  7. export class AppComponent {
  8. title = 'Welcome to C-Sharpcorner';
  9. }
app.module.ts
  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { FormsModule } from '@angular/forms';
  4. import { HttpModule } from '@angular/http';
  5. import { AppComponent } from './app.component';
  6. @NgModule({
  7. declarations: [
  8. AppComponent
  9. ],
  10. imports: [
  11. BrowserModule,
  12. FormsModule,
  13. HttpModule
  14. ],
  15. providers: [],
  16. bootstrap: [AppComponent]
  17. })
  18. export class AppModule { }
main.ts
  1. import './polyfills.ts';
  2. import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  3. import { enableProdMode } from '@angular/core';
  4. import { environment } from './environments/environment';
  5. import { AppModule } from './app/';
  6. if (environment.production) {
  7. enableProdMode();
  8. }
  9. platformBrowserDynamic().bootstrapModule(AppModule);
Guide to structure

File Purpose
app.component.ts Defines AppComponent as the quickstart. It is the root component and trees are nested.
app.module.ts It defines AppModule the root component and tells the assembly of the angular project. It is declared only as AppComponent
main.ts Compiles the application using JIT Compiler and bootstraps and display output in the browser.

Changes in app.component.ts

Here, I made a change in app.component.ts code. Since I need an output as "Welcome to C-Sharpcorner". I made changes in AppComponent class with the name as "Welcome to C-Sharpcorner".



Output


Strength and Weaknesses of Angular 2.0

Angular

Best Example

Similar to coursera.com, in cricbuzz, only the score board area is automatically updated to get the live score. In Udmey, the content page is updated if user clicks a link.

I hope, you enjoyed reading this article. Thanks for reading.

Happy Coding!!!