Typescript 102 angular and type script

Practical TypeScript with AngularJS

Typescript 102

Bob GoodearlRGood Software

www.RGoodSoftware.com

Bob GermanBlueMetal

www.bluemetal.com

Boston Code Camp 25 - Thanks to our Sponsors!Platinum

Gold

Silver

Bronze

In-Kind Donations

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

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

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

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

• 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

contentmanagement systems

What is a widget?

What makes a good widget?1 ISOLATED – so they won’t interfere with

other widgets or the rest of the pageCan 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?

JavaScript Library allows you to run multiple Angular* apps on a page …<div>  <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>  <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

demo

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

demo

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

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

demo

MVC5NgTsDemo

Generating TypeScript definitions

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

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

http://bit.ly/VsX-Typewriter

ResourcesSession Materialsand Code Samples• http://bit.ly/bcc25ts102TypeScript Playground• http://bit.ly/TSPlaygroundTS Def’ns from JSON• http://json2ts.com/

An Insight company

Thank you.

Bob Goodearl

Bob German