Angular

( formerly Angular 4 )

One framework.
Mobile & desktop.
Agenda
 Introduction of Angular.
 Features of Angular.
 Development environment setup.
 Project setup
 Structure of Angular project.
 How to install packages.
 What is TypeScript .
 How Angular application start.
 Components.
 How to create component.
 Styling component.
 Component selector.
 Databinding
Angular

• Angular is an open source JavaScript framework that is used to

build single page based web applications.

• Developed by Google

• Release Date - March 2016

• One framework. Mobile & Desktop.

Features of Angular

Cross Speed and

Platform Performance

Development
Productivity
Cross Platform

 Angular use modern web platform capabilities to deliver app-like experiences.

 High performance and zero-step installation.

 Build native mobile apps with Ionic Framework, NativeScript, and React Native.

 Create desktop - installed apps across Mac, Windows, and Linux.

Speed and Performance

 Angular turns our templates into code that's highly optimized for today's JavaScript

machines.

 Serve the first view of your application on node.js, .NET, PHP, and other servers for

rendering in just HTML and CSS. .

 Angular apps load quickly with the new Component Router.

Productivity
 Quickly create UI views with simple and powerful template syntax.

 Command line tools:

 Start building fast

 Add components and tests

 Then instantly deploy.

 Get intelligent code completion, instant errors in popular editors and IDEs.
Full Development Story
 Karma for unit tests.

 Protractor makes our scenario tests run faster and in a stable manner.

 Create high-performance, complex choreographies and animation timelines

with very little code through Angular's intuitive API.

Development Environment Setup
Node.js
https://nodejs.org/en/download/

• Node.js is an open-source, cross-platform JavaScript run-time environment for

executing JavaScript code server-side.
• Download latest version i.e. node v6.10.3

Check node.js version

Syntax : - node -v

• This command is used for checking

current installed version of node.
Check npm version Syntax : - npm -v

• This command is used for checking

current installed version of Node Package
Manager (npm).

Text Editor

• Visual Studio Code, WebStrome , Sublime

or any other text editor IDE
Project Setup
Angular CLI is command line interface for Angular

 Open node js command prompt in admin mode.

Syntax : - npm install –g <packagename>

F:/Angular4> npm install –g @angular/cli Node.js command prompt

Current working directory

Package Name
Globally
 Creating project using Angular CLI

Syntax : - ng new <project_name>

F:/Angular4> ng new MyFirstDemoApp Node.js command prompt

Current working directory

Project Name
 Enter into newly created project folder i.e. MyFirstDemoApp

Step 4 Run application

 ng serve command is used for to run application.

Syntax : - ng serve

F:/Angular4/MyFirstDemoApp> ng serve
Open web browser -
localhost:4200
Structure of project
NPM is the node package manager, which installs packages
locally into a project, specifically, into the node_modules
folder.

Root project folder, all components reside is app

folder.

Entry point of application

All images, stylesheets, JavaScript or third party libraries reside in

assets

Configuration Files
Installing Packages
npm install command is used for installing packages.

Syntax Example
npm install <package_name> F:/Angular4/MyFirstDemoApp> npm install bootsrap
How App Start
• Main.ts file is entry point of our application.
main.ts • Main.ts file bootstrap app.module.ts file

• This file bootstrap our first component i.e

app.module.ts app.component.ts

app.component.ts • This file render app.component.html file.

app.component.html • Final HTML template

TypeScript
 TypeScript is a free and open source programming language.

 It is developed and maintained by Microsoft.

 It is syntactical superset of JavaScript and adds optional static typings and class

based object oriented programming to the language.

Components
 Components are a logical piece of code for Angular application.
A Component consists of the following −
Appcomponent

App.component.html App.component.ts App.component.css

 Template is used to render  This is like a class defined in any  This has the styles defined
the view for the application. language such as C#. for the Angular html file.
 This contains the HTML  This has the code which is used
that
to support the view.
needs to be rendered in the
 It is defined in TypeScript.
application.
 We are using the import keyword to
import the ‘Component’ decorator
from the angular/core module.

Decorator

Defines the name of the HTML tag.

It holds our HTML template.

The styles option is used to

style a specific component

 Defining a class called

AppComponent.
 The export keyword is used so that
 title is the name of the property. the component can be used in other
 The property is given a value of
‘app’. modules in the application.
Creating Component
 ng generate command is used for create component.

Syntax Example

ng generate component <component_name> F:/Angular4/MyFirstDemoApp>

or ng g c server
ng g c <component_name>
Component Selector
By Element Define by square brackets [ ] in selector name.
Example
Syntax
@Component({
@Component({
selector: '[app-root]',
selector: '[selector-name]',
templateUrl: './app.component.html',
templateUrl: ‘html - template',
styleUrls: ['./app.component.css']
styleUrls: [‘stylesheet']
})
})

<div selector_name> </div> <div app-root> </div>

 By Class Define by dot ( . ) in selector name.

Example
Syntax
@Component({ sele
@Component({
ctor: ‘.app-root',
selector: ‘.selector-name',
templateUrl: './app.component.html',
templateUrl: ‘html - template',
styleUrls: ['./app.component.css']
styleUrls: [‘stylesheet']
})
})

<div class =“selector-name”> <div class=“app-root”> </div>

Data binding
 Data binding is communication between business logic and views.

Data binding = Communication

Typescript
Code
Output Data
(Business
Logic) Template
String Interpolation => {{ data }}
(HTML)
Property Binding => [property] = “ data “
String Interpolation Interpolation markup is used to provide data-binding to text and attribute
values.

Example
Syntax
export class AppComponent
export class <class_name>
{
{
title = ‘This is my demo app';
variableName = ‘any string';
}
}

<div {{variableName }} > <div {{ title }} > </div>

 Property Binding
Property binding allow us to bind values to properties of an element to modify their
behavior or appearance. This can include properties such as class, disabled, href or
textContent.

HTML Typescript
export class ClientComponent {
<button [disabled]="!isActive" isActive = false;
class="btn">ADD</button> constructor() {
setTimeout(()
=>
{ this.isActive =
true; }, 2000); } ngOnInit() { }