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

Typescript 102 - rgoodsoftware.com · Practical TypeScript with AngularJS Typescript 102 Bob Goodearl RGood Software Bob German BlueMetal

  • Upload
    others

  • View
    40

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Typescript 102 - rgoodsoftware.com · Practical TypeScript with AngularJS Typescript 102 Bob Goodearl RGood Software  Bob German BlueMetal

Practical TypeScript with AngularJS

Typescript 102

Bob GoodearlRGood Software

www.RGoodSoftware.com

Bob GermanBlueMetal

www.bluemetal.com

Page 2: Typescript 102 - rgoodsoftware.com · Practical TypeScript with AngularJS Typescript 102 Bob Goodearl RGood Software  Bob German BlueMetal

Boston Code Camp 25 - Thanks to our Sponsors!

• Platinum

• Gold

• Silver

• Bronze

• In-Kind Donations

Page 3: Typescript 102 - rgoodsoftware.com · Practical TypeScript with AngularJS Typescript 102 Bob Goodearl RGood Software  Bob German BlueMetal

Bob German

Bob Goodearl

• Blog: http://bob1german.com/

• Linked In: https://www.linkedin.com/in/bgerman

• Twitter: @Bob1German

• Email: [email protected]

• Website: http://www.rgoodsoftware.com

• Linked In: https://www.linkedin.com/in/bgoodearl

• Email: [email protected]

Presenters

Page 4: Typescript 102 - rgoodsoftware.com · Practical TypeScript with AngularJS Typescript 102 Bob Goodearl RGood Software  Bob German BlueMetal

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

Page 5: Typescript 102 - rgoodsoftware.com · Practical TypeScript with AngularJS Typescript 102 Bob Goodearl RGood Software  Bob German BlueMetal

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 SDKs\TypeScript\1.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 runnerEdit 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

Page 6: Typescript 102 - rgoodsoftware.com · Practical TypeScript with AngularJS Typescript 102 Bob Goodearl RGood Software  Bob German BlueMetal

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

Page 7: Typescript 102 - rgoodsoftware.com · Practical TypeScript with AngularJS Typescript 102 Bob Goodearl RGood Software  Bob German BlueMetal

• Commonly used on the Internet called ”Web Widgets”, ”Plugins”, ”Embeds”, etc.

• It’s just a clever piece of HTML andJavascript that acts like a web part

• Often deployed by authors/end usersseperately from the hosting application

• Very handy in SharePoint and other contentmanagement systems

What is a widget?

Page 8: Typescript 102 - rgoodsoftware.com · Practical TypeScript with AngularJS Typescript 102 Bob Goodearl RGood Software  Bob German BlueMetal

What makes a good widget?

1ISOLATED – so they won’t interfere with otherwidgets or the rest of the page

Can you run multiple copies of the widget on a page?

2EFFICIENT – so they load quickly Does the page get noticeably slower as you add

widgets?

3SELF-CONTAINED – so they’re easy to reuse Does the widget work without special page elements

such as element ID’s, scripts, and CSS references?

4MODERN – so they’re easier to write and maintain Is the widget written in a modern JavaScript

framework such as AngularJS or Knockout?

Page 9: Typescript 102 - rgoodsoftware.com · Practical TypeScript with AngularJS Typescript 102 Bob Goodearl RGood Software  Bob German BlueMetal

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

Page 10: Typescript 102 - rgoodsoftware.com · Practical TypeScript with AngularJS Typescript 102 Bob Goodearl RGood Software  Bob German BlueMetal

demo

AngularJS Widget in TypeScript

• Model

• Controller

• Service

• TypeScript Definitions for REST services

Page 11: Typescript 102 - rgoodsoftware.com · Practical TypeScript with AngularJS Typescript 102 Bob Goodearl RGood Software  Bob German BlueMetal
Page 12: Typescript 102 - rgoodsoftware.com · Practical TypeScript with AngularJS Typescript 102 Bob Goodearl RGood Software  Bob German BlueMetal

demo

AngularJS Widget in TypeScript

• Model

• Controller

• Service

• TypeScript Definitions for REST services

Page 13: Typescript 102 - rgoodsoftware.com · Practical TypeScript with AngularJS Typescript 102 Bob Goodearl RGood Software  Bob German BlueMetal

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

Page 14: Typescript 102 - rgoodsoftware.com · Practical TypeScript with AngularJS Typescript 102 Bob Goodearl RGood Software  Bob German BlueMetal

demo

MVC5NgTsDemo

Page 15: Typescript 102 - rgoodsoftware.com · Practical TypeScript with AngularJS Typescript 102 Bob Goodearl RGood Software  Bob German BlueMetal

Generating TypeScript definitions

• Experiments with TypeLitehttp://bit.ly/1WW9ckN

• Other options (not yet explored)• Typewriter extension for Visual Studio

http://bit.ly/VsX-Typewriter

Page 16: Typescript 102 - rgoodsoftware.com · Practical TypeScript with AngularJS Typescript 102 Bob Goodearl RGood Software  Bob German BlueMetal

Resources

Session Materialsand Code Samples

• http://bit.ly/bcc25ts102

TypeScript Playground• http://bit.ly/TSPlayground

TS Def’ns from JSON

• http://json2ts.com/

Page 17: Typescript 102 - rgoodsoftware.com · Practical TypeScript with AngularJS Typescript 102 Bob Goodearl RGood Software  Bob German BlueMetal

An Insight company

Thank you.

Bob Goodearl

Bob German