Developing Angular 1.x applications with TypeScript, from Boston Code Camp 25. Presented by Bob Goodearl and Bob German.

1. Practical TypeScript with AngularJS
Typescript 102
Bob Goodearl
RGood Software
www.RGoodSoftware.com
Bob German
BlueMetal
www.bluemetal.com

2. Boston Code Camp 25 - Thanks to our Sponsors!
• Platinum
• Gold
• Silver
• Bronze
• In-Kind Donations

3. Bob German
Bob Goodearl
• Blog: http://bob1german.com/
• Linked In:
https://www.linkedin.com/in/bgerman
• Twitter: @Bob1German
• Email: bobg@bluemetal.com
• Website: http://www.rgoodsoftware.com
• Linked In:
https://www.linkedin.com/in/bgoodearl
• Email: bgoodearl@rgoodsoftware.com
Presenters

4. Agenda
• TypeScript Widget
• Modules
• Controllers
• Services
• TypeScript Definitions for REST Calls
• TypeScript SPA with ASP.NET MVC
• Anatomy of an AngularJS/MVC/TypeScript web app

5. Setup steps:
• Install VS Code
• Install Node (https://nodejs.org/en/download)
• npm install –g typescript
• Ensure no old versions of tsc are on your path; VS
adds:
C:Program Files (x86)Microsoft
SDKsTypeScript1.0
• In VS Code create tsconfig.json in the root of your
folder
{
"compilerOptions": {
"target": "es5“,
"sourceMap": true
}
}
• Use Ctrl+Shift+B to build – first time click the
error to define a default task runner
Edit task runner and un-comment the 2nd
example in the default
• npm install –g http-server
(In a command prompt, run http-server and
browse to http://localhost:8080/)
VS Code Environment

6. Setup steps:
• Install Visual Studio
• For VS2012 or 2013, install TypeScript extension
• Build and debug the usual way
• Consider WebEssentials for side by side TypeScript
and JavaScript view
(does not work in VS2015)
Visual Studio Environment

7. • Commonly used on the Internet called ”Web
Widgets”, ”Plugins”, ”Embeds”, etc.
• It’s just a clever piece of HTML and
Javascript that acts like a web part
• Often deployed by authors/end users
seperately from the hosting application
• Very handy in SharePoint and other content
management systems
What is a widget?

8. What makes a good widget?
1
ISOLATED – so they won’t interfere with other
widgets or the rest of the page
Can you run multiple copies of the widget on a
page?
2
EFFICIENT – so they load quickly Does the page get noticeably slower as you add
widgets?
3
SELF-CONTAINED – so they’re easy to reuse Does the widget work without special page elements
such as element ID’s, scripts, and CSS references?
4
MODERN – so they’re easier to write and maintain Is the widget written in a modern JavaScript
framework such as AngularJS or Knockout?

9. JavaScript Library allows you to run multiple Angular* apps on a page …
<div> <!-- ng-app=“HelloApp” -->
<div ng-controller="main as vm">
<h1>Hello{{vm.space()}}{{vm.name}}!</h1>
Who should I say hello to?
<input type="text" ng-model="vm.name" />
</div>
<!-- Widget Wrangler loads scripts and boots the app -->
<script type="text/javascript" src="pnp-ww.js“
ww-appName="HelloApp“
ww-appType="Angular“
ww-appScripts='[{"src": “~/angular.min.js", "priority":0},
{"src": “~/script.js", "priority":1}]'>
</script>
</div>
Widget Wrangler
* Also works with any JavaScript framework – or none at all

10. demo
AngularJS Widget in TypeScript
• Model
• Controller
• Service
• TypeScript Definitions for REST services

12. demo
AngularJS Widget in TypeScript
• Model
• Controller
• Service
• TypeScript Definitions for REST services

13. Anatomy of an
AngularJS/MVC/TypeScript web app
• Why Integrate AngularJS and MVC?
• Why add TypeScript?
• Open source code you can experiment with
• http://bit.ly/MvcNgTsDemo
• Lessons Learned

14. demo
MVC5NgTsDemo

15. Generating TypeScript definitions
• Experiments with TypeLite
http://bit.ly/1WW9ckN
• Other options (not yet explored)
• Typewriter extension for Visual Studio
http://bit.ly/VsX-Typewriter

16. Resources
Session Materials
and Code Samples
• http://bit.ly/bcc25ts102
TypeScript Playground
• http://bit.ly/TSPlayground
TS Def’ns from JSON
• http://json2ts.com/

17. An Insight company
Thank you.
Bob Goodearl
Bob German