Angular Basics

Angular is a JavaScript Framework which allows us to create reactive Single-Page-Applications ( SPA ). Angular applications are built from components i.e components are key building blocks of angular application. Components mainly consists of three parts - Class ( Logic ), Template ( Display ) and Metadata.

Angular 1 = Angular JS

Angular 2 = Angular

Traditional web app architecture : Here Client ( Web browser ) request a page from server and server responds with a HTML document.

Client       -- Get Request --> Server
Client       <-- Response(HTML Document) -- Server
(page reload)

If Client submits a form or post a request to server the server responds with the html document which client shows to the user by refreshing the page with the new html document.

Client -- Post Request --> Server
Client <-- Response(html document) -- Server

Single page application architecture :

Client          -- Get Request --> Server
Client          <-- Response(html document) -- Server
(Dynamic update)

When client post a request in single page application by ajax call to the server, server process the request and responds with the JSON encoded object which client decodes and updates the page dynamically.

Client -- POST request via ajax --> Server
Client <-- Response(JSON) -- Server

Structuring an SPA :

Front-End (Angular 2) {{StaticHTML/CSS/JavaScript}}

Back-End (Java, JavaScript, .Net, etc.)

Angular Features & Components :

1. Data binding - Controller, Scope
2. Directives- HTML DOM manipulation
3. Services - Reusable Components, Dependency Injection
4. HTML forms with validation
5. HTTP requests
6. Navigation
7. Extensibility
8. Component-based Framework
9. Declarative templates
10. Single-pass change detection
11. Router
12. Integrated RxJS library

Why Angular 2?

• Complete re-write
• Built for speed
• Memory efficient
• Smaller library

Whats different and new in Angular 2?

• Data binding to properties and events with new syntax
• Component based - Angular 1.x controller plus template directive
• Unidirectional data flow with Rx(Reactive extension)
• Written in Typescript, can be used with ES5, ES6 and Typescript
• New tooling: Angular CLI, Batarangle
• Can integrate with Angular 1, ngUpgrade
• Supports IE9+ and other modern browsers

Various forms of Binding in Angular :

[var]="expression"                 (in)

This is passed to our components via @Input() attribute.

(event)="doSomething()"            (event,out)

This is how we listen to events from other elements.

[(ngModel)]="expression"           (two-way)

Two-way binding -- value sent to variable and updated as variable changes.

abc="{{ myData }}"

is equivalent to

[abc]="myData"

To Install angular CLI :

npm install -g @angular/cli

To uninstall Angular CLI :

npm uninstall @angular/cli -g

To check angular version :

ng -v

or

ng --version

Typescript : It is a strongly typed, object-oriented language that uses a compiler to generate JavaScript. It therefore allows us to use well known object-oriented techniques and design patterns to build JavaScript applications. Typescript is both a language and a set of tools to generate JavaScript. It was designed by Anders Hejlsberg at Microsoft (the designer of C#), and is an open source project to help developers write enterprise-scale JavaScript.

The Typescript compiler has a parameter that can switch between different versions of the ECMAScript standard. Typescript currently supports ECMAScript 3, ECMAScript 5, ECMAScript 6, and even ECMAScript 7 (also known as ECMAScript 2016).

ECMAScript 5 (var) -- Supported by all browser

ECMAScript 6 (let) -- Supported partially by modern browser

In Typescript we get error before compiling the code.

To install Typescript :

npm install -g typescript

To check Typescript version :

tsc -v

• Typescript is a strict super-set of JavaScript developed and maintained by Microsoft.
• Any existing JavaScript program is a valid Typescript program.
• It comes with types and compile-time type checking generics, namespaces and so on.
• Typescript is a compiled language.
• Typescript supports ES3, ES5, ES2015, this allows us to achieve backwards compatibility without a 3rd party tool like Babel.js
• Typescript is a cross-platform.

Typescript Features:

Strong typing, Classes, Interfaces, Generics, Modules

Typescript Benefits :

Compilation Process: Typescript Source Code to----> Javascript Code

Typescript Uses :

Web applications, Node.js applications, Mobile applications using PhoneGap

Typescript Configuration :

tsconfig.json contains compilation options.

Printing user first name and last name in the Typescript playground : Open the below link and click on the Run to output.

Below is the code :

And when we Run, we see below output :

Arrow Function in Typescript :

In ES5, we declare function as :

let printMessage = function(message) {
    console.log(message);
}

In ES6/Typescript : If one line

let printMessage = message => console.log(message);

Else

let printMessage = message => {
    let firstName:string;
    let lastName:string;
    console.log(message);
}

If we have multiple parameter :

let printMessage = (message1, message2) => {
    let firstName:string;
    let lastName:string;
    console.log(message1);
    console.log(message2);
}

If we have no parameters :

let printMessage = () => {
    let firstName:string;
    let lastName:string;
}

Interfaces in Typescript :

Waiting....

To create a angular application :

ng new my-angular-application

Syntax to generate a new component : ng generate component name_of_component

ng g c name_of_component

To create a new item: Here we can generate my-item in item-folder.

ng generate component item-folder/my-item

Use Angular CLI to generate a skeleton class :

ng generate class model/my-class

Create a Angular 6 Application using Angular CLI :

1. To create new angular project : ng new hello-world
2. Open cmd, go to hello-world folder : code .
3. To start project : ng serve
4. In browser : http://localhost:4200

e2e folder : End to end test files

node_modules : 3rd party libraries

src : source code of our application

assets : static resource

environments : Different configuration

index.html :

continued...

Related Articles:

Codeship

Awesome Learning ....