building disaster recovery plans with azure site recovery, hyper

Building Rich Apps with AngularJS on ASP.NETJohn Papa@john_papawww.johnpapa.net

http://www.johnpapa.net/

The Gamification of AngularJS

You get results quickly

But then you hit some walls

Let’s get over those

@john_papaANGULARJS PATTERNS10TIPSJOHN PAPA

ANGULARJS PATTERNS @john_papa

Time

Prod

uctiv

ity

Data-binding rocks!

What? I’m going back to jQuery!

Wicked cool!

Why the heck is it so difficult?!

Thumbs Up for Dependency

Injection!

OMG, how can I back out of this?

Maybe nobody will notice if I switch to Silverlight

Angular Rocks!

Modularity is the bomb!

AngularJS Emotional Scale

“Building large scale apps requires some planning”


Demos From Today

My AngularJS courses at Pluralsighthttp://jpapa.me/spangz

Demos available on githubhttps://github.com/johnpapa/ng-demos

Work in ProgressDemos available on github

http://jpapa.me/ng-z-wip Demos available on github

https://github.com/johnpapa/ng-demos

http://jpapa.me/spangz



http://jpapa.me/ng-z-wip





Agenda1. How the Components

Fit2. HotTowel3. Coding Patterns4. Structuring Your

Project5. Modularity

6. Tracing Data7. Exception

Handling8. Rich Data9. Validation10.Local Storage /

WIP

How the Components Fit Together1

Knowing which “thing” you need


Module

View Controller

FactoriesDirectives

Routes

$scope

Component Hierarchy


ViewThe HTMLContains built-in AngularJS directivesng-controllerng-clickng-model{{ }}ng-repeat


ControllerHandles the View’s needsPresentation logicPaired with a ViewEither directly or through delegation


$scopeThe glue between the Controller and ViewThe ViewModelData (and function) binding


ModulesContainers of the related featuresCan have multipleModules depending on modules

Inject functionalityLike a DLLBut not really


RoutesOn URL change, go to this ViewDefines the app navigationIn module.configUse $routeProvider


DirectivesHow AngularJS extends HTMLEncapsulate reusable widgetsBuilt-in directives cover the core needs


FactoriesA Controller’s best friendSingleton shared servicesIdeal for abstracting LoggerLocal storageData services


Module

View Controller

FactoriesDirectives

Routes

$scope

Component Hierarchy

Jump-Start with HotTowel2

“You don’t want to go to a SPA without one”

John Papa

Hot Towel

Getting started should be easy

Let’s remove some friction


Project TemplateLayoutCSSFonts

AngularOther Commonly Used Vendor ScriptsStarter FilesControllers, Views, Services


Getting HotTowel-AngularGithubhttps://github.com/johnpapa/ng-demos

Nuget

Jump-Start with HotTowelDEMO

Coding Patterns3

Productivity and maintainability


Each Component Has 1 Job

Expose functionality


Stay Above the Fold

Immediately Identifiable


AngularJS File TemplatesVisual Studio 2013http://sidewaffle.com

WebStorm 7 and 8http://jpapa.me/ngstormtmpl

Coding Patterns with SideWaffleDEMO

Structuring Your Project4


Guidelines for Organizing AngularJS

Locating our code is easy

Identify code at a glance

Flat structure as long as we can

Try to stay DRY

LIFT

http://jpapa.me/1iVpwkp


By Type By Feature

“If someone says you are doing it wrong, ignore them”

Dan Wahlin

Structuring Your Project


Options for Structuring Your FilesBy Type? Folders for views, controllers, factories, directives

By Feature?Folders for Speakers, Tracks, Sessions?

Somewhere in the middle?Folders for feature, then by type?

Best Advice: Be Consistent!

http://jpapa.me/ngstructure

Structuring Your ProjectDEMO

Modularity5

Iterative development.

Reusable components.


One Monolithic App?


One Monolithic App?Reusable Components to Assemble an App


ModulesContainer of related services, widgets, views, controllers

Modules can depend on other modules

Promotes iterative development


ControllerFactoryDirective

Routes

Module

ConfigServiceProvider

Modules are Containers

Value

Filter


Categories of Dependencies


modularApp

avengers dashboard widgets layout

core

ngAnimate ngRoute common ui-bootstrap

Modularity

DEMO

Tracing Data6

Following the path through the

components with promises


View Controller Data Factory

$http

$scope

Tracing the Data Calls

Web Service

Promise handles async

response

Angular digest cycle

sees the data

Tracing Data in the BrowserDEMO

Exception Handling7

1 place to handle all exceptions


Catch and Handle all ExceptionsLocal and Remote LoggingOptional Dev vs Debug ModesConsistency


Decorate the $exceptionHandler Service

Exception HandlingDEMO

Rich Data: BreezeJS8

When you do more than just get data


Why use Rich Data?$http gives you access to the dataAfter that, how do we …Track changesManage changesets CacheShare


Multple views of the same object?


Propogate Changes?


Do you know which entities are dirty?


SessionsTracksTimeSlots RoomsSpeakers

BreezeJS

DEMO

Validation9


Do you validate changes on the clientfor a better user experience?


Model ValidationWhere does presentation logic belong? Validating in the HTMLRepeat same validation in many placesDoesn’t handle validating model changes

So how do we validate?

Validate in the model

Validation on the server is mandatory.

Validation on the client is a user experience.

Model Validation

DEMO

Work in Progress withLocal Storage10


Why risk losing lose changes?


OptionsYou leave, you lose your changesLost changes

You cannot leave!Annoying pop-ups

Auto-save as the user typesWhat about invalid or incomplete data?

Give up?

Work in Progress with Local StorageDEMO


Breeze Import/Expor

tAPI’s

Angular Directives

Local Storage

Angular Services

Key Technical Features


Listen to breeze

Broadcast a custom message

How Do We Know When to Stash?


Stash all WIP

Serialize entity, changes and

state

Exporting


Return the newly imported entity

Grab the stashed WIP

Import the WIP into Breeze

Import


Update the asterisk and counter

The WIP data

Who tells the directive when WIP

changes

WIP directiveTell the User


How Do We Interact With WIP?


Recap1. How the Components

Fit2. HotTowel3. Coding Patterns4. Structuring Your

Project5. Modularity

6. Tracing Data7. Exception

Handling8. Rich Data9. Validation10.Local Storage /

WIP


Demos From Today

My AngularJS courses at Pluralsighthttp://jpapa.me/spangz

Demos available on githubhttps://github.com/johnpapa/ng-demos

Work in ProgressDemos available on github

http://jpapa.me/ng-z-wip Demos available on github


http://jpapa.me/spangz








http://pluralsight.com/training/Authors/Details/john-papa

Building Apps with Angular and Breeze

http://pluralsight.com/training/Authors/Details/john-papa


ResourcesLearning

Microsoft Certification & Training Resourceswww.microsoft.com/learning

msdnResources for Developershttp://microsoft.com/msdn

TechNetResources for IT Professionalshttp://microsoft.com/technet

Sessions on Demandhttp://channel9.msdn.com/Events/TechEd

http://www.microsoft.com/learning

http://microsoft.com/msdn

http://microsoft.com/technet

http://channel9.msdn.com/Events/TechEd

http://channel9.msdn.com/Events/TechEd


Complete an evaluation and enter to win!


Evaluate this session

Scan this QR code to evaluate this session.

© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

building disaster recovery plans with azure site recovery, hyper

Documents