SlideShare a Scribd company logo
A Brief Intro to

By Alan Hietala
@alanhietala
Who Am I?
• Software Developer at ecobee Inc.
• Focused on development of web and mobile applications in
Javascript

What Tools am I using?
•
•
•
•

Webstorm
Yeoman
Grunt
Bower

• Karma Runner
• Jasmine
What is AngularJS?
• Teaches your browser to understand new HTML via
directives.
• 2 Way Data binding (changes to the model reflected
in the UI and vice versa)
• A toolkit of new HTML for the browser to
understand out of the box
• MVC separation of concerns
• Injectable services to handle common tasks such as
XHR, query string manipulation.
Live Demo Time!
•
•
•
•

Attendance list application
Add new attendees
Search Attendees
Cross off Attendees

Full source with boilerplate / solutions available at:

http://github.com/AlanHietala/DevTO

More Related Content

What's hot

Sviluppare app per office
Sviluppare app per officeSviluppare app per office
Sviluppare app per office
Fabio Franzini
 
A Dynamic Analysis Framework for Front-end JavaScript
A Dynamic Analysis Framework for Front-end JavaScriptA Dynamic Analysis Framework for Front-end JavaScript
A Dynamic Analysis Framework for Front-end JavaScript
Liang Gong
 
Codemotion 2013 - Designing complex applications using html5 and knockoutjs
Codemotion 2013 - Designing complex applications using html5 and knockoutjsCodemotion 2013 - Designing complex applications using html5 and knockoutjs
Codemotion 2013 - Designing complex applications using html5 and knockoutjsFabio Franzini
 
tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365 tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365
Fabio Franzini
 
JavaScript MVC Frameworks: Backbone, Ember and Angular JS
JavaScript MVC Frameworks: Backbone, Ember and Angular JSJavaScript MVC Frameworks: Backbone, Ember and Angular JS
JavaScript MVC Frameworks: Backbone, Ember and Angular JS
Harbinger Systems - HRTech Builder of Choice
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
Abhishek Sur
 
Headless cms architecture
Headless cms architectureHeadless cms architecture
Headless cms architecture
Kevin Wenger
 
Code igniter overview
Code igniter overviewCode igniter overview
Code igniter overview
umesh patil
 
Concurrency programming
Concurrency programmingConcurrency programming
Concurrency programmingKeesun Baik
 
Automate it with Azure Functions
Automate it with Azure FunctionsAutomate it with Azure Functions
Automate it with Azure Functions
Jaap Brasser
 
SenchaCon 2016: The Changing Landscape of JavaScript Testing - Joel Watson an...
SenchaCon 2016: The Changing Landscape of JavaScript Testing - Joel Watson an...SenchaCon 2016: The Changing Landscape of JavaScript Testing - Joel Watson an...
SenchaCon 2016: The Changing Landscape of JavaScript Testing - Joel Watson an...
Sencha
 
Microsoft Flow and PowerShell combined to automate everything
Microsoft Flow and PowerShell combined to automate everythingMicrosoft Flow and PowerShell combined to automate everything
Microsoft Flow and PowerShell combined to automate everything
Jaap Brasser
 
From PowerShell Function to Serverless code with Azure Functions
From PowerShell Function to Serverless code with Azure FunctionsFrom PowerShell Function to Serverless code with Azure Functions
From PowerShell Function to Serverless code with Azure Functions
Jaap Brasser
 
Workflows - The Rise of the Machines
Workflows - The Rise of the MachinesWorkflows - The Rise of the Machines
Workflows - The Rise of the Machines
Kevin Wenger
 
MSDN - ASP.NET MVC
MSDN - ASP.NET MVCMSDN - ASP.NET MVC
MSDN - ASP.NET MVC
Maarten Balliauw
 
Automate Anything with Microsoft Flow
Automate Anything with Microsoft FlowAutomate Anything with Microsoft Flow
Automate Anything with Microsoft Flow
Jaap Brasser
 
Building real-time-collaborative-web-applications
Building real-time-collaborative-web-applicationsBuilding real-time-collaborative-web-applications
Building real-time-collaborative-web-applications
Harbinger Systems - HRTech Builder of Choice
 
Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!
Jeremy Likness
 
Bridge the gap with Chat Automation
Bridge the gap with Chat AutomationBridge the gap with Chat Automation
Bridge the gap with Chat Automation
Jaap Brasser
 

What's hot (20)

Sviluppare app per office
Sviluppare app per officeSviluppare app per office
Sviluppare app per office
 
A Dynamic Analysis Framework for Front-end JavaScript
A Dynamic Analysis Framework for Front-end JavaScriptA Dynamic Analysis Framework for Front-end JavaScript
A Dynamic Analysis Framework for Front-end JavaScript
 
Codemotion 2013 - Designing complex applications using html5 and knockoutjs
Codemotion 2013 - Designing complex applications using html5 and knockoutjsCodemotion 2013 - Designing complex applications using html5 and knockoutjs
Codemotion 2013 - Designing complex applications using html5 and knockoutjs
 
tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365 tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365
 
JavaScript MVC Frameworks: Backbone, Ember and Angular JS
JavaScript MVC Frameworks: Backbone, Ember and Angular JSJavaScript MVC Frameworks: Backbone, Ember and Angular JS
JavaScript MVC Frameworks: Backbone, Ember and Angular JS
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
 
Headless cms architecture
Headless cms architectureHeadless cms architecture
Headless cms architecture
 
Code igniter overview
Code igniter overviewCode igniter overview
Code igniter overview
 
Concurrency programming
Concurrency programmingConcurrency programming
Concurrency programming
 
Automate it with Azure Functions
Automate it with Azure FunctionsAutomate it with Azure Functions
Automate it with Azure Functions
 
SenchaCon 2016: The Changing Landscape of JavaScript Testing - Joel Watson an...
SenchaCon 2016: The Changing Landscape of JavaScript Testing - Joel Watson an...SenchaCon 2016: The Changing Landscape of JavaScript Testing - Joel Watson an...
SenchaCon 2016: The Changing Landscape of JavaScript Testing - Joel Watson an...
 
Microsoft Flow and PowerShell combined to automate everything
Microsoft Flow and PowerShell combined to automate everythingMicrosoft Flow and PowerShell combined to automate everything
Microsoft Flow and PowerShell combined to automate everything
 
From PowerShell Function to Serverless code with Azure Functions
From PowerShell Function to Serverless code with Azure FunctionsFrom PowerShell Function to Serverless code with Azure Functions
From PowerShell Function to Serverless code with Azure Functions
 
Workflows - The Rise of the Machines
Workflows - The Rise of the MachinesWorkflows - The Rise of the Machines
Workflows - The Rise of the Machines
 
MSDN - ASP.NET MVC
MSDN - ASP.NET MVCMSDN - ASP.NET MVC
MSDN - ASP.NET MVC
 
Automate Anything with Microsoft Flow
Automate Anything with Microsoft FlowAutomate Anything with Microsoft Flow
Automate Anything with Microsoft Flow
 
Building real-time-collaborative-web-applications
Building real-time-collaborative-web-applicationsBuilding real-time-collaborative-web-applications
Building real-time-collaborative-web-applications
 
About Flux
About FluxAbout Flux
About Flux
 
Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!
 
Bridge the gap with Chat Automation
Bridge the gap with Chat AutomationBridge the gap with Chat Automation
Bridge the gap with Chat Automation
 

Similar to Alan Hietala - A Brief Into to AngularJS

Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013偉格 高
 
Optimus XPages: An Explosion of Techniques and Best Practices
Optimus XPages: An Explosion of Techniques and Best PracticesOptimus XPages: An Explosion of Techniques and Best Practices
Optimus XPages: An Explosion of Techniques and Best Practices
Teamstudio
 
Fed London - January 2015
Fed London - January 2015Fed London - January 2015
Fed London - January 2015
Phil Leggetter
 
All about that reactive ui
All about that reactive uiAll about that reactive ui
All about that reactive ui
Paul van Zyl
 
Presentation
PresentationPresentation
Presentation
Nikhilesh Sharma
 
DIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development todayDIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development today
Bojan Veljanovski
 
December OpenNTF Webinar: The Volt MX LotusScript Toolkit
December OpenNTF Webinar: The Volt MX LotusScript ToolkitDecember OpenNTF Webinar: The Volt MX LotusScript Toolkit
December OpenNTF Webinar: The Volt MX LotusScript Toolkit
Howard Greenberg
 
Big ideas in small packages - How microservices helped us to scale our vision
Big ideas in small packages  - How microservices helped us to scale our visionBig ideas in small packages  - How microservices helped us to scale our vision
Big ideas in small packages - How microservices helped us to scale our vision
Sebastian Schleicher
 
Patterns and practices for building enterprise-scale HTML5 apps
Patterns and practices for building enterprise-scale HTML5 appsPatterns and practices for building enterprise-scale HTML5 apps
Patterns and practices for building enterprise-scale HTML5 apps
Phil Leggetter
 
Pearls and Must-Have Tools for the Modern Web / .NET Developer
Pearls and Must-Have Tools for the Modern Web / .NET DeveloperPearls and Must-Have Tools for the Modern Web / .NET Developer
Pearls and Must-Have Tools for the Modern Web / .NET Developer
Ofer Zelig
 
Google chrome extensions
Google chrome extensionsGoogle chrome extensions
Google chrome extensionslillianabe
 
Html5
Html5Html5
Html5
Nasla C.K
 
SummerTerm_PPT.pptx
SummerTerm_PPT.pptxSummerTerm_PPT.pptx
SummerTerm_PPT.pptx
Uday742276
 
Nonintrusive semantic html5
Nonintrusive semantic html5Nonintrusive semantic html5
Nonintrusive semantic html5
Muhamad Arief
 
Cloud Foundry API for Fun and Ops
Cloud Foundry API for Fun and OpsCloud Foundry API for Fun and Ops
Cloud Foundry API for Fun and Ops
Chris DeLashmutt
 
Angular JS - Introduction
Angular JS - IntroductionAngular JS - Introduction
Angular JS - Introduction
Sagar Acharya
 
Frankly Chat Competitive Analysis
Frankly Chat Competitive AnalysisFrankly Chat Competitive Analysis
Frankly Chat Competitive Analysis
Lauren P. Dodge
 
Application Lifecycle Management
Application Lifecycle ManagementApplication Lifecycle Management
Application Lifecycle Management
Amazon Web Services
 
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Ganesh Kondal
 

Similar to Alan Hietala - A Brief Into to AngularJS (20)

Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013Web Developer Tools for ICOS 2013
Web Developer Tools for ICOS 2013
 
Optimus XPages: An Explosion of Techniques and Best Practices
Optimus XPages: An Explosion of Techniques and Best PracticesOptimus XPages: An Explosion of Techniques and Best Practices
Optimus XPages: An Explosion of Techniques and Best Practices
 
Fed London - January 2015
Fed London - January 2015Fed London - January 2015
Fed London - January 2015
 
All about that reactive ui
All about that reactive uiAll about that reactive ui
All about that reactive ui
 
Presentation
PresentationPresentation
Presentation
 
DIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development todayDIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development today
 
December OpenNTF Webinar: The Volt MX LotusScript Toolkit
December OpenNTF Webinar: The Volt MX LotusScript ToolkitDecember OpenNTF Webinar: The Volt MX LotusScript Toolkit
December OpenNTF Webinar: The Volt MX LotusScript Toolkit
 
Big ideas in small packages - How microservices helped us to scale our vision
Big ideas in small packages  - How microservices helped us to scale our visionBig ideas in small packages  - How microservices helped us to scale our vision
Big ideas in small packages - How microservices helped us to scale our vision
 
Patterns and practices for building enterprise-scale HTML5 apps
Patterns and practices for building enterprise-scale HTML5 appsPatterns and practices for building enterprise-scale HTML5 apps
Patterns and practices for building enterprise-scale HTML5 apps
 
Protractor survival guide
Protractor survival guideProtractor survival guide
Protractor survival guide
 
Pearls and Must-Have Tools for the Modern Web / .NET Developer
Pearls and Must-Have Tools for the Modern Web / .NET DeveloperPearls and Must-Have Tools for the Modern Web / .NET Developer
Pearls and Must-Have Tools for the Modern Web / .NET Developer
 
Google chrome extensions
Google chrome extensionsGoogle chrome extensions
Google chrome extensions
 
Html5
Html5Html5
Html5
 
SummerTerm_PPT.pptx
SummerTerm_PPT.pptxSummerTerm_PPT.pptx
SummerTerm_PPT.pptx
 
Nonintrusive semantic html5
Nonintrusive semantic html5Nonintrusive semantic html5
Nonintrusive semantic html5
 
Cloud Foundry API for Fun and Ops
Cloud Foundry API for Fun and OpsCloud Foundry API for Fun and Ops
Cloud Foundry API for Fun and Ops
 
Angular JS - Introduction
Angular JS - IntroductionAngular JS - Introduction
Angular JS - Introduction
 
Frankly Chat Competitive Analysis
Frankly Chat Competitive AnalysisFrankly Chat Competitive Analysis
Frankly Chat Competitive Analysis
 
Application Lifecycle Management
Application Lifecycle ManagementApplication Lifecycle Management
Application Lifecycle Management
 
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5
 

More from #DevTO

Eli Aleyner & Mani Fazeli - What does it take to find a co founder
Eli Aleyner & Mani Fazeli - What does it take to find a co founderEli Aleyner & Mani Fazeli - What does it take to find a co founder
Eli Aleyner & Mani Fazeli - What does it take to find a co founder
#DevTO
 
Greg Wilson - We Know (but ignore) More Than We Think
Greg Wilson - We Know (but ignore) More Than We ThinkGreg Wilson - We Know (but ignore) More Than We Think
Greg Wilson - We Know (but ignore) More Than We Think
#DevTO
 
Joey Coleman - Building an Open Data Ecosystem for all to access
Joey Coleman - Building an Open Data Ecosystem for all to accessJoey Coleman - Building an Open Data Ecosystem for all to access
Joey Coleman - Building an Open Data Ecosystem for all to access
#DevTO
 
Peter Newhook - Make Data Dance
Peter Newhook - Make Data DancePeter Newhook - Make Data Dance
Peter Newhook - Make Data Dance
#DevTO
 
Yuriy Blokhin - Building a Development Platform
Yuriy Blokhin - Building a Development PlatformYuriy Blokhin - Building a Development Platform
Yuriy Blokhin - Building a Development Platform
#DevTO
 
Katherine Hague - The Decentralize Future of eCommerce
 Katherine Hague - The Decentralize Future of eCommerce Katherine Hague - The Decentralize Future of eCommerce
Katherine Hague - The Decentralize Future of eCommerce
#DevTO
 
Farhan Thawar - Managing an Agile Team
Farhan Thawar - Managing an Agile TeamFarhan Thawar - Managing an Agile Team
Farhan Thawar - Managing an Agile Team
#DevTO
 
Tyson Kingsbury - Anatomy of a Logo
Tyson Kingsbury  - Anatomy of a LogoTyson Kingsbury  - Anatomy of a Logo
Tyson Kingsbury - Anatomy of a Logo
#DevTO
 
Kevin MacDonald - Anyone can make maps
Kevin MacDonald - Anyone can make mapsKevin MacDonald - Anyone can make maps
Kevin MacDonald - Anyone can make maps
#DevTO
 
Brian Hogg - Web Apps using HTML5 and JS
Brian Hogg - Web Apps using HTML5 and JSBrian Hogg - Web Apps using HTML5 and JS
Brian Hogg - Web Apps using HTML5 and JS
#DevTO
 
Shoukry Kattan - Titanium Mobile. Cross Platform Mobile Apps
Shoukry Kattan - Titanium Mobile. Cross Platform Mobile AppsShoukry Kattan - Titanium Mobile. Cross Platform Mobile Apps
Shoukry Kattan - Titanium Mobile. Cross Platform Mobile Apps
#DevTO
 
Marc Roginsky - How to Deliver Effective Client-facing Presentations
Marc Roginsky - How to Deliver Effective Client-facing PresentationsMarc Roginsky - How to Deliver Effective Client-facing Presentations
Marc Roginsky - How to Deliver Effective Client-facing Presentations
#DevTO
 
Shey Sewani - RabbitMQ At FreshBooks
Shey Sewani - RabbitMQ At FreshBooksShey Sewani - RabbitMQ At FreshBooks
Shey Sewani - RabbitMQ At FreshBooks
#DevTO
 
Alex Stobe - Dev Networking
Alex Stobe - Dev NetworkingAlex Stobe - Dev Networking
Alex Stobe - Dev Networking
#DevTO
 

More from #DevTO (14)

Eli Aleyner & Mani Fazeli - What does it take to find a co founder
Eli Aleyner & Mani Fazeli - What does it take to find a co founderEli Aleyner & Mani Fazeli - What does it take to find a co founder
Eli Aleyner & Mani Fazeli - What does it take to find a co founder
 
Greg Wilson - We Know (but ignore) More Than We Think
Greg Wilson - We Know (but ignore) More Than We ThinkGreg Wilson - We Know (but ignore) More Than We Think
Greg Wilson - We Know (but ignore) More Than We Think
 
Joey Coleman - Building an Open Data Ecosystem for all to access
Joey Coleman - Building an Open Data Ecosystem for all to accessJoey Coleman - Building an Open Data Ecosystem for all to access
Joey Coleman - Building an Open Data Ecosystem for all to access
 
Peter Newhook - Make Data Dance
Peter Newhook - Make Data DancePeter Newhook - Make Data Dance
Peter Newhook - Make Data Dance
 
Yuriy Blokhin - Building a Development Platform
Yuriy Blokhin - Building a Development PlatformYuriy Blokhin - Building a Development Platform
Yuriy Blokhin - Building a Development Platform
 
Katherine Hague - The Decentralize Future of eCommerce
 Katherine Hague - The Decentralize Future of eCommerce Katherine Hague - The Decentralize Future of eCommerce
Katherine Hague - The Decentralize Future of eCommerce
 
Farhan Thawar - Managing an Agile Team
Farhan Thawar - Managing an Agile TeamFarhan Thawar - Managing an Agile Team
Farhan Thawar - Managing an Agile Team
 
Tyson Kingsbury - Anatomy of a Logo
Tyson Kingsbury  - Anatomy of a LogoTyson Kingsbury  - Anatomy of a Logo
Tyson Kingsbury - Anatomy of a Logo
 
Kevin MacDonald - Anyone can make maps
Kevin MacDonald - Anyone can make mapsKevin MacDonald - Anyone can make maps
Kevin MacDonald - Anyone can make maps
 
Brian Hogg - Web Apps using HTML5 and JS
Brian Hogg - Web Apps using HTML5 and JSBrian Hogg - Web Apps using HTML5 and JS
Brian Hogg - Web Apps using HTML5 and JS
 
Shoukry Kattan - Titanium Mobile. Cross Platform Mobile Apps
Shoukry Kattan - Titanium Mobile. Cross Platform Mobile AppsShoukry Kattan - Titanium Mobile. Cross Platform Mobile Apps
Shoukry Kattan - Titanium Mobile. Cross Platform Mobile Apps
 
Marc Roginsky - How to Deliver Effective Client-facing Presentations
Marc Roginsky - How to Deliver Effective Client-facing PresentationsMarc Roginsky - How to Deliver Effective Client-facing Presentations
Marc Roginsky - How to Deliver Effective Client-facing Presentations
 
Shey Sewani - RabbitMQ At FreshBooks
Shey Sewani - RabbitMQ At FreshBooksShey Sewani - RabbitMQ At FreshBooks
Shey Sewani - RabbitMQ At FreshBooks
 
Alex Stobe - Dev Networking
Alex Stobe - Dev NetworkingAlex Stobe - Dev Networking
Alex Stobe - Dev Networking
 

Alan Hietala - A Brief Into to AngularJS

  • 1. A Brief Intro to By Alan Hietala @alanhietala
  • 2. Who Am I? • Software Developer at ecobee Inc. • Focused on development of web and mobile applications in Javascript What Tools am I using? • • • • Webstorm Yeoman Grunt Bower • Karma Runner • Jasmine
  • 3. What is AngularJS? • Teaches your browser to understand new HTML via directives. • 2 Way Data binding (changes to the model reflected in the UI and vice versa) • A toolkit of new HTML for the browser to understand out of the box • MVC separation of concerns • Injectable services to handle common tasks such as XHR, query string manipulation.
  • 4. Live Demo Time! • • • • Attendance list application Add new attendees Search Attendees Cross off Attendees Full source with boilerplate / solutions available at: http://github.com/AlanHietala/DevTO