Angular 2 and TypeScript SPA IPT – Intellectual Products & Technologies Development Course Trayan Iliev, http://www.iproduct.org/ Developing SPA with Angular 2 and TypeScript Trayan Iliev IPT – Intellectual Products & Technologies e-mail: [email protected] web: http://www.iproduct.org Oracle®, Java™ and JavaScript™ are trademarks or registered trademarks of Oracle and/or its affiliates. Microsoft .NET, Visual Studio and Visual Studio Code are trademarks of Microsoft Corporation. Other names may be trademarks of their respective owners. Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License Slide 1 Angular 2 and TypeScript SPA IPT – Intellectual Products & Technologies Development Course Trayan Iliev, http://www.iproduct.org/ Agenda 1. Single Page Aplications (SPA) with Ng2 (brief intro + video :) 2. ES6 & TypeScript (lambdas, interpolating strings, promises, interfaces, classes, constructors, encapsulation, inheritance) 3. Web components and data binding 4. Angular 2 (modules, components и life-cycle events, views и templates, routing, metadata, data binding и reactive event processing с RxJS, services, directives, dependency injection, pipes, async processing) 5. Creating Angular 2 Hello World Application => Angular CLI 6. Ng2 by example – Tour of Heroes official Angular 2 tutorial 7. Building custom directives, pipes, and validators 8. Angular 2 style guide (discussion) Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License Slide 2 Angular 2 and TypeScript SPA IPT – Intellectual Products & Technologies Development Course Trayan Iliev, http://www.iproduct.org/ Intro to Angular 2 :) ng-conf 2016 Conference Day 1: https://www.youtube.com/watch?v=mAjjI35RcUE Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License Slide 3 Angular 2 and TypeScript SPA IPT – Intellectual Products & Technologies Development Course Trayan Iliev, http://www.iproduct.org/ Developing Sinagle Page Apps (SPA) in 3 steps 1) Setting up a build system – npm, webpack, gulp are common choices, babel, typescript, JSX, CSS preprocessors (SASS, SCSS, LESS), jasmine, karma, protractor, Yeoman/ Slush, live servers 2) Designing front-end architecture components – views & layouts + view models (presentation data models) + presentation logic (event handling, messaging) + routing paths (essential for SPA) Better to use component model to boost productivity and maintainabbility. 3) End-to-end application design – front-end: wireframes → views, data entities & data streams → service API and models design, sitemap → router config Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License Slide 4 Angular 2 and TypeScript SPA IPT – Intellectual Products & Technologies Development Course Trayan Iliev, http://www.iproduct.org/ Creating Angular 2 Hello World Application 5 min Quickstart: https://angular.io/docs/ts/latest/quickstart.html install node and npm create an application project folder add a tsconfig.json to guide the TypeScript compiler add a typings.json that identifies missing TypeScript definition files add a package.json that defines the packages and scripts we need install the npm packages and typings files Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License Slide 5 Angular 2 and TypeScript SPA IPT – Intellectual Products & Technologies Development Course Trayan Iliev, http://www.iproduct.org/ Angular 2 Hello World Project Structure angular2-quickstart app app.component.ts main.ts node_modules ... typings ... index.html package.json styles.css tsconfig.json typings.json Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License Slide 6 Angular 2 and TypeScript SPA IPT – Intellectual Products & Technologies Development Course Trayan Iliev, http://www.iproduct.org/ app/app.component.ts import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { } Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License Slide 7 Angular 2 and TypeScript SPA IPT – Intellectual Products & Technologies Development Course Trayan Iliev, http://www.iproduct.org/ app/main.ts import {bootstrap} from 'angular2/platform/browser'; import {AppComponent} from './app.component'; bootstrap(AppComponent); Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License Slide 8 Angular 2 and TypeScript SPA IPT – Intellectual Products & Technologies Development Course Trayan Iliev, http://www.iproduct.org/ index.html: Configure SystemJS <html><head>... <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } }}); System.import('app/main').then(null, console.error.bind(console)); </script> </head> <body> <my-app>Loading...</my-app> </body> </html> Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License Slide 9 Angular 2 and TypeScript SPA IPT – Intellectual Products & Technologies Development Course Trayan Iliev, http://www.iproduct.org/ OR using Angular CLI [https://github.com/angular/angular-cli] npm install -g angular-cli ng new PROJECT_NAME cd PROJECT_NAME ng serve ng serve --port 4201 --live-reload-port 49153 Create Angular 2 compponents using CLI: Component ng g component my-new-component Directive ng g directive my-new-directive Pipe ng g pipe my-new-pipe Service ng g service my-new-service Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License Slide 10 Angular 2 and TypeScript SPA IPT – Intellectual Products & Technologies Development Course Trayan Iliev, http://www.iproduct.org/ Web Components Make it possible to build widgets …which can be reused reliably …and which won’t break pages if the next version of the component changes internal implementation details. [http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/] 4 emerging W3C specifications: Custom elements – provide a way for authors to build their own fully-featured DOM elements. Shadow DOM – combining multiple DOM trees in one hierarchy [http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/] Template – declare fragments of HTML that can be cloned and inserted in the document by script HTML imports – <link rel="import" href="my-custom-cmp.html"> Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License Slide 11 Angular 2 and TypeScript SPA IPT – Intellectual Products & Technologies Development Course Trayan Iliev, http://www.iproduct.org/ Web Components (3) <template id="custom-tag-tpl"> <style> h1 { color: blue; } </style> <h1>My Custom Component</h1> </template> var CustomCmpProto = Object.create(HTMLElement.prototype); CustomCmpProto.createdCallback = function() { var template = document.querySelector('#custom-tag-tpl'); var clone = document.importNode(template.content, true); this.createShadowRoot().appendChild(clone); }; var MyCmp = document.registerElement('custom-cmp', {prototype: CustomCmpProto}); document.body.appendChild(new MyCmp()); Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License Slide 12 Angular 2 and TypeScript SPA IPT – Intellectual Products & Technologies Development Course Trayan Iliev, http://www.iproduct.org/ Data binding Source: AngularJS Developer Guide: Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 https://docs.angularjs.org/guide/databinding Slide 13 License: CC BY-3.0International License Angular 2 and TypeScript SPA IPT – Intellectual Products & Technologies Development Course Trayan Iliev, http://www.iproduct.org/ Angular 2 vs. Angular 1 Component-based: Angular 2 is component based. controllers and $scope - no longer used replaced by components and directives. components are directives with a template Directives - specification for directives is considerably simplified, @Directive declarative annotation (decorator) Dependency Injection – 3 parts: the injector, bindings, and actual dependencies to be injected Forms and Validators – automatic binding with FormBuilder, Control, ControlGroup, ControlArray, FORM_DIRECTIVES, CSS Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License Slide 14 Angular 2 and TypeScript SPA IPT – Intellectual Products & Technologies Development Course Trayan Iliev, http://www.iproduct.org/ Advantages of Angular 2 [http://angularjs.blogspot.bg/2015/11/highlights-from-angularconnect-2015.html] Speed – Angular 2 is dramatically faster than Angular 1 with support for fast initial loads through server-side pre-rendering, offline compile for fast startup, and ultrafast change detection and view caching for smooth virtual scrolling and snappy view transitions. Browsers – Angular 2 supports IE 9, 10, 11, Microsoft Edge, Safari, Firefox, Chrome, Mobile Safari, and Android 4.1+. Cross-platform – By learning Angular 2, you'll gain the core knowledge you'll need to build for a full range of platforms including desktop and mobile web, hybrid and native UI mobile installed apps, and even installable desktop applications. Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License Slide 15 Angular 2 and TypeScript SPA IPT – Intellectual Products & Technologies Development Course Trayan Iliev,