Scribd
Upload
87 views

Angular 2 Building Blocks

Fresco Angular 2 Building Blocks slides

Uploaded by

Guillermo Studier
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
87 views

Angular 2 Building Blocks

Fresco Angular 2 Building Blocks slides

Uploaded by

Guillermo Studier
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

Angular 2 Building Blocks

What is Angular 2?
It is a JavaScript framework for creating web and mobile applications.
It supportsTypeScript, a super script of Javascript that helps in safe coding.
It has several enhancements on top of Angular 1.x, which makes it simple to use and
get the desired output. But knowledge in Angular 1.x is not necessary to learn
Angular 2, since the whole framework is re-written.

Why Angular 2?
Easy: Unlike previous versions, Angular 2 focuses only on building JavaScript
classes; hence it is easier to learn.
Freedom: It provides more choices of languages for consumption i.e. ES5, ES6,
Typescript, and Dart. TypeScript is recommended here.
Flexible: It is a Cross-platform framework.
Faster: Because of server side rendering.
Simpler: Component based approach with no controllers and $scope.
Performance: Uses Hierarchical Dependency Injection system, which is a performance
booster.

Angular 2 Environment Setup


To setup an Angular 2 environment, node.js is mandatory. Once node.js and npm are
available, you can run the following to complete the setup in cmd.

Install Angular CLI(command line interface) Command: npm i -g @angular/cli (-g


installs angular globally for all users)
Install TypeScript Command: npm install -g typescript

What is Module?
What is Module?
A Module is a way of organizing related Components, Services, Directives, and Pipes
with a specific functionality.

It is a block of code meant to do certain tasks.

There can be several Modules within an app, but it should consist of at least one
root module. Root Module, by convention, must be named: AppModule.

It can be exported and imported in other modules.

@NgModule is used to declare a Class as Module.

Module as library - Angular Module can act as a library of modules. @angular/core


is a most common library being used in building angular application. It has most of
the modules that are required for your app.

Module - Example
This is a sample code for module.

import { NgModule } from '@angular/core';


import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
// AppModule Class is now defined as Module : @NgModule
Trick to identify Root Module is that it imports "BrowserModule". Other modules of
that same application imports "CommonModule".
imports:[...] - define array of modules required to build application here.
declarations:[...] - define components, directives and pipes for this module here.
bootstrap:[...] - define root component of this module here.

What is Component?
A component is the basic block of angular 2 app.
It handles the view part of the app and has the core logic of the page.
It can render the view by itself based on the dependency Injection.
There can be only one component per DOM element (i.e. only one selector element).
Element's behavior can be manipulated by the properties associated with
corresponding component.
It can be identified using the decorator @Component.
Components can be created, updated or destroyed based on the user actions on the
page.

Components - Example
This example will render Hello, World! in the browser. Angular will search for <my-
app> element in HTML file and replace it with the template content.

File: app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<p>Hello, World!</p>',
})
export class AppComponent{}

File: index.html
............
<body>
<my-app> Loading... </my-app>
</body>
............
You can check out the complete code in Plunker here

What is Template?
Template is a simple HTML code that creates view for a component, which you can
dynamically manipulate.

There are two ways to define templates:

template
templateUrl

How to use Template?


When template is used, it defines code in the same file

import {Component} from 'angular2/core';


@Component({
selector: 'greet',
template: `
//this defines template for 'greet' component
<h1>Hello There!!!</h1>
<h2>Have a nice day.</h2>
` // back tick symbol (~ key on your keyboard)
//back tick is explained in detail in TypeScript
})
export class GreetApp {}
When templateUrl is used, the code is defined in different files and URL of the
corresponding files are referred.

import {Component} from 'angular2/core';


@Component({
selector: 'greet',
templateUrl: 'app.component.html'
//this defines "URL to the external file"
that defines template for 'greet' component
})
export class GreetApp {}

What is Metadata?
In Angular 2, Metadata is vital in getting the code processed and shown on the
screen. Metadata means data of data, which gives more info about data.

ex: var age : number = 20;


// 20 is data
// "number" is metadata, as it tells information of "data", its type, its size
etc.

Metadata - Example
Let us consider a simple example code as shown below. Suppose you want to have a
component, Angular will consider it as a simple "class" until you explicitly use
"Decorator" and attach metadata to TypeScript.

Here, @Component is used to define a class as component.

Likewise, @pipe is used to tell Angular to define a class as pipe.

import {Component} from 'angular2/core';


@Component({ //METADATA
selector: 'greet',
template: `
<h1>Hello There!!!</h1>
<h2>Have a nice day.</h2> `
})
export class GreetApp {}
Simply put, everything in Angular 2 is a simple class, until you declare metadata
(@Component or @Pipe or @Decorator or @Injectable) to it.

What is Data Binding?


What is Data Binding?
It is the process of automatic synchronization of view and business logic. It helps
in connecting the Template (view - what user sees) with Component (back end
data/source).

There are four ways you can bind a data to the DOM depending on the direction the
data flows.

Data flows into the view by Interpolation and Property Binding.


Data flows outside the view into the class by Event Binding.
Data flows both ways by Two-Way Data Binding.

Interpolation
Interpolation acts as local variable, which allows us to bind data from "Component
Class" onto your "Template".
It is defined using {{ }} double curly braces.
If we consider an example, 20 + 20 results in {{20 + 20}}, the actual mathematical
calculation is done and output is displayed as 20 + 20 results in 40.
It can also access values from component class. Ex - {{myName}}
It can further assign attributes to the tags. Ex - <img src = {{myImageURL}}>

Property Binding vs Interpolation


Both are same, as they make the data flow from "Component" to "Template". The only
difference is the way they are defined or used.

Interpolation Demo
import { component } from `@angular2/core`;
@Component ({
selector: 'myApp',
template: `
<h1> {{title}} </h1> //Interpolation Binding `
})
export class AppComponent {
title: "Hello Fresco !"
}
Property Binding Demo
import { component } from `@angular2/core`;
@Component ({
selector: 'myApp',
template: `
<h1 [innerHtml] = "title"> </h1> //Property Binding
`
})
export class AppComponent {
title: "Hello Fresco !"
}

Two-Way Data Binding


Property Binding and Event Binding are One Way Data Binding. In other words, data
will flow either from Component to View or the other way, but not both.

Two-way data binding is a combination of both Property Binding and Event Binding
allowing us to update data in both directions. It is defined using [( )] popularly
known as banana brackets.

What are Directives?


Directive is a class with @Directive decorator. They make DOM elements dynamic, by
changing their behavior.

Directive is of three types: Structural, Attribute and Component.

Structural Directive
They manipulate the DOM elements. i.e. Delete or update the elements. This changes
the structure of webpage.

Some of the built-in structural directives, Angular 2 offers are NgIf, NgFor and
NgSwitch.

Example: <div *ngIf="employee">{{employee.name}}</div>

Attribute Directive
These directives add styling by manipulating the Attributes of DOM element. They do
not change the structure of webpage.
NgStyle and NgClass are some of the built-in attribute directives, Angular 2
provides.

Do You Know?
Technically Components is a subset of directives except the fact that they have a
mandatory template parameter.

What is Service?
Services are functions that are designed to complete a specific task. If you want
to bring external data from server into your app or perform some repetitive task,
then services come handy.

How to use Services?


How to use Services?

Create a file <serviceName>.services.ts.


Import injectable from @angular/core.
Create a class with the required function and use the decorator @injectable() to
specify that it is a service.
Then import the service in root component, which is discussed in Dependency
Injection.
Example: This simple service will perform add operation whenever it is used.

import {Injectable} from 'angular2/core';

@Injectable()
export class MyService {
addFunction(a,b){ return a+b; }
}

What is Dependency Injection?


What is Dependency Injection?
Dependency Injection is a way to "Inject" the parameters or services
(dependencies), on which the new Instance is "Dependent" for its creation. How the
dependencies are created is not a point of concern for the instance consuming the
dependency.

Angular finds which services are required to the component, by looking at the
"type" of component's constructor parameters.
Angular then checks for the service in Injector, which makes a container of all
services that have already been created.
You will learn more about Services and Dependency Injection in detail in a
different course.

My Activity Tracker - Step 1


My Activity Tracker - Step 1
Now, it is time to build your own app with what you have learnt so far.

Create a page as shown in the picture. Have the following elements in your app.

Header
Label – Display ONLY IF there are no activities
Text Input box
Button 1 – To add an activity
Button 2 – To clear all activities

You might also like