SlideShare a Scribd company logo
WELCOME EVERYBODY TO
Single Page Applications 
with
REMUS LANGU 
Senior Software Engineer | Speaker | Trainer 
Husband | Father | Orthodox Christian
Agenda 
1. Introduction 
2. Managing data & Navigation 
Module 
I 
3. AngularJS Controllers 
4. Views & AngularJS directives 
Module 
II 
5. Testing with Jasmine & Karma 
6. Live Practice 
Module 
III
Module I 
INTRODUCTION
What is a SPA? 
Web application providing a fluid UX 
by loading all necessary code 
with a single page load in a browser. 
Examples: 
http://www.trask-industries.com 
http://iasi.codecamp.ro
What do I need for building a SPA? 
Views 
Data 
Binding 
Pub/Sub Dependency 
Injection 
Routing 
MV* 
DOM 
Templates
AngularJS Framework 
Reduces 
Plumbing 
Spend 
More Time 
on What 
Matters 
Handles 
Monotony 
Focus on 
User 
Stories
AngularJS Concepts
AngularJS Concepts
Application Structure 
Web Server 
(HTML/CSS/JavaScript + ASP.NET WebAPI) 
Server Models 
Data Access 
(EntityFramework)
Module I 
MA N AG I N G DATA & N AV I G AT ION 
with 
&
Unit of Work & Repository Patterns
Unit of Work & Repository Patterns
Navigation
THANK YOU 
We will continue 
with MODULE 2 after lunch
Module II 
CONTROLLERS
Understanding Controllers
Module II 
VIEWS & DIRECTIVES
Bindings
Custom Directives
Filters
THANK YOU 
We will continue 
with MODULE 3 tomorrow
Module III 
T EST ING 
with 
&
THANK YOU 
Your questions are welcome

More Related Content

What's hot

Express web development with visual studio 2010 express_MVP Ronald Rajagukguk
Express web development with visual studio 2010 express_MVP Ronald Rajagukguk Express web development with visual studio 2010 express_MVP Ronald Rajagukguk
Express web development with visual studio 2010 express_MVP Ronald Rajagukguk
Quek Lilian
 
Rise of the responsive single page application
Rise of the responsive single page applicationRise of the responsive single page application
Rise of the responsive single page application
Oren Shatken
 

What's hot (20)

[MSPVN - Azure Workshop] Day 1 - Azure Web App with WordPress deployment
[MSPVN - Azure Workshop] Day 1 - Azure Web App with WordPress deployment[MSPVN - Azure Workshop] Day 1 - Azure Web App with WordPress deployment
[MSPVN - Azure Workshop] Day 1 - Azure Web App with WordPress deployment
 
Quick overview of WebAssembly
Quick overview of WebAssemblyQuick overview of WebAssembly
Quick overview of WebAssembly
 
Single Page Applications
Single Page ApplicationsSingle Page Applications
Single Page Applications
 
Web development presentation
Web development presentationWeb development presentation
Web development presentation
 
Web Development on Web Project Presentation
Web Development on Web Project PresentationWeb Development on Web Project Presentation
Web Development on Web Project Presentation
 
Single page applications
Single page applicationsSingle page applications
Single page applications
 
5 single page application principles developers need to know
5 single page application principles developers need to know5 single page application principles developers need to know
5 single page application principles developers need to know
 
Web design-ninja
Web design-ninjaWeb design-ninja
Web design-ninja
 
Salesforce Apex Hours:-Mitigate with Mono-Purpose Microservices
Salesforce Apex Hours:-Mitigate with Mono-Purpose MicroservicesSalesforce Apex Hours:-Mitigate with Mono-Purpose Microservices
Salesforce Apex Hours:-Mitigate with Mono-Purpose Microservices
 
Bengal institute of technology
Bengal institute of technologyBengal institute of technology
Bengal institute of technology
 
Intro to lwc - dev week slides
Intro to lwc - dev week slidesIntro to lwc - dev week slides
Intro to lwc - dev week slides
 
PWA basics for developers
PWA basics for developersPWA basics for developers
PWA basics for developers
 
ASP.Net MVC ile Web Uygulamaları - 4(Model)
ASP.Net MVC ile Web Uygulamaları - 4(Model)ASP.Net MVC ile Web Uygulamaları - 4(Model)
ASP.Net MVC ile Web Uygulamaları - 4(Model)
 
Express web development with visual studio 2010 express_MVP Ronald Rajagukguk
Express web development with visual studio 2010 express_MVP Ronald Rajagukguk Express web development with visual studio 2010 express_MVP Ronald Rajagukguk
Express web development with visual studio 2010 express_MVP Ronald Rajagukguk
 
Introduction To Umbraco
Introduction To UmbracoIntroduction To Umbraco
Introduction To Umbraco
 
Rise of the responsive single page application
Rise of the responsive single page applicationRise of the responsive single page application
Rise of the responsive single page application
 
Jws masterclass progressive web apps
Jws masterclass progressive web appsJws masterclass progressive web apps
Jws masterclass progressive web apps
 
Hacienda.io - A New Approach to Content Management
Hacienda.io - A New Approach to Content ManagementHacienda.io - A New Approach to Content Management
Hacienda.io - A New Approach to Content Management
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
 
Into to Webassmbly
Into to WebassmblyInto to Webassmbly
Into to Webassmbly
 

Viewers also liked

How do i gain more followers on keek
How do i gain more followers on keekHow do i gain more followers on keek
How do i gain more followers on keek
sheri896
 
certificate_of_attendance_agent
certificate_of_attendance_agentcertificate_of_attendance_agent
certificate_of_attendance_agent
Lorenzo Barcarolo
 

Viewers also liked (12)

Решение систем уравнений с двумя переменными 9 класс
Решение систем уравнений с двумя переменными 9 классРешение систем уравнений с двумя переменными 9 класс
Решение систем уравнений с двумя переменными 9 класс
 
How do i gain more followers on keek
How do i gain more followers on keekHow do i gain more followers on keek
How do i gain more followers on keek
 
Resume
ResumeResume
Resume
 
certificate_of_attendance_agent
certificate_of_attendance_agentcertificate_of_attendance_agent
certificate_of_attendance_agent
 
Shot over kill terrorist
Shot over kill terroristShot over kill terrorist
Shot over kill terrorist
 
YoleDev-PCIM
YoleDev-PCIMYoleDev-PCIM
YoleDev-PCIM
 
Las contribuciones ( ensayo saia)
Las contribuciones ( ensayo saia)Las contribuciones ( ensayo saia)
Las contribuciones ( ensayo saia)
 
Silvia cerón bioanalisis
Silvia cerón bioanalisisSilvia cerón bioanalisis
Silvia cerón bioanalisis
 
Racecadortril
RacecadortrilRacecadortril
Racecadortril
 
Mapa Conceptual Teoria general de los sistemas
Mapa Conceptual Teoria general de los sistemasMapa Conceptual Teoria general de los sistemas
Mapa Conceptual Teoria general de los sistemas
 
Right form of verb Presented by Monir Hossen
Right form of verb Presented by Monir Hossen Right form of verb Presented by Monir Hossen
Right form of verb Presented by Monir Hossen
 
Top 8 Takeaways: Building an Open Workplace
Top 8 Takeaways: Building an Open WorkplaceTop 8 Takeaways: Building an Open Workplace
Top 8 Takeaways: Building an Open Workplace
 

Similar to Single page applications with AngularJS

Similar to Single page applications with AngularJS (20)

Benefits of developing a Single Page Web Applications using AngularJS
Benefits of developing a Single Page Web Applications using AngularJSBenefits of developing a Single Page Web Applications using AngularJS
Benefits of developing a Single Page Web Applications using AngularJS
 
7 effective reasons why you should use angular js for mobile app development
7 effective reasons why you should use angular js for mobile app development7 effective reasons why you should use angular js for mobile app development
7 effective reasons why you should use angular js for mobile app development
 
AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)
 
Angular webinar - Credo Systemz
Angular webinar - Credo SystemzAngular webinar - Credo Systemz
Angular webinar - Credo Systemz
 
AngularJS – What, Why, Advantages and Disadvantages
AngularJS – What, Why, Advantages and DisadvantagesAngularJS – What, Why, Advantages and Disadvantages
AngularJS – What, Why, Advantages and Disadvantages
 
Building Single-page Web Applications with AngularJS @ TechCamp Sai Gon 2014
Building Single-page Web Applications with AngularJS @ TechCamp Sai Gon 2014Building Single-page Web Applications with AngularJS @ TechCamp Sai Gon 2014
Building Single-page Web Applications with AngularJS @ TechCamp Sai Gon 2014
 
angularjs_vs_angular_the_key_differences_between_javascript_and_typescript.pptx
angularjs_vs_angular_the_key_differences_between_javascript_and_typescript.pptxangularjs_vs_angular_the_key_differences_between_javascript_and_typescript.pptx
angularjs_vs_angular_the_key_differences_between_javascript_and_typescript.pptx
 
9 reasons why angular js web development should be your choice in 2020
9 reasons why angular js web development should be your choice in 20209 reasons why angular js web development should be your choice in 2020
9 reasons why angular js web development should be your choice in 2020
 
www.webre24h.com - An ajax tool for online modeling
www.webre24h.com - An ajax tool for online modelingwww.webre24h.com - An ajax tool for online modeling
www.webre24h.com - An ajax tool for online modeling
 
angularjs_vs_angular_the_key_differences_between_javascript_and_typescript.pptx
angularjs_vs_angular_the_key_differences_between_javascript_and_typescript.pptxangularjs_vs_angular_the_key_differences_between_javascript_and_typescript.pptx
angularjs_vs_angular_the_key_differences_between_javascript_and_typescript.pptx
 
AngularJS – What, Why, Advantages and Disadvantages
AngularJS – What, Why, Advantages and DisadvantagesAngularJS – What, Why, Advantages and Disadvantages
AngularJS – What, Why, Advantages and Disadvantages
 
Angular 5,6,7
Angular 5,6,7Angular 5,6,7
Angular 5,6,7
 
angularjs_vs_angular_the_key_differences_between_javascript_and_typescript.pptx
angularjs_vs_angular_the_key_differences_between_javascript_and_typescript.pptxangularjs_vs_angular_the_key_differences_between_javascript_and_typescript.pptx
angularjs_vs_angular_the_key_differences_between_javascript_and_typescript.pptx
 
Lessons learned from a large scale OSGi web app
Lessons learned from a large scale OSGi web appLessons learned from a large scale OSGi web app
Lessons learned from a large scale OSGi web app
 
How Angularjs is best for web development.pdf
How Angularjs is best for web development.pdfHow Angularjs is best for web development.pdf
How Angularjs is best for web development.pdf
 
Top java script frameworks ppt
Top java script frameworks pptTop java script frameworks ppt
Top java script frameworks ppt
 
Angular js workshop
Angular js workshopAngular js workshop
Angular js workshop
 
Mvc3 part1
Mvc3   part1Mvc3   part1
Mvc3 part1
 
Web application architecture guide how it works types, components, best pract...
Web application architecture guide how it works types, components, best pract...Web application architecture guide how it works types, components, best pract...
Web application architecture guide how it works types, components, best pract...
 
AngularJS Anatomy & Directives
AngularJS Anatomy & DirectivesAngularJS Anatomy & Directives
AngularJS Anatomy & Directives
 

More from Remus Langu (8)

Front end architecture
Front end architectureFront end architecture
Front end architecture
 
Handling variations in emerging designs
Handling variations in emerging designsHandling variations in emerging designs
Handling variations in emerging designs
 
Training AngularJS & Ionic
Training AngularJS & IonicTraining AngularJS & Ionic
Training AngularJS & Ionic
 
Single page interface challenges in modern web applications
Single page interface challenges in modern web applicationsSingle page interface challenges in modern web applications
Single page interface challenges in modern web applications
 
Client side modularization for modern web applications
Client side modularization for modern web applicationsClient side modularization for modern web applications
Client side modularization for modern web applications
 
Code qualities and practices to achieve them
Code qualities and practices to achieve themCode qualities and practices to achieve them
Code qualities and practices to achieve them
 
Comfortable code
Comfortable codeComfortable code
Comfortable code
 
Behavior Driven Development with AngularJS & Jasmine
Behavior Driven Development with AngularJS & JasmineBehavior Driven Development with AngularJS & Jasmine
Behavior Driven Development with AngularJS & Jasmine
 

Recently uploaded

AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...
AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...
AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...
Alluxio, Inc.
 
Prosigns: Transforming Business with Tailored Technology Solutions
Prosigns: Transforming Business with Tailored Technology SolutionsProsigns: Transforming Business with Tailored Technology Solutions
Prosigns: Transforming Business with Tailored Technology Solutions
Prosigns
 
Mastering Windows 7 A Comprehensive Guide for Power Users .pdf
Mastering Windows 7 A Comprehensive Guide for Power Users .pdfMastering Windows 7 A Comprehensive Guide for Power Users .pdf
Mastering Windows 7 A Comprehensive Guide for Power Users .pdf
mbmh111980
 

Recently uploaded (20)

iGaming Platform & Lottery Solutions by Skilrock
iGaming Platform & Lottery Solutions by SkilrockiGaming Platform & Lottery Solutions by Skilrock
iGaming Platform & Lottery Solutions by Skilrock
 
AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...
AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...
AI/ML Infra Meetup | Improve Speed and GPU Utilization for Model Training & S...
 
AI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAG
AI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAGAI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAG
AI/ML Infra Meetup | Reducing Prefill for LLM Serving in RAG
 
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
 
Prosigns: Transforming Business with Tailored Technology Solutions
Prosigns: Transforming Business with Tailored Technology SolutionsProsigns: Transforming Business with Tailored Technology Solutions
Prosigns: Transforming Business with Tailored Technology Solutions
 
Vitthal Shirke Microservices Resume Montevideo
Vitthal Shirke Microservices Resume MontevideoVitthal Shirke Microservices Resume Montevideo
Vitthal Shirke Microservices Resume Montevideo
 
Accelerate Enterprise Software Engineering with Platformless
Accelerate Enterprise Software Engineering with PlatformlessAccelerate Enterprise Software Engineering with Platformless
Accelerate Enterprise Software Engineering with Platformless
 
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
 
De mooiste recreatieve routes ontdekken met RouteYou en FME
De mooiste recreatieve routes ontdekken met RouteYou en FMEDe mooiste recreatieve routes ontdekken met RouteYou en FME
De mooiste recreatieve routes ontdekken met RouteYou en FME
 
SOCRadar Research Team: Latest Activities of IntelBroker
SOCRadar Research Team: Latest Activities of IntelBrokerSOCRadar Research Team: Latest Activities of IntelBroker
SOCRadar Research Team: Latest Activities of IntelBroker
 
AI/ML Infra Meetup | Perspective on Deep Learning Framework
AI/ML Infra Meetup | Perspective on Deep Learning FrameworkAI/ML Infra Meetup | Perspective on Deep Learning Framework
AI/ML Infra Meetup | Perspective on Deep Learning Framework
 
Facemoji Keyboard released its 2023 State of Emoji report, outlining the most...
Facemoji Keyboard released its 2023 State of Emoji report, outlining the most...Facemoji Keyboard released its 2023 State of Emoji report, outlining the most...
Facemoji Keyboard released its 2023 State of Emoji report, outlining the most...
 
Mastering Windows 7 A Comprehensive Guide for Power Users .pdf
Mastering Windows 7 A Comprehensive Guide for Power Users .pdfMastering Windows 7 A Comprehensive Guide for Power Users .pdf
Mastering Windows 7 A Comprehensive Guide for Power Users .pdf
 
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERRORTROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
TROUBLESHOOTING 9 TYPES OF OUTOFMEMORYERROR
 
A Comprehensive Appium Guide for Hybrid App Automation Testing.pdf
A Comprehensive Appium Guide for Hybrid App Automation Testing.pdfA Comprehensive Appium Guide for Hybrid App Automation Testing.pdf
A Comprehensive Appium Guide for Hybrid App Automation Testing.pdf
 
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.ILBeyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
Beyond Event Sourcing - Embracing CRUD for Wix Platform - Java.IL
 
Using IESVE for Room Loads Analysis - Australia & New Zealand
Using IESVE for Room Loads Analysis - Australia & New ZealandUsing IESVE for Room Loads Analysis - Australia & New Zealand
Using IESVE for Room Loads Analysis - Australia & New Zealand
 
Designing for Privacy in Amazon Web Services
Designing for Privacy in Amazon Web ServicesDesigning for Privacy in Amazon Web Services
Designing for Privacy in Amazon Web Services
 
top nidhi software solution freedownload
top nidhi software solution freedownloadtop nidhi software solution freedownload
top nidhi software solution freedownload
 
Crafting the Perfect Measurement Sheet with PLM Integration
Crafting the Perfect Measurement Sheet with PLM IntegrationCrafting the Perfect Measurement Sheet with PLM Integration
Crafting the Perfect Measurement Sheet with PLM Integration
 

Single page applications with AngularJS