Transcript
Page 1: TechEd NZ 2014: Building Universal Angular Apps

Building Universal Angular Apps

Don Smith@locksmithdon

WIN314

Page 2: TechEd NZ 2014: Building Universal Angular Apps

Really?

Devs The Biz

Angular WinJS

Why?

Page 3: TechEd NZ 2014: Building Universal Angular Apps

Framing our decisions

Reuse Isolate Modular

Platform

Page 4: TechEd NZ 2014: Building Universal Angular Apps

A trivial sample app

Back button

Transition animation

s

Tiles & timer

controlApp bar

Page 5: TechEd NZ 2014: Building Universal Angular Apps

Universal hub template

Sharing Limitations One app Build

tasks

Page 6: TechEd NZ 2014: Building Universal Angular Apps

AngularJS

Modules $injector Providers

“Specials”

Page 7: TechEd NZ 2014: Building Universal Angular Apps

Dynamic Content Security

Edit the Angular source Replace jqLite with jQuery

2.x Use the ngCsp directive Use winstore-jscompat

Page 8: TechEd NZ 2014: Building Universal Angular Apps

Routing & navigation

Module UI-Router

Both back

buttons

window.history.back();

Page 9: TechEd NZ 2014: Building Universal Angular Apps

Animations

Isolates WinJS functionality

Can be defined using CSS

Page 10: TechEd NZ 2014: Building Universal Angular Apps

Business logic

Nearly 100% reusable code

Can isolate 3rd party libraries

Page 11: TechEd NZ 2014: Building Universal Angular Apps

View compositionDefault.html & layouts

in each project

Useng-include & directives

Partials shared

across apps

Define differences using CSS

Page 12: TechEd NZ 2014: Building Universal Angular Apps

Themes & coloursUse the resource loader

Font Awesom

eis awesome

Segoe UI Symbol

is too

\uE128

Ĩ

Page 13: TechEd NZ 2014: Building Universal Angular Apps

Recap

Reuse Isolate Modular

Platform

Page 15: TechEd NZ 2014: Building Universal Angular Apps

Related contentBreakout Sessions

WIN312 Why should I care about Cordova/PhoneGap?

Hands-on LabsWIN-H203 Introduction to Building

Windows Store Apps with Microsoft Azure Mobile Services

Find Me Later At...http://locksmithdon.net@locksmithdon

Page 16: TechEd NZ 2014: Building Universal Angular Apps

Resources

TechNet & MSDN FlashSubscribe to our fortnightly newsletter

http://aka.ms/technetnz http://aka.ms/msdnnz

TechNet Virtual LabsFree Virtual Hands-on Labs

http://aka.ms/ch9nz

Microsoft Virtual AcademyFree Online Learning

http://aka.ms/mva http://aka.ms/technetlabs

Sessions on Demand

Page 17: TechEd NZ 2014: Building Universal Angular Apps

Complete your session evaluation now and win!

Page 18: TechEd NZ 2014: Building Universal Angular Apps

© 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.MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Page 19: TechEd NZ 2014: Building Universal Angular Apps

Section title

Page 20: TechEd NZ 2014: Building Universal Angular Apps

Section title

Page 21: TechEd NZ 2014: Building Universal Angular Apps

Section title


Top Related