Although native applications continue to thrive, more and more focus is being placed on the web as a way to successfully deliver enterprise applications. The primary language of the web is JavaScript and it comes with its own challenges that make it difficult to scale large teams across large projects. The combination of TypeScript and AngularJS changes this by providing a way to design a declarative UI with a clean separation of concerns while providing strong types that make discovery and refactoring easier than ever before. Join principal consultant Jeremy Likness to learn how these two technologies combine to enable large development teams to deliver web-based applications more quickly and efficiently.

1. Consulting/Training
TypeScript and AngularJS

2. Consulting/Training
consulting
Wintellect helps you build better software,
faster, tackling the tough projects and solving
the software and technology questions that
help you transform your business.
 Architecture, Analysis and Design
 Full lifecycle software development
 Debugging and Performance tuning
 Database design and development
training
Wintellect's courses are written and taught by
some of the biggest and most respected names
in the Microsoft programming industry.
 Learn from the best. Access the same
training Microsoft’s developers enjoy
 Real world knowledge and solutions on
both current and cutting edge
technologies
 Flexibility in training options – onsite,
virtual, on demand
Founded by top experts on Microsoft – Jeffrey Richter, Jeff Prosise, and John Robbins – we pull
out all the stops to help our customers achieve their goals through advanced software-based
consulting and training solutions.
who we are
About Wintellect

3. Consulting/Training
 The Problem
 HTML5
 JavaScript
 Browsers
 A Solution
 TypeScript
 AngularJS
 Conclusion
Agenda

4. Consulting/Training
 Modern web apps run on the web’s
Operating System (did you watch the
keynote? This bullet was not added
after)
 That OS is HTML5 + JavaScript
 Part of problem is HTML5 (I’ll explain)
 The problem is JavaScript (Hang on…)
 Coding web apps with a large team can
be like hanging off the edge of a cliff
 But let me explain …
The Problem

5. Consulting/Training
 Yeah, saved us from “evil” plug-
ins! (cough) Silverlight (cough)
 Write once, run anywhere, right?
 Let’s check compatibility …
 Oops, looks like a traffic stop
 Looks like no one implements all
HTML5 features consistently, and
many are browser-specific
 We really want to keep it as structure
 Write once, suck everywhere!
The Problem: HTML5

6. Consulting/Training
The Problem: JavaScript
JavaScript

7. Consulting/Training
 Also not implemented consistently
between browsers (specifically DOM
interaction – and if you think HTML5 will
make a difference, the current standard has
been there since 1999)
 OK, there were a few tweaks in 2009
 JavaScript: The Definitive Guide is
1,100 pages
 JavaScript: The Good Parts is 127
pages
 Is there something wrong with that
picture?
The Problem: JavaScript

8. Consulting/Training
Wow! This is a lot of work and
what if my UI changes to use
different ids?
$(document).ready(function() {
$('#firstName').attr('data-bind','value: firstName, valueUpdate:
"afterkeydown"');
$('#lastName').attr('data-bind','value: lastName, valueUpdate:
"afterkeydown"');
$('#fullName').attr('data-bind', 'text: fullName');
$('#firstNameValidation')
.attr('data-bind','visible: firstName.hasError, text:
firstName.validationMessage');
$('#lastNameValidation')
.attr('data-bind','visible: lastName.hasError, text:
lastName.validationMessage');
$('form').attr('data-bind', 'submit: saveName');
});
jQuery Can Help ….

9. Consulting/Training
function NameViewModel() {
var self = this;
this.firstName = ko.observable('Jeremy');
this.lastName = ko.observable('');
this.fullName = ko.computed(function() {
if (self.lastName()) {
if (self.firstName()) {
return self.lastName() + ', ' + self.firstName();
}
return self.lastName();
}
return self.firstName();
});
}
var viewModel = new NameViewModel();
Do I really need all of this
ceremony? What if I am using
data I just retrieved from a
web service call, do I have to
do all of this?
KnockoutJS Can Help ….

10. Consulting/Training
 Encapsulation without obfuscation
 Discovery without guessing
 Type safety without killing ducks
 Modularity
 Inheritance
 Separation of concerns
 Designer/developer workflow
 Unit testing
 Data-binding
 Code reuse
 Extensibility
There IS a BETTER way!
“It keeps the cold liquids
cold and the hot liquids
hot. How does it know?”

11. Consulting/Training
(In which one finds TypeScript and AngularJS with Jasmine working together)
The 6502 “Because I Can” Written in JavaScript runs on my Phone
Simulator: http://apps.jeremylikness.com/t6502
Source: http://t6502.codeplex.com/

12. Consulting/Training
 Encapsulation with classes
 Minimize “ritual” with inheritance
 Discovery with interfaces
 Type safety that doesn’t take away our right
to duck-type
 Modular code
TypeScript

13. Consulting/Training
Interfaces Example
Whoah IntelliSenseless! Where
are my properties buried in all
this mess? You’re giving me
the whole universe!

14. Consulting/Training
Interfaces Example
That’s more like it. And
IAmSomeone doesn’t appear
anywhere in my JavaScript
code.

15. Consulting/Training
Generics

16. Consulting/Training
Classes

17. Consulting/Training
Inheritance

18. Consulting/Training
Inheritance (cont.)
“I get by with a little
help from my TypeScript
compiler. It’s magic.”

19. Consulting/Training
 “XAML” for the web
 Declarative (like HTML is)
 Directives = “user controls”
 Filters = “value converters”
 Controllers = “view models”
 Teach HTML new tricks (with a lot of tricks already in
the bag)
 Dependency Injection
 Very test-friendly
AngularJS
“It’s a conspiracy by
XAML developers to make
the web look like
Silverlight”
“Nah, Dawg.
Angular was
cooked up by
Google.”

20. Consulting/Training
Example App with AngularJS and TypeScript

21. Consulting/Training
Subscribers Enjoy
 Expert Instructors
 Quality Content
 Practical Application
 All Devices
Wintellect’s On-Demand
Video Training Solution
Individuals | Businesses | Enterprise Organizations
http://bit.ly/angularintro
Authors Enjoy
 Royalty Income
 Personal Branding
 Free Library Access
 Cross-Sell
Opportunities
Try It Free!
Use Promo Code:
LIKNESS-13

22. Consulting/Training
Questions?
http://sdrv.ms/1dUgIb1
jlikness@Wintellect.com