View
232
Download
3
Category
Preview:
Citation preview
Building Rich Apps with AngularJS on ASP.NETJohn Papa@john_papawww.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”
ANGULARJS PATTERNS @john_papa
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
ANGULARJS PATTERNS @john_papa
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
ANGULARJS PATTERNS @john_papa
Module
View Controller
FactoriesDirectives
Routes
$scope
Component Hierarchy
ANGULARJS PATTERNS @john_papa
ViewThe HTMLContains built-in AngularJS directivesng-controllerng-clickng-model{{ }}ng-repeat
ANGULARJS PATTERNS @john_papa
ControllerHandles the View’s needsPresentation logicPaired with a ViewEither directly or through delegation
ANGULARJS PATTERNS @john_papa
$scopeThe glue between the Controller and ViewThe ViewModelData (and function) binding
ANGULARJS PATTERNS @john_papa
ModulesContainers of the related featuresCan have multipleModules depending on modules
Inject functionalityLike a DLLBut not really
ANGULARJS PATTERNS @john_papa
RoutesOn URL change, go to this ViewDefines the app navigationIn module.configUse $routeProvider
ANGULARJS PATTERNS @john_papa
DirectivesHow AngularJS extends HTMLEncapsulate reusable widgetsBuilt-in directives cover the core needs
ANGULARJS PATTERNS @john_papa
FactoriesA Controller’s best friendSingleton shared servicesIdeal for abstracting LoggerLocal storageData services
ANGULARJS PATTERNS @john_papa
ANGULARJS PATTERNS @john_papa
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
ANGULARJS PATTERNS @john_papa
Project TemplateLayoutCSSFonts
AngularOther Commonly Used Vendor ScriptsStarter FilesControllers, Views, Services
ANGULARJS PATTERNS @john_papa
ANGULARJS PATTERNS @john_papa
Getting HotTowel-AngularGithubhttps://github.com/johnpapa/ng-demos
Nuget
Jump-Start with HotTowelDEMO
Coding Patterns3
Productivity and maintainability
ANGULARJS PATTERNS @john_papa
Each Component Has 1 Job
Expose functionality
ANGULARJS PATTERNS @john_papa
Stay Above the Fold
Immediately Identifiable
ANGULARJS PATTERNS @john_papa
AngularJS File TemplatesVisual Studio 2013http://sidewaffle.com
WebStorm 7 and 8http://jpapa.me/ngstormtmpl
Coding Patterns with SideWaffleDEMO
Structuring Your Project4
ANGULARJS PATTERNS @john_papa
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
ANGULARJS PATTERNS @john_papa
By Type By Feature
“If someone says you are doing it wrong, ignore them”
Dan Wahlin
Structuring Your Project
ANGULARJS PATTERNS @john_papa
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.
ANGULARJS PATTERNS @john_papa
One Monolithic App?
ANGULARJS PATTERNS @john_papa
One Monolithic App?Reusable Components to Assemble an App
ANGULARJS PATTERNS @john_papa
ModulesContainer of related services, widgets, views, controllers
Modules can depend on other modules
Promotes iterative development
ANGULARJS PATTERNS @john_papa
ControllerFactoryDirective
Routes
Module
ConfigServiceProvider
Modules are Containers
Value
Filter
ANGULARJS PATTERNS @john_papa
Categories of Dependencies
ANGULARJS PATTERNS @john_papa
modularApp
avengers dashboard widgets layout
core
ngAnimate ngRoute common ui-bootstrap
Modularity
DEMO
Tracing Data6
Following the path through the
components with promises
ANGULARJS PATTERNS @john_papa
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
ANGULARJS PATTERNS @john_papa
Catch and Handle all ExceptionsLocal and Remote LoggingOptional Dev vs Debug ModesConsistency
ANGULARJS PATTERNS @john_papa
Decorate the $exceptionHandler Service
Exception HandlingDEMO
Rich Data: BreezeJS8
When you do more than just get data
ANGULARJS PATTERNS @john_papa
Why use Rich Data?$http gives you access to the dataAfter that, how do we …Track changesManage changesets CacheShare
ANGULARJS PATTERNS @john_papa
Multple views of the same object?
ANGULARJS PATTERNS @john_papa
Propogate Changes?
ANGULARJS PATTERNS @john_papa
Do you know which entities are dirty?
ANGULARJS PATTERNS @john_papa
SessionsTracksTimeSlots RoomsSpeakers
BreezeJS
DEMO
Validation9
ANGULARJS PATTERNS @john_papa
Do you validate changes on the clientfor a better user experience?
ANGULARJS PATTERNS @john_papa
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
ANGULARJS PATTERNS @john_papa
ANGULARJS PATTERNS @john_papa
Validation on the server is mandatory.
Validation on the client is a user experience.
Model Validation
DEMO
Work in Progress withLocal Storage10
ANGULARJS PATTERNS @john_papa
Why risk losing lose changes?
ANGULARJS PATTERNS @john_papa
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
ANGULARJS PATTERNS @john_papa
Breeze Import/Expor
tAPI’s
Angular Directives
Local Storage
Angular Services
Key Technical Features
ANGULARJS PATTERNS @john_papa
Listen to breeze
Broadcast a custom message
How Do We Know When to Stash?
ANGULARJS PATTERNS @john_papa
Stash all WIP
Serialize entity, changes and
state
Exporting
ANGULARJS PATTERNS @john_papa
Return the newly imported entity
Grab the stashed WIP
Import the WIP into Breeze
Import
ANGULARJS PATTERNS @john_papa
Update the asterisk and counter
The WIP data
Who tells the directive when WIP
changes
WIP directiveTell the User
ANGULARJS PATTERNS @john_papa
How Do We Interact With WIP?
ANGULARJS PATTERNS @john_papa
Recap1. How the Components
Fit2. HotTowel3. Coding Patterns4. Structuring Your
Project5. Modularity
6. Tracing Data7. Exception
Handling8. Rich Data9. Validation10.Local Storage /
WIP
ANGULARJS PATTERNS @john_papa
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
ANGULARJS PATTERNS @john_papa
http://pluralsight.com/training/Authors/Details/john-papa
Building Apps with Angular and Breeze
ANGULARJS PATTERNS @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
ANGULARJS PATTERNS @john_papa
Complete an evaluation and enter to win!
ANGULARJS PATTERNS @john_papa
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.
Recommended