Angular

Angular is a web development framework. Latest Angular frameworks are Typescripts based. Angular is rewritten from AngularJS.

Native support of Typescript from Microsoft make coding faster and maintainable. Native support from testing tools like Karma and Protractor making this as number 1 choice for dynamic web app automation

• Angular Overview
• Angular Setup – build your first project !
• TypeScript Overview (coming soon)
• Data binding
  • Event binding
  • Two way data binding
  • Interpolation
  • Property binding
• First TypeScript Program
• Variable Declaration
• Type Assetions
• Arrow Functions
• Interfaces
• Classes
• Objects
• Properties
• Modules
• Constructors
• Access Modifiers

Angular Overview

Angular development framework is introduced by Google and currently millions of developers are using it. Releases started with AngularJs and then Angular2 , Angular4 and going on.AngularJS to Angular2 is major change.
Native support of Typescript from Microsoft make coding faster and maintainable. Native support from testing tools like Karma and Protractor making this as number 1 choice for dynamic web app automation.

What is NgModules in Angular?

NgModules are Angular class from Angular/core and helps to build modules in Angular application development.

For e.g. you wanted to develop a complex application where many modules are needed for easy implementation. Each module acts like mini application like cart module, creditCard module, etc.

so NgModules combines browser modules, other modules that you develop, decoration, bootstrap etc.

NgModules has declration , import, providers, bootstrap arrays.

Angular Setup

1. install latest nodejs from nodejs.org
2. Go to git bash/powershell ISE/CMD
3. type following commands,
4. install Angular : npm install -g @angular/cli
5. ng new my-newweb-app
6. ng g c myFirstModule (optional)
7. go to project folder ” my-newweb-app ” via commandline itself
8. type ng serve -o

Data Binding

Data binding makes the angular applications development very easy.

Data binding helps to do the data synchronization between the template(view/html) and class(typescript code)

There are 4 types of data binding in Angular and are following,

• Event binding
• Two way data binding
• Interpolation
• Property binding

What is Interpolation?

For interpolation, double curly braces are used in the template as below,

// app.html is the example for interpolation

<p>{{ name }}</p>  

and it stores the variables, then angular checks for the variable and updates the value assigned to the text.

The Typescript app.ts as below to display the name value to app.html.

// app.ts

@Component({
  templateUrl: 'app.html',
  selector: 'app-test',
})
export class AppComponent {
  name = 'Sharath C';
}

What is Property binding?

Property binding helps to set the property of a view element and it uses [] syntax as below

// app.html is the simple for the property binding.

<button [disabled]="buttonIsDisabled"></button>

TypeScript has to be coded as below to pass the property binding to view template. refer the app.ts as example for Typescript passing the property value

// app.ts
@Component({
  templateUrl: 'app.html',
  selector: 'app-test',
})
export class Component {
  buttonIsDisabled = true;
}