Introduction of Angular

Angular 2 is

  • An open source
  • JavaScript client side framework for creating powerful web applications
  • Created and maintained by Google

Language

The Angular team uses TypeScript to build Angular.

Version

We know Angular Version 1 as AngularJs.

We know Angular Version 2 & 4 as  Angular.

Prerequisites

  • HTML
  • Javascript
  • Typescript
  • ES 2015
  • CSS
  • Ajax

Architecture Elements

  • Module
  • Component
    • Template
    • Class or Code
    • Metadata
    • Data Binding
  • Directive
  • Filter
  • Service

Angular Module

Modules help to organize Angular Application. A Angular Application can have many modules. But Angular Application has atleast a single Module – We call it, Root Module or App Module.

Module can be importing as library in other module.

Module has dedicated single purpose in Angular Application.

With Root Module, Angular Application can has other features and shared modules. Module can have one or more than one componet.

Angular Module = Component + Component + Component

Example of Angular Module

If we think about a project about school then we can divide project in following modules

  • Student
  • Teacher
  • Class
  • Subject

In Angular, We create above modules and shared modules.

I will discuss modules in coming post.

Component

Component is a building block in Angular Application. It has an interface and data. It is like User Control or ActiveX control. It contains a class, a decorative function and a template.

Component = Template + Class + Metadata

Example of Component

import { Component } from '@angular/core'
@Component ( {
selector: 'proj-app',
template: '
{{pageTitle}}
'
}) export class AppComponent { pageTitle: string = 'Project: Home Page by Vikas Jindal'; }

Template

Template is an interface or view in Angular. It contains HTML.

Example of Template

template: '

{{pageTitle}}

My First Angular Component

We can write HTML inline but when HTML code is large then we use seperate file and then we use “templateUrl” to link external file with component.

What is {{}}?

Here, a concept of an interpolation comes in picture and we can bind values. ‘{{}}’ are interpolation braces and uses in subsitution of properties, evalution of expressions and calling functions.

Class or Code

Class has data elements, properties and methods written in TypeScript. It supports View or template.

Metadata

Metadata is act as glue between HTML Template and Class or code. Without Metadata class is simple class. It defines with the help of decorator function.

By Vikas Jindal

Next: Angular 2 – Hello World

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s