SlideShare une entreprise Scribd logo
1  sur  28
Télécharger pour lire hors ligne
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

Contenu connexe

Tendances

Angular 4 Introduction Tutorial
Angular 4 Introduction TutorialAngular 4 Introduction Tutorial
Angular 4 Introduction TutorialScott Lee
 
Angular 2 Essential Training
Angular 2 Essential Training Angular 2 Essential Training
Angular 2 Essential Training Patrick Schroeder
 
What is Angular version 4?
What is Angular version 4?What is Angular version 4?
What is Angular version 4?Troy Miles
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2Naveen Pete
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2Dor Moshe
 
Angular 2 - The Next Framework
Angular 2 - The Next FrameworkAngular 2 - The Next Framework
Angular 2 - The Next FrameworkCommit University
 
Angular4 getting started
Angular4 getting startedAngular4 getting started
Angular4 getting startedTejinderMakkar
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2Knoldus Inc.
 
Angular 4 and TypeScript
Angular 4 and TypeScriptAngular 4 and TypeScript
Angular 4 and TypeScriptAhmed El-Kady
 
Talk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG BéninTalk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG BéninEzéchiel Amen AGBLA
 
Angular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka
Angular 4 Tutorial | What's New In Angular 4 | Angular Training | EdurekaAngular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka
Angular 4 Tutorial | What's New In Angular 4 | Angular Training | EdurekaEdureka!
 
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...Edureka!
 
Angular 2: What's New?
Angular 2: What's New?Angular 2: What's New?
Angular 2: What's New?jbandi
 
Dive into Angular, part 4: Angular 2.0
Dive into Angular, part 4: Angular 2.0Dive into Angular, part 4: Angular 2.0
Dive into Angular, part 4: Angular 2.0Oleksii Prohonnyi
 

Tendances (20)

Angular 9 New features
Angular 9 New featuresAngular 9 New features
Angular 9 New features
 
Angular 4 Introduction Tutorial
Angular 4 Introduction TutorialAngular 4 Introduction Tutorial
Angular 4 Introduction Tutorial
 
Angular 2 Essential Training
Angular 2 Essential Training Angular 2 Essential Training
Angular 2 Essential Training
 
Angular 4 - quick view
Angular 4 - quick viewAngular 4 - quick view
Angular 4 - quick view
 
What is Angular version 4?
What is Angular version 4?What is Angular version 4?
What is Angular version 4?
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
Angular 9
Angular 9 Angular 9
Angular 9
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2
 
Angular 2 - The Next Framework
Angular 2 - The Next FrameworkAngular 2 - The Next Framework
Angular 2 - The Next Framework
 
Angular4 getting started
Angular4 getting startedAngular4 getting started
Angular4 getting started
 
Angular 2
Angular 2Angular 2
Angular 2
 
Angular 5
Angular 5Angular 5
Angular 5
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
Angular 4 and TypeScript
Angular 4 and TypeScriptAngular 4 and TypeScript
Angular 4 and TypeScript
 
Talk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG BéninTalk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG Bénin
 
Angular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka
Angular 4 Tutorial | What's New In Angular 4 | Angular Training | EdurekaAngular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka
Angular 4 Tutorial | What's New In Angular 4 | Angular Training | Edureka
 
What angular 13 will bring to the table
What angular 13 will bring to the table What angular 13 will bring to the table
What angular 13 will bring to the table
 
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
 
Angular 2: What's New?
Angular 2: What's New?Angular 2: What's New?
Angular 2: What's New?
 
Dive into Angular, part 4: Angular 2.0
Dive into Angular, part 4: Angular 2.0Dive into Angular, part 4: Angular 2.0
Dive into Angular, part 4: Angular 2.0
 

Similaire à An Overview of Angular 4

Angular kickstart slideshare
Angular kickstart   slideshareAngular kickstart   slideshare
Angular kickstart slideshareSaleemMalik52
 
Angular Interview Questions-PDF.pdf
Angular Interview Questions-PDF.pdfAngular Interview Questions-PDF.pdf
Angular Interview Questions-PDF.pdfJohnLeo57
 
Angular 7 Firebase5 CRUD Operations with Reactive Forms
Angular 7 Firebase5 CRUD Operations with Reactive FormsAngular 7 Firebase5 CRUD Operations with Reactive Forms
Angular 7 Firebase5 CRUD Operations with Reactive FormsDigamber Singh
 
Web worker in your angular application
Web worker in your angular applicationWeb worker in your angular application
Web worker in your angular applicationSuresh Patidar
 
Angular - Chapter 1 - Introduction
 Angular - Chapter 1 - Introduction Angular - Chapter 1 - Introduction
Angular - Chapter 1 - IntroductionWebStackAcademy
 
Angularjs2 presentation
Angularjs2 presentationAngularjs2 presentation
Angularjs2 presentationdharisk
 
How create react app help in creating a new react applications
How create react app help in creating a new react applications How create react app help in creating a new react applications
How create react app help in creating a new react applications Concetto Labs
 
AngularJS Project Setup step-by- step guide - RapidValue Solutions
AngularJS Project Setup step-by- step guide - RapidValue SolutionsAngularJS Project Setup step-by- step guide - RapidValue Solutions
AngularJS Project Setup step-by- step guide - RapidValue SolutionsRapidValue
 
How to Implement Micro Frontend Architecture using Angular Framework
How to Implement Micro Frontend Architecture using Angular FrameworkHow to Implement Micro Frontend Architecture using Angular Framework
How to Implement Micro Frontend Architecture using Angular FrameworkRapidValue
 
Getting started with appium
Getting started with appiumGetting started with appium
Getting started with appiumPratik Patel
 
Progressive Web Application by Citytech
Progressive Web Application by CitytechProgressive Web Application by Citytech
Progressive Web Application by CitytechRitwik Das
 
Introduction to angular | Concepts and Environment setup
Introduction to angular | Concepts and Environment setupIntroduction to angular | Concepts and Environment setup
Introduction to angular | Concepts and Environment setupAnsley Rodrigues
 
Alfresco Development Framework Basic
Alfresco Development Framework BasicAlfresco Development Framework Basic
Alfresco Development Framework BasicMario Romano
 
Angular 2 for Java Developers
Angular 2 for Java DevelopersAngular 2 for Java Developers
Angular 2 for Java DevelopersYakov Fain
 
Integrate any Angular Project into WebSphere Portal
Integrate any Angular Project into WebSphere PortalIntegrate any Angular Project into WebSphere Portal
Integrate any Angular Project into WebSphere PortalHimanshu Mendiratta
 

Similaire à An Overview of Angular 4 (20)

Angular IO
Angular IOAngular IO
Angular IO
 
Angular kickstart slideshare
Angular kickstart   slideshareAngular kickstart   slideshare
Angular kickstart slideshare
 
Angular Interview Questions-PDF.pdf
Angular Interview Questions-PDF.pdfAngular Interview Questions-PDF.pdf
Angular Interview Questions-PDF.pdf
 
Angular 7 Firebase5 CRUD Operations with Reactive Forms
Angular 7 Firebase5 CRUD Operations with Reactive FormsAngular 7 Firebase5 CRUD Operations with Reactive Forms
Angular 7 Firebase5 CRUD Operations with Reactive Forms
 
Web worker in your angular application
Web worker in your angular applicationWeb worker in your angular application
Web worker in your angular application
 
Angular - Chapter 1 - Introduction
 Angular - Chapter 1 - Introduction Angular - Chapter 1 - Introduction
Angular - Chapter 1 - Introduction
 
Angularjs2 presentation
Angularjs2 presentationAngularjs2 presentation
Angularjs2 presentation
 
How create react app help in creating a new react applications
How create react app help in creating a new react applications How create react app help in creating a new react applications
How create react app help in creating a new react applications
 
AngularJS Project Setup step-by- step guide - RapidValue Solutions
AngularJS Project Setup step-by- step guide - RapidValue SolutionsAngularJS Project Setup step-by- step guide - RapidValue Solutions
AngularJS Project Setup step-by- step guide - RapidValue Solutions
 
How to Implement Micro Frontend Architecture using Angular Framework
How to Implement Micro Frontend Architecture using Angular FrameworkHow to Implement Micro Frontend Architecture using Angular Framework
How to Implement Micro Frontend Architecture using Angular Framework
 
Angular
AngularAngular
Angular
 
Getting started with appium
Getting started with appiumGetting started with appium
Getting started with appium
 
mean stack
mean stackmean stack
mean stack
 
Progressive Web Application by Citytech
Progressive Web Application by CitytechProgressive Web Application by Citytech
Progressive Web Application by Citytech
 
Introduction to angular | Concepts and Environment setup
Introduction to angular | Concepts and Environment setupIntroduction to angular | Concepts and Environment setup
Introduction to angular | Concepts and Environment setup
 
Alfresco Development Framework Basic
Alfresco Development Framework BasicAlfresco Development Framework Basic
Alfresco Development Framework Basic
 
Angular 2 for Java Developers
Angular 2 for Java DevelopersAngular 2 for Java Developers
Angular 2 for Java Developers
 
Angular 2.0
Angular  2.0Angular  2.0
Angular 2.0
 
Integrate any Angular Project into WebSphere Portal
Integrate any Angular Project into WebSphere PortalIntegrate any Angular Project into WebSphere Portal
Integrate any Angular Project into WebSphere Portal
 
AngularJs
AngularJsAngularJs
AngularJs
 

Plus de Cynoteck Technology Solutions Private Limited

Plus de Cynoteck Technology Solutions Private Limited (20)

Delivering powerful integrations without code using out-of-the-box Salesforce...
Delivering powerful integrations without code using out-of-the-box Salesforce...Delivering powerful integrations without code using out-of-the-box Salesforce...
Delivering powerful integrations without code using out-of-the-box Salesforce...
 
Test automation using selenium
Test automation using seleniumTest automation using selenium
Test automation using selenium
 
Business process flow enhancement
Business process flow enhancementBusiness process flow enhancement
Business process flow enhancement
 
Editable Grids
Editable GridsEditable Grids
Editable Grids
 
Multi Select Option set in Microsoft Dynamics 365
Multi Select Option set in Microsoft Dynamics 365Multi Select Option set in Microsoft Dynamics 365
Multi Select Option set in Microsoft Dynamics 365
 
Microsoft Dynamics 365 for customer services
Microsoft Dynamics 365 for customer servicesMicrosoft Dynamics 365 for customer services
Microsoft Dynamics 365 for customer services
 
Configuring AWS with IoT
Configuring AWS with IoTConfiguring AWS with IoT
Configuring AWS with IoT
 
An Overview of Google Assistant
An Overview of Google Assistant An Overview of Google Assistant
An Overview of Google Assistant
 
An overview of Ionic
An overview of IonicAn overview of Ionic
An overview of Ionic
 
What's new in Xcode 9?
What's new in Xcode 9? What's new in Xcode 9?
What's new in Xcode 9?
 
An overview of Beacons
An overview of BeaconsAn overview of Beacons
An overview of Beacons
 
Microsoft Dynamics NAV
Microsoft Dynamics NAV Microsoft Dynamics NAV
Microsoft Dynamics NAV
 
Dynamics 365 for financials
Dynamics 365 for financials Dynamics 365 for financials
Dynamics 365 for financials
 
Microsoft Dynamics 365 for Marketing
Microsoft Dynamics 365 for MarketingMicrosoft Dynamics 365 for Marketing
Microsoft Dynamics 365 for Marketing
 
What is power apps
What is power appsWhat is power apps
What is power apps
 
Microsoft Dynamics 365 for sales
Microsoft Dynamics  365 for sales Microsoft Dynamics  365 for sales
Microsoft Dynamics 365 for sales
 
Microsoft Dynamics 365- field services
Microsoft Dynamics  365- field servicesMicrosoft Dynamics  365- field services
Microsoft Dynamics 365- field services
 
What is project service automation in dynamics 365
What is project service automation in dynamics 365What is project service automation in dynamics 365
What is project service automation in dynamics 365
 
An overview of what is dynamics 365
An overview of what is dynamics 365An overview of what is dynamics 365
An overview of what is dynamics 365
 
Here’s, how microsoft social engagement boost lead
Here’s, how microsoft social engagement boost leadHere’s, how microsoft social engagement boost lead
Here’s, how microsoft social engagement boost lead
 

Dernier

AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyRaymond Okyere-Forson
 
Streamlining Your Application Builds with Cloud Native Buildpacks
Streamlining Your Application Builds  with Cloud Native BuildpacksStreamlining Your Application Builds  with Cloud Native Buildpacks
Streamlining Your Application Builds with Cloud Native BuildpacksVish Abrams
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesShyamsundar Das
 
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageSales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageDista
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxAutus Cyber Tech
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLAlluxio, Inc.
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIIvo Andreev
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmonyelliciumsolutionspun
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfTobias Schneck
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdfMeon Technology
 
Webinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptWebinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptkinjal48
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntelliSource Technologies
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeNeo4j
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorShane Coughlan
 
Fields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxFields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxJoão Esperancinha
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024Mind IT Systems
 
Enterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze IncEnterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze Incrobinwilliams8624
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Jaydeep Chhasatia
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesSoftwareMill
 

Dernier (20)

AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human Beauty
 
Streamlining Your Application Builds with Cloud Native Buildpacks
Streamlining Your Application Builds  with Cloud Native BuildpacksStreamlining Your Application Builds  with Cloud Native Buildpacks
Streamlining Your Application Builds with Cloud Native Buildpacks
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security Challenges
 
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageSales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
 
ERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptxERP For Electrical and Electronics manufecturing.pptx
ERP For Electrical and Electronics manufecturing.pptx
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AI
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdf
 
Salesforce AI Associate Certification.pptx
Salesforce AI Associate Certification.pptxSalesforce AI Associate Certification.pptx
Salesforce AI Associate Certification.pptx
 
Webinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptWebinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.ppt
 
Introduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptxIntroduction-to-Software-Development-Outsourcing.pptx
Introduction-to-Software-Development-Outsourcing.pptx
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG time
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS Calculator
 
Fields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxFields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptx
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024
 
Enterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze IncEnterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze Inc
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retries
 

An Overview of Angular 4

  • 1. Angular ( formerly Angular 4 ) One framework. Mobile & desktop.
  • 2.  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
  • 3. • 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
  • 5. 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.
  • 6. 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.
  • 7. 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.
  • 8. 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.
  • 9. 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.
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. 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.
  • 14. Step 5 Open web browser - localhost:4200
  • 15. 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
  • 16. Installing Packages npm install command is used for installing packages. Syntax npm install <package_name> Example F:/Angular4/MyFirstDemoApp> npm install bootsrap
  • 17. 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
  • 18. 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.
  • 19. 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.
  • 20. 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.
  • 21. 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
  • 22. 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.
  • 23. 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.
  • 24. 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 “
  • 25. 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>
  • 26. 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.
  • 27. www.cynoteck.com Contact No: +1-612-800-9092, +918272014440, +918430155522s Website : www.cynoteck.com Email : sales@Cynoteck.com Contact handles

Notes de l'éditeur

  1. Lesson descriptions should be brief.
  2. Example objectives At the end of this lesson, you will be able to: Save files to the team Web server. Move files to different locations on the team Web server. Share files on the team Web server.