AngularJS has become popular as user interface framework for developing web applications. Angular is more than just data binding to HTML, its an MVC stack that runs in the browser. This talk will cover the different features of Angular that make it a an MVC stack and show how it fits into and benefits an overall application architecture. Follow us on Twitter for up to date information about our Meetups! @LogicalAdv

1. LogicalAdvantage.com | January 2015
/LogicalAdvantage @LogicalAdvantage
TM
Intro to AngularJS
More than just data binding
WE ARE HIRING!

2. LogicalAdvantage.com | January 2015
/LogicalAdvantage @LogicalAdvantage
TM
Agenda
• Overview of AngularJS
• Focus more on structure and use than
features
• Highlight more complex areas
• Provide a starting point for you to begin
analyzing for yourself
• Review some code
WE ARE HIRING! 2

3. LogicalAdvantage.com | January 2015
/LogicalAdvantage @LogicalAdvantage
TM
What is it?
• Angular allows you to extend HTML
vocabulary to provide dynamic behavior.
• Provides an MVC pattern for client side
(browser) application development.
• Developed by a team at Google
• http://angularjs.org
WE ARE HIRING! 3

4. From:
h+p://larseidnes.com/2014/11/05/angularjs-­‐the-­‐bad-­‐parts/
LogicalAdvantage.com | January 2015
/LogicalAdvantage @LogicalAdvantage
TM
Why are we talking about it?
WE ARE HIRING! 4

5. LogicalAdvantage.com | January 2015
/LogicalAdvantage @LogicalAdvantage
TM
Browser becomes another device
WE ARE HIRING! 5
WebAPI
Data

6. LogicalAdvantage.com | January 2015
/LogicalAdvantage @LogicalAdvantage
TM
Basic Angular Functionality
• https://angularjs.org
WE ARE HIRING! 6

7. LogicalAdvantage.com | January 2015
/LogicalAdvantage @LogicalAdvantage
TM
How the Data Bind Magic works
Browser
DOM
Angular
Shadow
DOM
WE ARE HIRING! 7
View
Model
$digest
cycle

8. LogicalAdvantage.com | January 2015
/LogicalAdvantage @LogicalAdvantage
TM
Isn’t MVC already on the server?
• Yes. Using Asp.Net MVC there is a
server side MVC pattern.
• Using AngularJS there is a second
MVC pattern in the browser.
• The two are independent of each
other.
WE ARE HIRING! 8

9. LogicalAdvantage.com | January 2015
/LogicalAdvantage @LogicalAdvantage
TM
Angular View
WE ARE HIRING! 9

10. LogicalAdvantage.com | January 2015
/LogicalAdvantage @LogicalAdvantage
TM
Angular Controller
WE ARE HIRING! 10

11. LogicalAdvantage.com | January 2015
/LogicalAdvantage @LogicalAdvantage
TM
Angular Model
Vm
viewmodel
WE ARE HIRING! 11

12. LogicalAdvantage.com | January 2015
/LogicalAdvantage @LogicalAdvantage
TM
Angular App – Main container
WE ARE HIRING! 12

13. LogicalAdvantage.com | January 2015
/LogicalAdvantage @LogicalAdvantage
TM
Angular Service
WE ARE HIRING! 13

14. LogicalAdvantage.com | January 2015
/LogicalAdvantage @LogicalAdvantage
TM
Directives – UI Components
• Directives provide a mechanism for
componentizing the UI.
WE ARE HIRING! 14

15. LogicalAdvantage.com | January 2015
/LogicalAdvantage @LogicalAdvantage
TM
Angular Modules provide Testability
• Using tools such as JasmineJS and
Qunit each module (Controller,
Service, Directive) can be unit tested
independently.
WE ARE HIRING! 15

16. LogicalAdvantage.com | January 2015
/LogicalAdvantage @LogicalAdvantage
TM
Validation
• Always validate on the server as well
as the UI.
• http://scotch.io/tutorials/javascript/
angularjs-form-validation
WE ARE HIRING! 16

17. LogicalAdvantage.com | January 2015
/LogicalAdvantage @LogicalAdvantage
TM
Angular Coding Standards
• From Angular
https://docs.google.com/document/d/1XXMvReO8-
Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub
• Opinionated Style from John Papa
https://github.com/johnpapa/angularjs-styleguide
WE ARE HIRING! 17

18. LogicalAdvantage.com | January 2015
/LogicalAdvantage @LogicalAdvantage
TM
References
• http://angularjs.org
• http://larseidnes.com/2014/11/05/angularjs-the-bad-parts/
• http://scotch.io/tutorials/javascript/angularjs-form-validation
WE ARE HIRING! 18