160 likes | 178 Views
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.
E N D
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 @scottmgerstl
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
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
New & much more user friendly Getting Started @scottmgerstl
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
Dissecting the Quickstart What’s going on here? @scottmgerstl
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
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
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
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
NPM install @scottmgerstl
Code Yay! @scottmgerstl