LogicalAdvantage.com | January 2015 /LogicalAdvantage @LogicalAdvantage

TM

Intro to AngularJS More than just data binding

WE ARE HIRING!

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

2  WE ARE HIRING!

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

3  WE ARE HIRING!

   

LogicalAdvantage.com | January 2015 /LogicalAdvantage @LogicalAdvantage

TM

Why are we talking about it?

4  WE ARE HIRING!

From:  h+p://larseidnes.com/2014/11/05/angularjs-­‐the-­‐bad-­‐parts/  

LogicalAdvantage.com | January 2015 /LogicalAdvantage @LogicalAdvantage

TM

Browser becomes another device

5  WE ARE HIRING!

WebAPI  

Data  

LogicalAdvantage.com | January 2015 /LogicalAdvantage @LogicalAdvantage

TM

Basic Angular Functionality

•  https://angularjs.org

6  WE ARE HIRING!

LogicalAdvantage.com | January 2015 /LogicalAdvantage @LogicalAdvantage

TM

How the Data Bind Magic works

7  WE ARE HIRING!

Browser  DOM   Angular  Shadow  DOM   View  Model  

$digest  cycle  

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.

8  WE ARE HIRING!

LogicalAdvantage.com | January 2015 /LogicalAdvantage @LogicalAdvantage

TM

Angular View

9  WE ARE HIRING!

LogicalAdvantage.com | January 2015 /LogicalAdvantage @LogicalAdvantage

TM

Angular Controller

10  WE ARE HIRING!

LogicalAdvantage.com | January 2015 /LogicalAdvantage @LogicalAdvantage

TM

Angular Model

11  WE ARE HIRING!

Vm  viewmodel  

LogicalAdvantage.com | January 2015 /LogicalAdvantage @LogicalAdvantage

TM

Angular App – Main container

12  WE ARE HIRING!

LogicalAdvantage.com | January 2015 /LogicalAdvantage @LogicalAdvantage

TM

Angular Service

13  WE ARE HIRING!

LogicalAdvantage.com | January 2015 /LogicalAdvantage @LogicalAdvantage

TM

Directives – UI Components

•  Directives provide a mechanism for componentizing the UI.

14  WE ARE HIRING!

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.

15  WE ARE HIRING!

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

16  WE ARE HIRING!

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

17  WE ARE HIRING!

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

18  WE ARE HIRING!