Angular 2: What s new? Jonas Bandi, IvoryCode GmbH
|
|
- Bennett Short
- 6 years ago
- Views:
Transcription
1 Angular 2: What s new? Jonas Bandi, IvoryCode GmbH
2 Once upon a time
3 the world was peacefully creating applications with AngularJS
4 but change was lurking in the maze of a mailing list
5 then the threat became real ng-europe, October 2014
6
7
8 Forget anything you know about AngularJS?
9 About me Jonas Bandi - Freelancer: - Dozent an der Berner Fachhochschule seit Trainer bei Digicomp für AngularJS und Angular 2 - In-House Kurse & Coachings für Web-Technologien im Enterprise (UBS, Postfinance, Mobiliar, BIT, SBB... )
10 AngularJS is a powerful Framework but it is old!
11 LoDash React Angular 2 Bootstrap AngularJS
12
13 The web has changed since
14 Angular 2 is a new implementation of the concepts behind AngularJS for the modern web. but Angular 2 is not an update to AngularJS.
15 Angular 2 is built upon the modern web: web workers - shadow dom Angular 2 is built for the modern web: mobile browsers modern browsers server-side rendering Angular 2 improves over AngularJS: faster easier to use & learn built on proven best practices (i.e. uicomponents, unidirectional data flow )
16 The core concepts of Angular 2 are clean and easy to learn
17
18 Angular Key Concepts AngularJS Angular 2 controllers components (ng 1.5) directives data-binding services dependency injection components components directives data-binding / data-flow services dependency injection
19 Angular Key Concepts AngularJS Angular 2 controllers components (ng 1.5) components JavaScript Function DDO ES2015 class
20 ToDo-App Component New-ToDo Component ToDo-List Component
21 Angular 2 Components Components are the main building-block of Angular 2. + Template Class Metadata = Component
22 A Simple Component import {Component} selector: 'my-app', template: '<h1>my First Angular 2 App</h1>' }) export class AppComponent { }
23 AngularJS Angular 2 Controller -> Component var app = angular.module('todoapp'); app.controller('todocontroller', ToDoController); ToDoController.$inject = ['ToDoService']; function ToDoController(todoService) { var ctrl = this; ctrl.newtodo = new ToDoItem(); ctrl.todos = selector: 'td-todo-app', template: require('./app.component.html'), directives: [NewTodo, ToDoList], providers: [ToDoService] }) export class TodoApp implements OnInit { todos: Array<ToDo> = []; constructor(private todoservice:todoservice){} ngoninit() { this.todos = this.todoservice.loadtodos(); }...
24 AngularJS Angular 2 Component (ng 1.5) -> Component var app = angular.module('todoapp'); app.component('todoapp', { templateurl: 'todo-app.html', controller: TodoAppComponent }); ToDoController.$inject = ['ToDoService']; function TodoAppComponent(todoService) { var ctrl = this; ctrl.newtodo = new ToDoItem(); ctrl.todos = selector: 'td-todo-app', template: require('./app.component.html'), directives: [NewTodo, ToDoList], providers: [ToDoService] }) export class TodoApp implements OnInit { todos: Array<ToDo> = []; constructor(private todoservice:todoservice){} ngoninit() { this.todos = this.todoservice.loadtodos(); }...
25 Directives & Components A directive is a construct, that is embedded into html and has a special meaning for the framework. Directives Components Structural Directives Attribute Directives Component is a composes Directive
26 Angular Key Concepts AngularJS Angular 2 directives directives a lot of directives (i.e ng-click, ng-focus, ng-blur, ng-keyup ) many directives from ng1 are not needed in ng2 templates
27 AngularJS vs. Angular 2: Directives The generic binding capabilities of Angular 2 makes many directives from AngularJS obsolete. AngularJS Angular 2 <div ng-style={color:'red'}> <img ng-src="{{ctrl.path}}"> <a ng-href= {{ctrl.link}}"> ng-click="saveperson(person)" ng-focus="updatesummary()" ng-blur="commit()" ng-keyup="updatecalculation()" <div [style.color]="color"> <img [src]="path"> <a [href]="link"> (click)="saveperson(person)" (focus)="updatesummary()" (blur)="commit()" (keyup)="updatecalculation()"
28 Structural Directives Use html as a template AngularJS Angular 2 ng-repeat, ng-if *ngfor, *ngif <ul class="todo-list" > <li ng-repeat="todo in ctrl.todos"> {{todo.title}} <button class="remove-button" ng-click="ctrl.removetodo(todo)"> x </button> </li> </ul> <ul class="todo-list" > <li *ngfor="let todo of todos"> {{todo.title}} <button class="remove-button" (click)="removetodo(todo)"> x </button> </li> </ul>
29 Angular Key Concepts AngularJS Angular 2 data-binding data-binding / data-flow generic property & event binding interpolation & 2-way databinding interpolation & 2-way databinding $scope uni-directional data-flow
30 Databinding DOM (Template) Interpolation {{value}} Property Binding [property]="value" Event Binding (event)="handler" Two Way Binding [(ngmodel)]="value" component
31 Nested Components: Uni-Directional Data-Flow State should be explicitly owned by a component. Parent Component Child Component state properties go Child Component logic out events come A parent component passes state to children Children should not edit state of their parent Children notify parents (events, actions ) Angular formalises unidirectional data-flow properties.
32 Angular Key Concepts AngularJS Angular 2 services services a function registered as factory, service or provider ES2015 class
33 Services Objects that perform a specific job. AngularJS Instantiated by Angular. Angular 2 var app = angular.module('todoapp'); app.factory('todoservice', todoservice); function todoservice() { 'use strict'; return { gettodos: gettodos, addtodo: addtodo, removetodo: removetodo export class ToDoService { loadtodos():array<todo> { var loadedtodos = JSON.parse( localstorage.getitem(todos_key) ); return loadedtodos []; }...
34 Angular Key Concepts AngularJS Angular 2 dependency injection DI based on naming dependency injection DI based on types (using TypeScript and Decorators) Singletons Hierarchical DI
35 Dependency Injection AngularJS Angular 2 registration: var app = angular.module('todoapp'); app.factory('todoservice', todoservice); function todoservice() {... export class ToDoService {... } injection: app.controller('todocontroller', ToDoController); ToDoController.$inject = ['todoservice']; function ToDoController(todoService) {... selector: 'td-todo-app', template: require('./app.component.html'), directives: [NewTodo, ToDoList], providers: [ToDoService] }) export class TodoApp implements OnInit { constructor(private todoservice:todoservice){}... }
36 controllers components (ng 1.5) directives data-binding services dependency injection Angular Key Concepts AngularJS Angular 2 components components Many key concepts remain the same. directives data-binding / data-flow services dependency injection But the implementation has changed.
37 There is more AngularJS Angular 2 filters Pipes http with Promises http with RxJs (Promises still supported) Routing (template centered) Hierarchical Component Router
38 The core concepts of Angular 2 are clean and easy to learn but setting up a full Angular project can be quite complicated today.
39 Angular JS
40 AngularJS: an effective tool but not elegant
41 SystemJS 2015 jspm webpack Angular 2
42 Angular is distributed through NPM To get Angular on your development machine, you have to install Node.JS. Node Package Manger
43 Multi-Language ES5 2015
44 Language Choices no com- pilation compilation ES weakly typed (optional) strongly typed
45 To pack or (not) to pack? Angular for ES2015 & TS relies on ES2015 modules. There is no support for ES2015 modules in browsers today. A module-system is mandatory. VS. SystemJS
46 Build Toolchain Typically you need a front-end build for transpilation and module bundling.
47 Angular 2 aspires to be a platform classic web-apps for desktops server side rendering progressive web-apps for mobile (web workers, cache, push, offline) dev tooling installed mobile apps (hybrid) installed mobile apps (native integrations) installed desktop apps
48 Is Angular 2 ready for production? October 2014: Initial announcement of Angular 2 December 2015: Angular 2 released as beta May 2016: Angular 2 Release Candidate 0 June 2016: Angular 2 Release Candidate 2 What is missing: - Router (!) - Offline Compilation & Build Toolchain - internationalization - 3rd Party Ecosystem
49 The Router Debacle - Dez 2014: New Router announced for Angular 1.4 and Angular 2 - June 2015: New Router is deprecated - Angular 2 beta is developed with the Component router - March 2016: Component Router is released for Angular May 2016: Component Router is deprecated. Router 2.0 is part of Angular 2 RC1 - June 2016: Router 2.0 is deprecated, Router 3.0 is announced
50 Questions? Jonas Bandi Tomorrow: DevDay Workshop - Hands On Angular 2 Digicomp Course: Front-End-Entwicklung mit Angular 2, JavaScript und TypeScript
Front End. Presentation Layer. UI (User Interface) User <==> Data access layer
Angular 2 S1ngS1ng Front End UI (User Interface) User Data access layer Presentation Layer Architecture Conventional VS SPA Angular 1 Framework! Framework! Framework! MVVM (MV*) Modulization Two-way
More informationDemystifying Angular 2. SPAs for the Web of Tomorrow
Demystifying Angular 2 SPAs for the Web of Tomorrow Philipp Tarasiewicz, JavaLand, 08.03.2016 Web Dev / Distributed Systems 15 yr. About Me Philipp Tarasiewicz Consultant / Trainer / Developer philipp.tarasiewicz@googlemail.com
More informationOne Framework. Angular
One Framework. Angular Web 2.0 Marc Dangschat Introduction AngularJS (1) released in 2009 Angular (2) released October Short: ng Framework TypeScript, JavaScript, Dart MIT license
More informationANGULAR 2.X,4.X + TYPESRCIPT by Sindhu
ANGULAR 2.X,4.X + TYPESRCIPT by Sindhu GETTING STARTED WITH TYPESCRIPT Installing TypeScript Compiling the code Building a simple demo. UNDERSTANDING CLASSES Building a class Adding properties Demo of
More informationAngular 2 Programming
Course Overview Angular 2 is the next iteration of the AngularJS framework. It promises better performance. It uses TypeScript programming language for type safe programming. Overall you should see better
More informationFRONT END WEB. {< Course Details >}
FRONT END WEB {< Course Details >} centers@acadgild.com www.acadgild.com 90360 10796 css { } HTML JS { ; } centers@acadgild.com www.acadgild.com 90360 10796 Brief About the Course Our Front end development
More informationIN4MATX 133: User Interface Software
IN4MATX 133: User Interface Software Lecture 13: Components in Angular Professor Daniel A. Epstein TA Jamshir Goorabian TA Simion Padurean 1 Notes Important: please put your name/email/id in the readme.txt
More informationLab 1 - Introduction to Angular
Lab 1 - Introduction to Angular In this lab we will build a Hello World style Angular component. The key focus is to learn how to install all the required code and use them from the browser. We wont get
More informationAngular 4 Syllabus. Module 1: Introduction. Module 2: AngularJS to Angular 4. Module 3: Introduction to Typescript
Angular 4 Syllabus Module 1: Introduction Course Objectives Course Outline What is Angular Why use Angular Module 2: AngularJS to Angular 4 What s Changed Semantic Versioning Module 3: Introduction to
More information"Charting the Course... Comprehensive Angular. Course Summary
Description Course Summary Angular is a powerful client-side JavaScript framework from Google that supports simple, maintainable, responsive, and modular applications. It uses modern web platform capabilities
More informationAngular 4 Training Course Content
CHAPTER 1: INTRODUCTION TO ANGULAR 4 Angular 4 Training Course Content What is Angular 4? Central Features of the Angular Framework Why Angular? Scope and Goal of Angular Angular 4 vs Angular 2 vs. AngularJS
More informationSample Copy. Not For Distribution.
Angular 2 Interview Questions and Answers With Typescript and Angular 4 i Publishing-in-support-of, EDUCREATION PUBLISHING RZ 94, Sector - 6, Dwarka, New Delhi - 110075 Shubham Vihar, Mangla, Bilaspur,
More informationBy the end of this Angular 6 tutorial, you'll learn by building a real world example application:
Throughout this Angular 6 tutorial, we'll learn to build a full-stack example web application with Angular 6, the latest version of Angular The most popular framework/platform for building mobile and desktop
More informationAngular 2 and TypeScript Web Application Development
Angular 2 and TypeScript Web Application Development Course code: IJ -19 Course domain: Software Engineering Number of modules: 1 Duration of the course: 40 study 1 hours Sofia, 2016 Copyright 2003-2016
More informationANGULAR2 OVERVIEW. The Big Picture. Getting Started. Modules and Components. Declarative Template Syntax. Forms
FORMS IN ANGULAR Hello Cluj. I m Alex Lakatos, a Mozilla volunteer which helps other people volunteer. I want to talk to you today about Angular forms. What s a form you ask? A form creates a cohesive,
More informationTen interesting features of Google s Angular Project
Ten interesting features of Google s Angular Project - 1 Ten interesting features of Google s Angular Project Copyright Clipcode Ltd 2018 All rights reserved Ten interesting features of Google s Angular
More informationChapter 1 - Development Setup of Angular
Chapter 1 - Development Setup of Angular Objectives Key objectives of this chapter Angular Files and Dependencies Node.js Node package manager (npm) package.json Semantic version numbers Installing Angular
More informationAngular2. Bernhard Niedermayer. Software Development playing around with Angular2 since alpha.
Catalysts GmbH Bernhard Niedermayer Software Development bernhard.niedermayer@catalysts.cc playing around with Angular2 since alpha.something Angular2 Catalysts GmbH Angular2 TypeScript 2 Languages how
More informationArjen de Blok. Senior Technical Consultant bij ICT Groep ( sinds 1995 Programmeren sinds 1990 Technologiën. Links
Arjen de Blok Senior Technical Consultant bij ICT Groep (www.ict.eu) sinds 1995 Programmeren sinds 1990 Technologiën Links Visual C++ met Microsoft Foundation Classes.NET WinForms & WPF Silverlight ASP.NET
More informationIntroduction to. Angular. Prof. Dr.-Ing. Thomas Wiedemann.
EwA - Web based systems Introduction to Angular Prof. Dr.-Ing. Thomas Wiedemann email: wiedem@informatik.htw-dresden.de HOCHSCHULE FÜR TECHNIK UND WIRTSCHAFT DRESDEN (FH) Fachbereich Informatik/Mathematik
More information"Charting the Course... Comprehensive Angular 5. Course Summary
Course Summary Description Comprehensive Angular teaches students the skills and best practices they need to design, build, test, and deploy applications that provide rich end-user experiences similar
More informationAngular 2 and TypeScript Web Application Development
Angular 2 and TypeScript Web Application Development Course code: IJ -23 Course domain: Software Engineering Number of modules: 1 Duration of the course: 42 study 1 (32 astr.) hours Sofia, 2016 Copyright
More informationAngular from the Beginning
from the Beginning EMEA PUG Challenge, Prague Introduction Robert Prediger 25 years experience in PROGRESS 17 years experience in web development 8 years experience in Node.js robert.prediger@web4biz.de
More informationSingle Page Applications using AngularJS
Single Page Applications using AngularJS About Your Instructor Session Objectives History of AngularJS Introduction & Features of AngularJS Why AngularJS Single Page Application and its challenges Data
More informationThe magic behind. Angular 2+
The magic behind Angular 2+ Agnès Crépet @agnes_crepet Cédric Exbrayat @cedric_exbrayat @NinjaSquad Lyon, France - April 20-21 Learn some french! Bonjour! Announced in March 2014 Released in September
More informationAngular 2. Useful links. Allen Holub 2-1
Angular 2 Allen Holub http://holub.com allen@holub.com @allenholub http://holub.com/slides 1 Useful links 2-1 2 https://angular.io/docs/ts/latest/guide/ Useful links 2 2-2 https://angular.io/docs/ts/latest/guide/
More informationAngular 5 vs. React When to Choose Which?
Angular 5 vs. React When to Choose Which? Stephan Rauh Dr. Marius Hofmeister OPITZ CONSULTING Deutschland GmbH OPITZ CONSULTING 2017 OPITZ CONSULTING 2017 Setting the Stage https://upload.wikimedia.org/wikipedia/commons/5/52/summer_solstice_sunrise_over_stonehenge_2005.jpg
More informationAdvance Mobile& Web Application development using Angular and Native Script
Advance Mobile& Web Application development using Angular and Native Script Objective:- As the popularity of Node.js continues to grow each day, it is highly likely that you will use it when you are building
More informationCourse Outline. ProTech Professional Technical Services, Inc. Comprehensive Angular 7 Course Summary. Description
Course Summary Description Use Angular 7 to easily build web applications that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. Learn
More informationBefore proceeding with this tutorial, you should have a basic understanding of HTML, CSS, JavaScript, TypeScript, and Document Object Model (DOM).
i About the Tutorial Angular 4 is a JavaScript framework for building web applications and apps in JavaScript, html, and TypeScript, which is a superset of JavaScript. Angular provides built-in features
More informationIntegrating Angular with ASP.NET Core RESTful Services. Dan Wahlin
Integrating Angular with ASP.NET Core RESTful Services Dan Wahlin Dan Wahlin https://blog.codewithdan.com @DanWahlin Get the Content: http://codewithdan.me/angular-aspnet-core Agenda The Big Picture Creating
More informationTHE ROAD TO ANGULAR 2.0
THE ROAD TO ANGULAR 2.0 ABOUT ME Angular 1.x apps ios apps REST API's in Java Maarten Hus, Developer @ WHY THIS TALK? WAIT WHAT?! GRAVEYARD WHY? DISCLAIMER THE ROAD 1.x Template Syntax 2.0 Types Bindings
More information"Charting the Course... Comprehensive Angular 6 Course Summary
Course Summary Description Build applications with the user experience of a desktop application and the ease of deployment of a web application using Angular. Start from scratch by learning the JavaScript
More informationAdvanced React JS + Redux Development
Advanced React JS + Redux Development Course code: IJ - 27 Course domain: Software Engineering Number of modules: 1 Duration of the course: 40 astr. hours / 54 study 1 hours Sofia, 2016 Copyright 2003-2016
More informationINTRODUCTION TO IONIC 2
LECTURE 7 INTRODUCTION TO IONIC 2 DANIEL RYS JAN VÁCLAVÍK OVERVIEW Create new Ionic2 application Why Ionic2 Project structure Features 2/95 INSTALL IONIC 2 & CREATE NEW APPLICATION $ npm install -g ionic@beta
More informationTemplates and Databinding. SWE 432, Fall 2017 Design and Implementation of Software for the Web
Templates and Databinding SWE 432, Fall 2017 Design and Implementation of Software for the Web Today What are templates? What are frontend components? How can I use these with React? 2 What s wrong with
More informationAngularJS Fundamentals
AngularJS Fundamentals by Jeremy Zerr Blog: http://www.jeremyzerr.com LinkedIn: http://www.linkedin.com/in/jrzerr Twitter: http://www.twitter.com/jrzerr What is AngularJS Open Source Javascript MVC/MVVM
More informationFinancial. AngularJS. AngularJS. Download Full Version :
Financial AngularJS AngularJS Download Full Version : https://killexams.com/pass4sure/exam-detail/angularjs Section 1: Sec One (1 to 50) Details:This section provides a huge collection of Angularjs Interview
More informationANGULAR 10. Christian Ulbrich (Zalari)
ANGULAR 10 Christian Ulbrich (Zalari) The king is dead, long live the king! Christian Ulbrich (Zalari) SHAMELESS SELF-PLUG Zalari UG we do Consulting, Developing, Architecturing AngularJS is our bread
More informationCodeValue. C ollege. Prerequisites: Basic knowledge of web development and especially JavaScript.
Course Syllabuses Introduction to AngularJS Length: 3 days Prerequisites: Basic knowledge of web development and especially JavaScript. Objectives: Students will learn to take advantage of AngularJS and
More informationD3 + Angular JS = Visual Awesomesauce
D3 + Angular JS = Visual Awesomesauce John Niedzwiecki Lead UI Developer - ThreatTrack @RHGeek on Twitter and GitHub In addition to turning caffeine into code... disney geek, runner, gamer, father of two
More informationFinancial. AngularJS. AngularJS.
Financial http://killexams.com/exam-detail/ Section 1: Sec One (1 to 50) Details:This section provides a huge collection of Angularjs Interview Questions with their answers hidden in a box to challenge
More informationTechWatch Report Javascript Libraries and Frameworks
TechWatch Report Javascript Libraries and Frameworks Date: February 2018 Created By: Prateek Vijan, Sanjeevan Biswas Contributors: Vrushali Malushte, Sridatta Pasumarthy, Mayank Kansal, Arindam Nayak Contents
More informationCross-Platform Mobile-Entwicklung mit dem Ionic Framework
Cross-Platform Mobile-Entwicklung mit dem Ionic Framework Robin Nunkesser 6. Februar 2018 Grundlagen Hintergrund 2013 von Drifty entwickelt Setzt auf Cordova und AngularJS auf Versionssprung von ionic
More informationANGULARJS INTERVIEW QUESTIONS
ANGULARJS INTERVIEW QUESTIONS http://www.tutorialspoint.com/angularjs/angularjs_interview_questions.htm Copyright tutorialspoint.com Dear readers, these AngularJS Interview Questions have been designed
More informationAngularJS AN INTRODUCTION. Introduction to the AngularJS framework
AngularJS AN INTRODUCTION Introduction to the AngularJS framework AngularJS Javascript framework for writing frontend web apps DOM manipulation, input validation, server communication, URL management,
More informationFrontend UI Training. Whats App :
Frontend UI Training Whats App : + 916 667 2961 trainer.subbu@gmail.com What Includes? 1. HTML 5 2. CSS 3 3. SASS 4. JavaScript 5. ES 6/7 6. jquery 7. Bootstrap 8. AJAX / JSON 9. Angular JS 1x 10. Node
More informationFrontend Frameworks. SWE 432, Fall 2016 Design and Implementation of Software for the Web
Frontend Frameworks SWE 432, Fall 2016 Design and Implementation of Software for the Web Today How do we build a single page app without dying? MVC/MVVM (AngularJS) For further reading: Book: Learning
More informationModern and Responsive Mobile-enabled Web Applications
Available online at www.sciencedirect.com ScienceDirect Procedia Computer Science 110 (2017) 410 415 The 12th International Conference on Future Networks and Communications (FNC-2017) Modern and Responsive
More informationTypeScript. TypeScript. RxJS
Web 2017.08 About Me TypeScript TypeScript RxJS 2014 X 4 0 Mac/Windows Native UI Web Angular React JavaScript IM User DING Contact RPC Native Nw.js C++ Cef 2014 10 Web 11 nw.js Web App IM DING DING ->
More informationTHE PRAGMATIC INTRO TO REACT. Clayton Anderson thebhwgroup.com WEB AND MOBILE APP DEVELOPMENT AUSTIN, TX
THE PRAGMATIC INTRO TO REACT Clayton Anderson thebhwgroup.com WEB AND MOBILE APP DEVELOPMENT AUSTIN, TX REACT "A JavaScript library for building user interfaces" But first... HOW WE GOT HERE OR: A BRIEF
More informationTim Roes. Android- & inovex in Karlsruhe. GDG Karlsruhe Co-Organizer.
AngularJS Workshop Tim Roes Android- & Web-Developer @ inovex in Karlsruhe GDG Karlsruhe Co-Organizer www.timroes.de/+ Matthias Reuter Web-Developer @ inovex in Karlsruhe @gweax Multipage Application
More informationPHP + ANGULAR4 CURRICULUM 6 WEEKS
PHP + ANGULAR4 CURRICULUM 6 WEEKS Hands-On Training In this course, you develop PHP scripts to perform a variety to takes, culminating in the development of a full database-driven Web page. Exercises include:
More informationInternational Research Journal of Engineering and Technology (IRJET) e-issn: Volume: 05 Issue: 06 June p-issn:
Polymer JavaScript Shabnam Shaikh 1, Lavina Jadhav 2 1Student, Dept. of Institute of Computer Science, MET College, Maharashtra, India 2Professor, Dept. of Institute of Computer Science, MET College, Maharashtra,
More informationFrontend Frameworks Part 2. SWE 432, Fall 2017 Design and Implementation of Software for the Web
Frontend Frameworks Part 2 SWE 432, Fall 2017 Design and Implementation of Software for the Web Today How to make React apps interactive Handling events, state, nesting components, reconciliation, controlled
More informationDNCMagazine. ANGULAR. Cheat Sheet
DNCMagazine www.dotnetcurry.com ANGULAR Cheat Sheet Authors Keerti Kotaru V Keerti Kotaru has been working on web applications for over 15 years now. He started his career as an ASP.Net, C# developer.
More informationHigh Performance Single Page Application with Vue.js
High Performance Single Page Application with Vue.js Premise Static HTML and simple web-pages are already a history now. The novel web applications are advanced and do a lots of functionalities. Also,
More informationAdvanced Angular & Angular 6 Preview. Bibhas Bhattacharya
Advanced Angular & Angular 6 Preview Bibhas Bhattacharya Agenda Lazy loading modules Using Bootstrap with Angular Publish/subscribe with the RxJS Subject API What's new in Angular 6 Lazy Loading Modules
More informationComprehensive AngularJS Programming (5 Days)
www.peaklearningllc.com S103 Comprehensive AngularJS Programming (5 Days) The AngularJS framework augments applications with the "model-view-controller" pattern which makes applications easier to develop
More informationHTML5 Evolution and Development. Matt Spencer UI & Browser Marketing Manager
HTML5 Evolution and Development Matt Spencer UI & Browser Marketing Manager 1 HTML5 Ratified. finally! After 7 years of development, the HTML5 specification was ratified on 28 th October 14 urce>
More informationWeb Development for Dinosaurs An Introduction to Modern Web Development
Web Development for Dinosaurs An Introduction to Modern Web Development 1 / 53 Who Am I? John Cleaver Development Team Lead at Factivity, Inc. An Introduction to Modern Web Development - PUG Challenge
More informationQuestions and Answers from Lukas Ruebbelke s AngularJS In-Depth Course
Questions and Answers from Lukas Ruebbelke s AngularJS In-Depth Course What is the best way to load large amounts of data with infinite scrolling? Would you recommend nginfinitescroll or is there another
More informationJavaScript Frameworks
JavaScript Frameworks A Comparison Of Titans Philip Esmailzade philipesmailzade@gmail.com Faculty of Computing Blekinge Institute of Technology SE-371 79 Karlskrona Sweden ABSTRACT There are several JavaScript
More informationWelcome. Quick Introductions
AEK Introduction Welcome Quick Introductions "The AEK"? Application Extension Kit Technique for delivering cross-platform application screens via a webview A development framework that provides a responsive
More informationSimple AngularJS thanks to Best Practices
Simple AngularJS thanks to Best Practices Learn AngularJS the easy way Level 100-300 What s this session about? 1. AngularJS can be easy when you understand basic concepts and best practices 2. But it
More informationADVANCED JAVASCRIPT #8
ADVANCED JAVASCRIPT #8 8.1 Review JS 3 A conditional statement can compare two values. Here we check if one variable we declared is greater than another. It is true so the code executes. var cups = 15;
More informationLearn to Build Awesome Apps with Angular 2
Learn to Build Awesome Apps with Angular 2 Strong grasp on how to construct a single feature in Angular 2 Agenda The Demo Application The Angular 2 Big Picture The Angular CLI Components Templates Services
More informationReact(.js) the Domino Way High-Performance Client for Domino. Knut Herrmann
React(.js) the Domino Way High-Performance Client for Domino Knut Herrmann CollabSphere 2018 Sponsors Knut Herrmann Senior Software Architect Leonso GmbH Notes Domino developer since version 2 Web application
More informationDecoupled Drupal with Angular
Decoupled Drupal with Angular Agenda Introduction Short intro on Drupal What is decoupled and choosing the right architecture Introduction to Angular Setting up Angular development environment Demo Application
More informationUI Course HTML: (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) Introduction. The World Wide Web (WWW) and history of HTML
UI Course (Html, CSS, JavaScript, JQuery, Bootstrap, AngularJS) HTML: Introduction The World Wide Web (WWW) and history of HTML Hypertext and Hypertext Markup Language Why HTML Prerequisites Objective
More informationMarkeplace web application with Foglab (Foglab with Marketplace)
Sunil Maharjan Markeplace web application with Foglab (Foglab with Marketplace) Helsinki Metropolia University of Applied Sciences Bachelor of Engineering Information Technology Bachelor s Thesis 11 th
More informationAngularJS Introduction
AngularJS Introduction Mendel Rosenblum AngularJS JavaScript framework for writing web applications Handles: DOM manipulation, input validation, server communication, URL management, etc. Considered opinionated
More informationAdvantages: simple, quick to get started, perfect for simple forms, don t need to know how form model objects work
1 Forms 1.1 Introduction You cannot enter data in an application without forms. AngularJS allowed the user to create forms quickly, using the NgModel directive to bind the input element to the data in
More informationQ2D8T#YH# BYUQTUQ+ *")#+,-./,01#2../,345,67#869,3#47:#+5;<35<;=!"""""""""""# $& B675;6//=;#CD/645E!
A Publication of Q2D8T#YH# BYUQTUQ+!"#$%&'()*+&,(%!"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""# $% -"#.%&,/01&&2'%3#4#523(6*&,(% """"""""""""""""""""""""""""""""""""# $& *")#+,-./,01#2../,345,67#869,3#47:#+5;
More informationJavaScript and MVC Frameworks FRONT-END ENGINEERING
FRONT-END ENGINEERING Introduction & History Introduction JavaScript is an incredible language to learn for anyone interested in getting into programming. It is the only programing language that can run
More informationPHP WITH ANGULAR CURRICULUM. What you will Be Able to Achieve During This Course
PHP WITH ANGULAR CURRICULUM What you will Be Able to Achieve During This Course This course will enable you to build real-world, dynamic web sites. If you've built websites using plain HTML, you realize
More informationAngular. конфигурируем до неузнаваемости
Angular конфигурируем до неузнаваемости 1 АЛЕКСЕЙ ОХРИМЕНКО TWITTER: AI_BOY setinterval(learnjavascript) 2 ? IPONWEB 9 10 Awesome Telegram RU https://github.com/aiboy/awesome-telegram-ru Какое важное
More informationFull Stack boot camp
Name Full Stack boot camp Duration (Hours) JavaScript Programming 56 Git 8 Front End Development Basics 24 Typescript 8 React Basics 40 E2E Testing 8 Build & Setup 8 Advanced JavaScript 48 NodeJS 24 Building
More informationVue.js Developer friendly, Fast and Versatile
.consulting.solutions.partnership Vue.js Developer friendly, Fast and Versatile Alexander Schwartz, Principal IT Consultant Javaland 2018 Brühl (DE) March 2018 Vue.js developer friendly, fast and versatile
More informationTarek Elachkar, VP Customer Solutions - Jahia A real world story of Angular and Apache Unomi integration.
Tarek Elachkar, VP Customer Solutions - Jahia telachkar@jahia.com A real world story of Angular and Apache Unomi integration #ApacheCon 1 QUICK INTRODUCTIONS Me, myself and I QUICK INTRODUCTIONS Our software
More informationStencil: The Time for Vanilla Web Components has Arrived
Stencil: The Time for Vanilla Web Components has Arrived Gil Fink sparxys CEO @gilfink / www.gilfink.net Typical Application Web Page Design From Design to Implementation Session List Day tabs Component
More informationAngularJS Intro Homework
AngularJS Intro Homework Contents 1. Overview... 2 2. Database Requirements... 2 3. Navigation Requirements... 3 4. Styling Requirements... 4 5. Project Organization Specs (for the Routing Part of this
More informationProgressive web app. Juraj Kubala
Progressive web app with Angular 2 and ASP.NET Juraj Kubala Bachelor s thesis December 2017 School of Technology, Communication and Transport Degree Programme in Information and Communications Technology
More informationA conditional statement can compare two values. Here we check if one variable we declared is greater than another. It is true so the code executes.
ANGULARJS #7 7.1 Review JS 3 A conditional statement can compare two values. Here we check if one variable we declared is greater than another. It is true so the code executes. var cups = 15; var saucers
More informationBOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION
BOOSTING THE SECURITY OF YOUR ANGULAR 2 APPLICATION Philippe De Ryck NG-BE Conference, December 9 th 2016 https://www.websec.be ABOUT ME PHILIPPE DE RYCK My goal is to help you build secure web applications
More informationFull Stack Web Developer
Full Stack Web Developer S.NO Technologies 1 HTML5 &CSS3 2 JavaScript, Object Oriented JavaScript& jquery 3 PHP&MYSQL Objective: Understand the importance of the web as a medium of communication. Understand
More informationWhat is AngularJS. à Javascript Framework à MVC à for Rich Web Application Development à by Google
AngularJS What is AngularJS à Javascript Framework à MVC à for Rich Web Application Development à by Google Why AngularJS Other frameworks deal with HTML s shortcomings by either abstracting away HTML,
More informationSoftware Architecture Documentation for the JRC MYGEOSS app for Invasive Species project
Software Architecture Documentation for the JRC MYGEOSS app for Invasive Species project 2015.3724 Table of Contents 1 Architecture View... 2 2 Application... 3 2.1 Technologies Used... 3 2.1.1 Apache
More informationIntroduction to AngularJS
CHAPTER 1 Introduction to AngularJS Google s AngularJS is an all-inclusive JavaScript model-view-controller (MVC) framework that makes it very easy to quickly build applications that run well on any desktop
More informationReact. SWE 432, Fall Web Application Development
React SWE 432, Fall 2018 Web Application Development Review: What is state? All internal component data that, when changed, should trigger UI update Stored as single JSON object this.state What isn t state?
More information3 Days Training Program
3 Days Training Program What is AngularJS? A JavaScript framework for creating dynamic web applications Open Source GitHub: https://github.com/angular/angular.js MIT License Uses jquery jquery 1.7.1 or
More informationModern SharePoint and Office 365 Development
Modern SharePoint and Office 365 Development Mastering Today s Best Practices in Web and Mobile Development Course Code Audience Format Length Course Description Student Prerequisites MSD365 Professional
More informationFrom Browser Wars to Framework Wars How to survive the next generation of Web development battles. Dr. Michael Evans Codernetic Ltd untangled.
From Browser Wars to Framework Wars How to survive the next generation of Web development battles Dr. Michael Evans Codernetic Ltd untangled.io Who Am I?! Worked with Web technologies since 1996 PhD, Patent
More informationComprehensive Angular 2 Review of Day 3
Form Validation: built in validators: added to template: required minlength maxlength pattern form state: state managed through NgModel classes: control has been visited: ng-touched or ng-untouched control
More informationP a g e 1. Danish Technological Institute. Scripting and Web Languages Online Course k Scripting and Web Languages
P a g e 1 Online Course k72853 Scripting and Web Languages P a g e 2 Title Estimated Duration (hrs) JsRender Fundamentals 2 Advanced JsRender Features 3 JavaScript SPA: Getting Started with SPA in Visual
More informationNagaraju Bende
AngularJS Nagaraju Bende Blog Twitter @nbende FaceBook nbende http://angularjs.org Agenda Introduction to AngularJS Pre-Requisites Why AngularJS Only Getting Started MV* pattern of AngularJS Directives,
More informationAngularJS. Beginner's guide - part 1
AngularJS Beginner's guide - part 1 AngularJS: 2 AngularJS: Superheroic JavaScript MVW Framework 3 AngularJS: Superheroic JavaScript MVW Framework 4 AngularJS: Superheroic JavaScript MVW Framework Javascript
More informationSetting up an Angular 4 MEAN Stack (Tutorial)
Setting up an Angular 4 MEAN Stack (Tutorial) MEAN4 Stack, MongoDB, Express.js, Angular4, Node.js6.11.4 Installed https://coursetro.com/posts/code/84/setting-up-an-angular-4-mean-stack-(tutorial) Node.js
More informationIntroduction to TypeScript
AngularJS and TypeScript SPA Development, http://www.iproduct.org/ Introduction to TypeScript e-mail: tiliev@iproduct.org web: http://www.iproduct.org Oracle, Java and JavaScript are trademarks or registered
More informationWeb Components. Reactive Architecture for the Front End. Steven Skelton. Reactive Programming Toronto December 3, 2014
Web Components Reactive Architecture for the Front End Steven Skelton Reactive Programming Toronto December 3, 2014 Reactive Manifesto Is a pattern for building software capable of handling today's application
More information