1 / 16

Hello, Angular2

Hello, Angular2. An Introduction. ScottMGerstl. @ scottmgerstl. An Overview. What is it?. @ scottmgerstl. Angular2 By Google. https://angular.io/ javascript & templating framework Built using TypeScript ( worked closely with the Microsoft team) New & much more user friendly.

delsie
Download Presentation

Hello, Angular2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Hello, Angular2 An Introduction

  2. ScottMGerstl @scottmgerstl

  3. An Overview What is it? @scottmgerstl

  4. Angular2 By Google • https://angular.io/ • javascript& templating framework • Built using TypeScript (worked closely with the Microsoft team) • New & much more user friendly @scottmgerstl

  5. javascript & templating framework • It can run anywhere there is a javascript environment • Web (obviously) • Node js (server) • Native mobile apps (NativeScript by Telerik) • Desktop (using electron – a javascript desktop framework built by github) @scottmgerstl

  6. Built using TypeScript • TypeScript is developed by Microsoft • It is a superset of ES6 which can be transpiled into ES5 to run in all current browsers • ES6: the newest specification of javascript. (More formal name: EcmaScript 2015) • Transpile: convert it from one programming language to another • ES5: what the javascript most of us know today is based on @scottmgerstl

  7. New & much more user friendly Getting Started @scottmgerstl

  8. What You need to get started • Install Node.js with NPM • https://nodejs.org/en/download/ (this includes NPM in the install) • https://www.npmjs.com/ • Follow Angular2’s quick start and Tour of Heros tutorials • https://angular.io/docs/ts/latest/quickstart.html • https://angular.io/docs/ts/latest/tutorial/ @scottmgerstl

  9. Dissecting the Quickstart What’s going on here? @scottmgerstl

  10. The development environment • install node and npm • create a workspace folder (C:\Development\MyProject\app) • add a tsconfig.json to guide the TypeScript compiler • add a typings.json that identifies missing TypeScript definition file • add a package.json that defines the packages and scripts we need • install the npm packages and typings files @scottmgerstl

  11. add a package.json { "name": “my-super-awesome-project", "version": "1.0.0", "license": "ISC", "scripts": { "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", "lite": "lite-server", "postinstall": "typings install", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings" }, "dependencies": { "angular2": "2.0.0-beta.16", "systemjs": "0.19.26", "es6-shim": "^0.35.0", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.2", "zone.js": "0.6.12" }, "devDependencies": { "concurrently": "^2.0.0", "lite-server": "^2.2.0", "typescript": "^1.8.10", "typings":"^0.8.1" } } • https://docs.npmjs.com/files/package.json • http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/ @scottmgerstl

  12. add a tsconfig.json { "compilerOptions": { "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ] } • https://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#tsconfig • https://www.typescriptlang.org/docs/handbook/tsconfig.json.html @scottmgerstl

  13. add a typings.json { "ambientDependencies": { "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#...", "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#..." } } • https://github.com/DefinitelyTyped/DefinitelyTyped • https://www.npmjs.com/package/typings @scottmgerstl

  14. NPM install @scottmgerstl

  15. Code Yay! @scottmgerstl

  16. @scottmgerstl

More Related