SlideShare a Scribd company logo
Angular Kickstart
Foyzul Karim
CEO, Code Coopers
Lead Mentor, Code Coopers Training
Angular CLI
‱ Has all the commands (well, most of the commands) in it. Like a
magic wand.
‱ Verify the environment
‱ > node –v
‱ > npm –v
‱ Install the cli
‱ > npm install -g @angular/cli
‱ Test if the cli is working
‱ > ng help
Angular4 kickstart
Create an app
‱ > ng new my-app = creates a new folder and scaffold the whole app
‱ > ng cd my-app = goes into the folder
‱ > ng serve = compiles the typescript and everything, host a web
server (port 4200 by default) using Webpack
Angular4 kickstart
Angular4 kickstart
Some vocabularies
‱ Module : set of classes works as a single unit. Like a project inside of a
solution in the compiled language world (C#/Java)
‱ Component : set of classes works as a mode smaller unit. It combines
of some HTML, CSS, JavaScript (TypeScript) codes. Angular’s code
combines then as a single component.
What’s happening
‱ Open the project / folder
‱ Starting point  main.ts app.module
‱ Bootstrapping the module (combines the required classes and make
ready as a single module (.dll concept in Dot Net world)
‱ So, yes we can have many different modules
Name of the component
HTML code for the
component
Css for the component
Necessary code of the
component to
manipulate the HTML
Angular4 kickstart
Angular4 kickstart
Angular4 kickstart
Add our component
‱ > ng generate component todo
Set our component to bootstrap
Set the selector to index.html
Angular4 kickstart
Angular Syntax
‱ 3 common ways to interact with view from code
‱ []  evaluate the expression and sets the value to the property. Its one-way
binding , only setter works
‱ ()  detects the event fired from the element and calls the method set here
or change the variable set here. Its one-way binding, but something like getter
‱ [()]  its two-way binding and behaves like the two type of binding written
above.
‱ {{}}  renders the value into the HTML DOM
Angular4 kickstart
Angular4 kickstart
TypeScript : its just See Sharp (C#)
Service classes
‱ > ng generate service todo
Angular4 kickstart
Injections
‱ Imports
‱ Providers
‱ Injects
That’s it. Thank you for today
‱ Keep in touch with me at
‱ http://fb.com/codecoopers
‱ http://fb.com/codecooperstraining
‱ http://github.com/foyzulkarim
‱ http://Youtube.com/foyzulkarim
‱ foyzulkarim@gmail.com

More Related Content

PPTX
Microservices: A developer's approach
PDF
Before you jump into Angular
PPTX
Software architecture : From project management to deployment
PPTX
SDLC, Agile methodologies and Career in Product management
PPTX
A practical approach on - How to design offline-online synchronization system
PPTX
Entity Framework 7: What's New?
PPTX
BizBook365 : A microservice approach
PPT
Front-End Tools and Workflows
Microservices: A developer's approach
Before you jump into Angular
Software architecture : From project management to deployment
SDLC, Agile methodologies and Career in Product management
A practical approach on - How to design offline-online synchronization system
Entity Framework 7: What's New?
BizBook365 : A microservice approach
Front-End Tools and Workflows

What's hot (20)

PPTX
Porting ASP.NET applications to Windows Azure
PDF
Scripting Languages in OSGi
PPTX
Building Modern Web Applications with ASP.NET5
PDF
ApacheCon Core: Service Discovery in OSGi: Beyond the JVM using Docker and Co...
PPTX
UWP apps development - Part 2
PDF
Service Discovery in OSGi: Beyond the JVM using Docker and Consul
PPTX
Writing power shell the right tool for the job
PDF
Who needs containers in a serverless world
PDF
Serverless architecture
PPTX
Vincent biret azure functions and flow (ottawa)
PPTX
Vincent biret azure functions and flow (toronto)
PDF
Navigate around the edge with PowerShell
PPTX
Vs java (1)
PPTX
Monoliths vs microservices
PPTX
Building solutions with the SharePoint Framework - introduction
PDF
Secure your environment by automation
PDF
RubyConf Taiwan 2016 - Large scale Rails applications
PPTX
Building solutions with the SharePoint Framework - deep-dive
PPTX
Developing Cross-Platform Web Apps with ASP.NET Core1.0
PDF
SGCE 2015 REST APIs
Porting ASP.NET applications to Windows Azure
Scripting Languages in OSGi
Building Modern Web Applications with ASP.NET5
ApacheCon Core: Service Discovery in OSGi: Beyond the JVM using Docker and Co...
UWP apps development - Part 2
Service Discovery in OSGi: Beyond the JVM using Docker and Consul
Writing power shell the right tool for the job
Who needs containers in a serverless world
Serverless architecture
Vincent biret azure functions and flow (ottawa)
Vincent biret azure functions and flow (toronto)
Navigate around the edge with PowerShell
Vs java (1)
Monoliths vs microservices
Building solutions with the SharePoint Framework - introduction
Secure your environment by automation
RubyConf Taiwan 2016 - Large scale Rails applications
Building solutions with the SharePoint Framework - deep-dive
Developing Cross-Platform Web Apps with ASP.NET Core1.0
SGCE 2015 REST APIs
Ad

Similar to Angular4 kickstart (20)

PDF
Building blocks of Angular
DOCX
Angular Interview Questions & Answers
PDF
Angular Interview Questions-PDF.pdf
PPTX
Angular kickstart slideshare
PDF
Angular - Chapter 3 - Components
PPTX
Angular Framework ppt for beginners and advanced
PDF
Angularjs
PPTX
Angular4 getting started
PPTX
Fly High With Angular - How to build an app using Angular
PPTX
Foster - Getting started with Angular
PPTX
Angular Presentation
PDF
Everything You Need To Know About AngularJS
PPTX
yrs of IT experience in enterprise programming
PDF
Ng-init
PDF
Ng-init
PDF
AngularJS in practice
PDF
Angular Notes.pdf
PPTX
Angular IO
PDF
Angular Meetup 1 - Angular Basics and Workshop
PPTX
Angular Basics.pptx
Building blocks of Angular
Angular Interview Questions & Answers
Angular Interview Questions-PDF.pdf
Angular kickstart slideshare
Angular - Chapter 3 - Components
Angular Framework ppt for beginners and advanced
Angularjs
Angular4 getting started
Fly High With Angular - How to build an app using Angular
Foster - Getting started with Angular
Angular Presentation
Everything You Need To Know About AngularJS
yrs of IT experience in enterprise programming
Ng-init
Ng-init
AngularJS in practice
Angular Notes.pdf
Angular IO
Angular Meetup 1 - Angular Basics and Workshop
Angular Basics.pptx
Ad

More from Foyzul Karim (11)

PPTX
Career talk 2024 : Balancing AI & Fundamentals in Modern Software Engineering
PPTX
Software architecture
PPTX
Software design principles SOLID
PPTX
BizBook365.com 16Feb2018 Demo
PPTX
BizBook365 - Modern Inventory System for Shops
PPTX
Kickstart android development with xamarin
PPTX
Windows store app development using javascript
PDF
Unit testing (workshop)
PPTX
Windows store app development V1
PDF
Data types
PPT
Linq
Career talk 2024 : Balancing AI & Fundamentals in Modern Software Engineering
Software architecture
Software design principles SOLID
BizBook365.com 16Feb2018 Demo
BizBook365 - Modern Inventory System for Shops
Kickstart android development with xamarin
Windows store app development using javascript
Unit testing (workshop)
Windows store app development V1
Data types
Linq

Recently uploaded (20)

PPTX
Lecture 3: Operating Systems Introduction to Computer Hardware Systems
 
PDF
Adobe Illustrator 28.6 Crack My Vision of Vector Design
PDF
Navsoft: AI-Powered Business Solutions & Custom Software Development
PDF
Understanding Forklifts - TECH EHS Solution
PDF
T3DD25 TYPO3 Content Blocks - Deep Dive by André Kraus
PDF
Softaken Excel to vCard Converter Software.pdf
PPTX
Operating system designcfffgfgggggggvggggggggg
PDF
Wondershare Filmora 15 Crack With Activation Key [2025
PPTX
Agentic AI Use Case- Contract Lifecycle Management (CLM).pptx
PPTX
VVF-Customer-Presentation2025-Ver1.9.pptx
PDF
Raksha Bandhan Grocery Pricing Trends in India 2025.pdf
PPTX
Introduction to Artificial Intelligence
PPTX
ai tools demonstartion for schools and inter college
PDF
top salesforce developer skills in 2025.pdf
PPTX
history of c programming in notes for students .pptx
PDF
Audit Checklist Design Aligning with ISO, IATF, and Industry Standards — Omne...
PPTX
CHAPTER 2 - PM Management and IT Context
PDF
SAP S4 Hana Brochure 3 (PTS SYSTEMS AND SOLUTIONS)
PPTX
Odoo POS Development Services by CandidRoot Solutions
PPTX
L1 - Introduction to python Backend.pptx
Lecture 3: Operating Systems Introduction to Computer Hardware Systems
 
Adobe Illustrator 28.6 Crack My Vision of Vector Design
Navsoft: AI-Powered Business Solutions & Custom Software Development
Understanding Forklifts - TECH EHS Solution
T3DD25 TYPO3 Content Blocks - Deep Dive by André Kraus
Softaken Excel to vCard Converter Software.pdf
Operating system designcfffgfgggggggvggggggggg
Wondershare Filmora 15 Crack With Activation Key [2025
Agentic AI Use Case- Contract Lifecycle Management (CLM).pptx
VVF-Customer-Presentation2025-Ver1.9.pptx
Raksha Bandhan Grocery Pricing Trends in India 2025.pdf
Introduction to Artificial Intelligence
ai tools demonstartion for schools and inter college
top salesforce developer skills in 2025.pdf
history of c programming in notes for students .pptx
Audit Checklist Design Aligning with ISO, IATF, and Industry Standards — Omne...
CHAPTER 2 - PM Management and IT Context
SAP S4 Hana Brochure 3 (PTS SYSTEMS AND SOLUTIONS)
Odoo POS Development Services by CandidRoot Solutions
L1 - Introduction to python Backend.pptx

Angular4 kickstart

  • 1. Angular Kickstart Foyzul Karim CEO, Code Coopers Lead Mentor, Code Coopers Training
  • 2. Angular CLI ‱ Has all the commands (well, most of the commands) in it. Like a magic wand. ‱ Verify the environment ‱ > node –v ‱ > npm –v ‱ Install the cli ‱ > npm install -g @angular/cli ‱ Test if the cli is working ‱ > ng help
  • 4. Create an app ‱ > ng new my-app = creates a new folder and scaffold the whole app ‱ > ng cd my-app = goes into the folder ‱ > ng serve = compiles the typescript and everything, host a web server (port 4200 by default) using Webpack
  • 7. Some vocabularies ‱ Module : set of classes works as a single unit. Like a project inside of a solution in the compiled language world (C#/Java) ‱ Component : set of classes works as a mode smaller unit. It combines of some HTML, CSS, JavaScript (TypeScript) codes. Angular’s code combines then as a single component.
  • 8. What’s happening ‱ Open the project / folder ‱ Starting point  main.ts app.module ‱ Bootstrapping the module (combines the required classes and make ready as a single module (.dll concept in Dot Net world) ‱ So, yes we can have many different modules
  • 9. Name of the component HTML code for the component Css for the component Necessary code of the component to manipulate the HTML
  • 13. Add our component ‱ > ng generate component todo
  • 14. Set our component to bootstrap
  • 15. Set the selector to index.html
  • 17. Angular Syntax ‱ 3 common ways to interact with view from code ‱ []  evaluate the expression and sets the value to the property. Its one-way binding , only setter works ‱ ()  detects the event fired from the element and calls the method set here or change the variable set here. Its one-way binding, but something like getter ‱ [()]  its two-way binding and behaves like the two type of binding written above. ‱ {{}}  renders the value into the HTML DOM
  • 20. TypeScript : its just See Sharp (C#)
  • 21. Service classes ‱ > ng generate service todo
  • 24. That’s it. Thank you for today ‱ Keep in touch with me at ‱ http://fb.com/codecoopers ‱ http://fb.com/codecooperstraining ‱ http://github.com/foyzulkarim ‱ http://Youtube.com/foyzulkarim ‱ foyzulkarim@gmail.com