An Overview of Angular 4

Angular
( formerly Angular 4 )
One framework.
Mobile & desktop.

 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
Agenda

• Angular is an open source JavaScript framework that is used to
build single page based web applications.
• Developed by Google
• Release Date - March 2017
• One framework. Mobile & Desktop.
Angular

Cross
Platform
Speed and
Performance
Productivity Development
Features of Angular

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
https://nodejs.org/en/download/
Node.js
• 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
Syntax : - node -v
Check node.js version
• This command is used for checking
current installed version of node.

Syntax : - npm -vCheck npm version
• 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
Install Angular CLI 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
Globally
Package Name

Step 2 Creating project using Angular CLI
Syntax : - ng new <project_name>
F:/Angular4> ng new MyFirstDemoApp Node.js command prompt
Current working directory
Project Name

Step 3 Enter into newly created project folder i.e. MyFirstDemoApp
Step 4 Run application
Syntax : - ng serve
F:/Angular4/MyFirstDemoApp> ng serve
 ng serve command is used for to run application.

Step 5 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.
All images, stylesheets, JavaScript or third party libraries reside in
assets
Configuration Files
Root project folder, all components reside is app
folder.
Entry point of application

Installing Packages
npm install command is used for installing packages.
Syntax
npm install <package_name>
Example
F:/Angular4/MyFirstDemoApp> npm install bootsrap

How App Start
main.ts • Main.ts file is entry point of our application.
• Main.ts file bootstrap app.module.ts file
app.module.ts • This file bootstrap our first component i.e
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
A Component consists of the following −
 Components are a logical piece of code for Angular application.
Component
Template Class Metadata
 Template is used to render
the view for the application.
 This contains the HTML that
needs to be rendered in the
application.
 This is like a class defined in any
language such as C#.
 This has the code which is used
to support the view.
 It is defined in TypeScript.
 This has the extra data
defined for the Angular class.
 It is defined with a decorator.

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
the component can be used in other
modules in the application.
 title is the name of the property.
 The property is given a value of
‘app’.
We are using the import keyword to
import the ‘Component’ decorator
from the angular/core module.

Creating Component
 ng generate command is used for create component.
Syntax
ng generate component <component_name>
or
ng g c <component_name>
Example
F:/Angular4/MyFirstDemoApp>
ng g c server

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

By Class
Syntax
@Component({
selector: ‘.selector-name',
templateUrl: ‘html - template',
styleUrls: [‘stylesheet']
})
Example
@Component({
selector: ‘.app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
<div class =“selector-name”>
</div>
<div class=“app-root”> </div>
Define by dot ( . ) in selector name.

Data binding
 Data binding is communication between business logic and views.
Typescript
Code
(Business
Logic)
Template
(HTML)
Data binding = Communication
Output Data
String Interpolation => {{ data }}
Property Binding => [property] = “ data “

String Interpolation Interpolation markup is used to provide data-binding to text and attribute values.
Syntax
export class <class_name>
{
variableName = ‘any string';
}
Example
export class AppComponent
{
title = ‘This is my demo app';
}
<div {{variableName }} >
</div>
<div {{ title }} > </div>

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

www.cynoteck.com
Contact No: +1-612-800-9092, +918272014440,
+918430155522s
Website : www.cynoteck.com
Email : sales@Cynoteck.com
Contact handles

An Overview of Angular 4

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to An Overview of Angular 4 (20)

More from Cynoteck Technology Solutions Private Limited (20)

Recently uploaded (20)

An Overview of Angular 4

Editor's Notes