Angular 2 is a JavaScript framework for building client applications. It uses TypeScript for static typing and supports mobile and desktop applications. The key aspects covered are components, which encapsulate templates and logic, bindings for data flow, services for reusable logic, routers for navigation, and directives for extending DOM elements. The document recommends using the Angular CLI for building applications and compares Angular 2 to other frameworks, noting its emphasis on simplicity, functionality, and convenience.
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016Codemotion
Angular 2 is a complete rewrite of the AngularJS framework, which introduces new approaches and leverages the latest technologies. Simplifying and generalizing core concepts, the performance is improved and the range of capabilities is broadened. In this session Shmuela will help you understand the core concepts of Angular 2 apps: the component-based architecture, dependency injection, change detection, and more.
"Angular 2: core concepts" by Fabio Biondi, Matteo Ronchi.
Angular 2 risolve problematiche e lacune della precedente versione, prestando particolare attenzione alle performance, al supporto mobile e alla qualità e leggibilità del codice prodotto. In questo talk verranno illustrate le funzionalità più significative tra cui: - nuova architettura totalmente orientata ai componenti - rimozione di $scope e del dirty checking ($digest) - adozione di un flow unidirezionale - utilizzo di Typescript, ES6 o ES5 - completa rivisitazione del motore di Dependency Injection - nuove procedure per il bootstrap dell’applicazione.
Developing a Demo Application with Angular 4 - J2INader Debbabi
Introduction to Angular Material, Angular Router and Angular Http with RxJS library.
Fake REST API set up using json-server.
Demo app source code available at: https://github.com/jeuneingenieurisamm/LangInstitute
With angular 2.0 being in developer preview, it’s a good time to take a sneak peek. To see what to expect and can you benefit from it join us at lecture by Ivan Varga at Axilis and find out.
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016Codemotion
Angular 2 is a complete rewrite of the AngularJS framework, which introduces new approaches and leverages the latest technologies. Simplifying and generalizing core concepts, the performance is improved and the range of capabilities is broadened. In this session Shmuela will help you understand the core concepts of Angular 2 apps: the component-based architecture, dependency injection, change detection, and more.
"Angular 2: core concepts" by Fabio Biondi, Matteo Ronchi.
Angular 2 risolve problematiche e lacune della precedente versione, prestando particolare attenzione alle performance, al supporto mobile e alla qualità e leggibilità del codice prodotto. In questo talk verranno illustrate le funzionalità più significative tra cui: - nuova architettura totalmente orientata ai componenti - rimozione di $scope e del dirty checking ($digest) - adozione di un flow unidirezionale - utilizzo di Typescript, ES6 o ES5 - completa rivisitazione del motore di Dependency Injection - nuove procedure per il bootstrap dell’applicazione.
Developing a Demo Application with Angular 4 - J2INader Debbabi
Introduction to Angular Material, Angular Router and Angular Http with RxJS library.
Fake REST API set up using json-server.
Demo app source code available at: https://github.com/jeuneingenieurisamm/LangInstitute
With angular 2.0 being in developer preview, it’s a good time to take a sneak peek. To see what to expect and can you benefit from it join us at lecture by Ivan Varga at Axilis and find out.
What is a Angular Js ?
What is the main benefits of Angular Js ?
What is the difference between Angular js 1 and Angular js 2 ?
Structure of Angular Js ?
Choose of Language|Editor ?
Introduction of Components.
Template, Interpolation and Directives.
Data Binding and Pipes.
,Angular 2 is Javascript framework
Slide deck presented during my session on "Introduction to Angular 2" at UNICOM DevCon 2016 conference on Thursday, Dec 1, 2016. The conference was at Mövenpick Hotel & Spa, Bengaluru.
This presentation has been prepared by Oleksii Prohonnyi for internal Angular.js training to improve skills of newbies in JS/Angular.
Part 1 (Introduction): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-1-introduction
Part 2 (Architecture): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-2-architecture
Part 3 (Performance): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-3-performance
Part 5 (Experience): https://www.slideshare.net/oprohonnyi/dive-into-angular-part-5-experience
Migrating an Application from Angular 1 to Angular 2 Ross Dederer
Migrating Angular 1 to Angular 2: I can summarize my experience in migration in one phrase: Angular 1 and Angular 2 are very different. To help navigate through these differences, I have chosen an existing Angular 1 application and ported it over to Angular 2. This is not any old existing application but an application that has been around for almost a decade originally developed my Microsoft in Silverlight.
I will walk you through the steps of migration as well as sharing insights and problems I faced along the way. Additionally, with Google recommending developers use TypeScript, I will walk you through core concepts such as type safety, encapsulation, and MVVM development patterns. You will find side by side code comparisons for each topic.
About me : As a Developer Relations Engineer at ComponentOne, a division of GrapeCity, Ross Dederer has spent his entire professional life helping others navigate the complex technology environment. Ross works closely with clients and developer teams to provide solutions that impact software development experiences. Traveling to code camps, conferences and meeting with corporate clients, Ross is able to pursue his passion of helping the community grow.
Migrating an application from Angular 1 to Angular 2 Ross Dederer
Learn how to make the jump to Angular 2 with Wijmo’s JavaScript UI controls!
With the recent release of the Angular 2 Beta, you’re probably asking if it’s worth it to make the jump from Angular 1. During this talk, we’ll share some tips and tricks on migration, as well as concepts that we learned along the way when migrating from Angular 1 to Angular 2. Wijmo has been developing controls in Angular 1 for quite some time now, and migrating our controls to the new Angular 2 beta was a pretty straightforward process.
You’ll learn:
Introduction to TypeScript and Angular 2.0 beta
The process of converting a Microsoft MVVM-featured application (the Microsoft DataServices QuickStart sample) from Angular 1.x to Angular 2.0, including:
How to convert business logic from JavaScript to the more C#-like TypeScript language
About the component and companion template role syntax using plain HTML and Wijmo controls (including Angular 2 FlexGrid and Input controls)
Additional tips and tricks to enhance your experience in Visual Studio
Slides from my latest talk (and videos) about Angular dependency
injection, You can find related videos here: https://www.youtube.com/playlist?list=PLfZsWIHsTcftJl7WlidsXSBAHBXQBR4j2
Tech Webinar: Angular 2, Introduction to a new frameworkCodemotion
Fabio Biondi e Matteo Ronchi ci presentano AngularJS 2, analizzando la nuova sintassi per la creazione di componenti che ora assumono un ruolo fondamentale all’interno del framework.
Iscriviti qui per partecipare ad altri Tech Webinar: http://goo.gl/iW81VD
Scrivici a training@codemotion.it
Tw: @codemotionTR
In this presentation I'll share the basics of Polymer and Web Components. The presentation is divided in three sections; Development, Design and Deploy your Polymer project.
The presentation was held 2016-02-24 in Turku <3 Frontend meetup.
What is a Angular Js ?
What is the main benefits of Angular Js ?
What is the difference between Angular js 1 and Angular js 2 ?
Structure of Angular Js ?
Choose of Language|Editor ?
Introduction of Components.
Template, Interpolation and Directives.
Data Binding and Pipes.
,Angular 2 is Javascript framework
Slide deck presented during my session on "Introduction to Angular 2" at UNICOM DevCon 2016 conference on Thursday, Dec 1, 2016. The conference was at Mövenpick Hotel & Spa, Bengaluru.
This presentation has been prepared by Oleksii Prohonnyi for internal Angular.js training to improve skills of newbies in JS/Angular.
Part 1 (Introduction): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-1-introduction
Part 2 (Architecture): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-2-architecture
Part 3 (Performance): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-3-performance
Part 5 (Experience): https://www.slideshare.net/oprohonnyi/dive-into-angular-part-5-experience
Migrating an Application from Angular 1 to Angular 2 Ross Dederer
Migrating Angular 1 to Angular 2: I can summarize my experience in migration in one phrase: Angular 1 and Angular 2 are very different. To help navigate through these differences, I have chosen an existing Angular 1 application and ported it over to Angular 2. This is not any old existing application but an application that has been around for almost a decade originally developed my Microsoft in Silverlight.
I will walk you through the steps of migration as well as sharing insights and problems I faced along the way. Additionally, with Google recommending developers use TypeScript, I will walk you through core concepts such as type safety, encapsulation, and MVVM development patterns. You will find side by side code comparisons for each topic.
About me : As a Developer Relations Engineer at ComponentOne, a division of GrapeCity, Ross Dederer has spent his entire professional life helping others navigate the complex technology environment. Ross works closely with clients and developer teams to provide solutions that impact software development experiences. Traveling to code camps, conferences and meeting with corporate clients, Ross is able to pursue his passion of helping the community grow.
Migrating an application from Angular 1 to Angular 2 Ross Dederer
Learn how to make the jump to Angular 2 with Wijmo’s JavaScript UI controls!
With the recent release of the Angular 2 Beta, you’re probably asking if it’s worth it to make the jump from Angular 1. During this talk, we’ll share some tips and tricks on migration, as well as concepts that we learned along the way when migrating from Angular 1 to Angular 2. Wijmo has been developing controls in Angular 1 for quite some time now, and migrating our controls to the new Angular 2 beta was a pretty straightforward process.
You’ll learn:
Introduction to TypeScript and Angular 2.0 beta
The process of converting a Microsoft MVVM-featured application (the Microsoft DataServices QuickStart sample) from Angular 1.x to Angular 2.0, including:
How to convert business logic from JavaScript to the more C#-like TypeScript language
About the component and companion template role syntax using plain HTML and Wijmo controls (including Angular 2 FlexGrid and Input controls)
Additional tips and tricks to enhance your experience in Visual Studio
Slides from my latest talk (and videos) about Angular dependency
injection, You can find related videos here: https://www.youtube.com/playlist?list=PLfZsWIHsTcftJl7WlidsXSBAHBXQBR4j2
Tech Webinar: Angular 2, Introduction to a new frameworkCodemotion
Fabio Biondi e Matteo Ronchi ci presentano AngularJS 2, analizzando la nuova sintassi per la creazione di componenti che ora assumono un ruolo fondamentale all’interno del framework.
Iscriviti qui per partecipare ad altri Tech Webinar: http://goo.gl/iW81VD
Scrivici a training@codemotion.it
Tw: @codemotionTR
In this presentation I'll share the basics of Polymer and Web Components. The presentation is divided in three sections; Development, Design and Deploy your Polymer project.
The presentation was held 2016-02-24 in Turku <3 Frontend meetup.
Polymer Elements: Tudo que você precisa saber para criar a webBeto Muniz
Abordagem da camada de elementos oferecida pelo Polymer. Iremos conceitualizar, ver exemplos de elementos criados com Polymer, ver os tipos de elementos oferecidos pela biblioteca e muito mais. Sem dúvidas, após esta palestra, você ficará se coçando para criar elementos com todo o poder que o Polymer tem a oferecer.
Palestra apresentada no Hangout sobre Material Design do GDG de Blumenau no dia 17/12/2014.
Vídeo do Hangout: https://www.youtube.com/watch?v=A-_wA9dWWDI
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09Horacio Gonzalez
The Paris Web Components Meetup proposed a session to compare several component-oriented frameworks, where each speaker made the case of his or her favorite framework and showed the implementation of the same webapp done with the chosen framework. I did the Polymer presentation.
Material Design - do smartphone ao desktopHillary Sousa
Você já deve ter visto, no seu celular, a mais nova tendência em web design: o Material Design. Mas como ele funciona? E, o principal, como levar essa nova tendência do smartphone para o desktop?
No 19º WordPress Meetup Rio de Janeiro, Hillary Sousa falará sobre Material Design, o framework de design da Google.
Polymer and Firebase: Componentizing the Web in RealtimeJuarez Filho
Polymer and Web Components is providing a new way to build web applications and Firebase brings realtime database integration to your applications in an easy way.
Learn how to create extraordinary web apps with Polymer and Firebase together.
Probabilmente il framework javascript più atteso di sempre, evoluzione di uno dei framework più longevi ed usati nello sviluppo front end. Si vedranno alcune delle novità introdotte e delle scelte radicali fatte da Google per la nuova versione di Angular
“Angular 2-in-1" is an attempt to show both theory+practice, cons & pros of technology, in single turn. As a result, each listener could make his own, conscious choice of tools for work and play.
This presentation by Rostyslav Siryk (Senior Software Engineer, Consultant, GlobalLogic Kharkiv) was delivered at GlobalLogic Kharkiv JS TechTalk on December 18, 2017.
This fast-paced overview for beginners discusses some aspects of AngularJS 1.x and 2.x, which versions to learn (and why), and the technologies that you need to learn. We'll delve into examples of combining AngularJS with other technologies (such as BackboneJS and D3.js), and also address the +/- of AngularJS.
Presented during Javascript MVC Amsterdam meetup, 29 Jan 2014: http://www.meetup.com/JavaScript-MVC-Meetup-Amsterdam/events/156767102/
At De Voorhoede (http://voorhoede.nl) I'm responsible for setting up new front-end projects in such a way that it's easy for teams to work with. This presentation explains how we structure these projects. The presentation includes some tips on structuring larger AngularJS projects.
Understanding router state in angular 7 passing data through angular router s...Katy Slemon
Understanding Router State in Angular 7: Check out this tutorial to explore the new Angular feature for passing data through Angular RouterState with a demo app
Full-RAG: A modern architecture for hyper-personalizationZilliz
Mike Del Balso, CEO & Co-Founder at Tecton, presents "Full RAG," a novel approach to AI recommendation systems, aiming to push beyond the limitations of traditional models through a deep integration of contextual insights and real-time data, leveraging the Retrieval-Augmented Generation architecture. This talk will outline Full RAG's potential to significantly enhance personalization, address engineering challenges such as data management and model training, and introduce data enrichment with reranking as a key solution. Attendees will gain crucial insights into the importance of hyperpersonalization in AI, the capabilities of Full RAG for advanced personalization, and strategies for managing complex data integrations for deploying cutting-edge AI solutions.
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionAggregage
Join Maher Hanafi, VP of Engineering at Betterworks, in this new session where he'll share a practical framework to transform Gen AI prototypes into impactful products! He'll delve into the complexities of data collection and management, model selection and optimization, and ensuring security, scalability, and responsible use.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Enchancing adoption of Open Source Libraries. A case study on Albumentations.AIVladimir Iglovikov, Ph.D.
Presented by Vladimir Iglovikov:
- https://www.linkedin.com/in/iglovikov/
- https://x.com/viglovikov
- https://www.instagram.com/ternaus/
This presentation delves into the journey of Albumentations.ai, a highly successful open-source library for data augmentation.
Created out of a necessity for superior performance in Kaggle competitions, Albumentations has grown to become a widely used tool among data scientists and machine learning practitioners.
This case study covers various aspects, including:
People: The contributors and community that have supported Albumentations.
Metrics: The success indicators such as downloads, daily active users, GitHub stars, and financial contributions.
Challenges: The hurdles in monetizing open-source projects and measuring user engagement.
Development Practices: Best practices for creating, maintaining, and scaling open-source libraries, including code hygiene, CI/CD, and fast iteration.
Community Building: Strategies for making adoption easy, iterating quickly, and fostering a vibrant, engaged community.
Marketing: Both online and offline marketing tactics, focusing on real, impactful interactions and collaborations.
Mental Health: Maintaining balance and not feeling pressured by user demands.
Key insights include the importance of automation, making the adoption process seamless, and leveraging offline interactions for marketing. The presentation also emphasizes the need for continuous small improvements and building a friendly, inclusive community that contributes to the project's growth.
Vladimir Iglovikov brings his extensive experience as a Kaggle Grandmaster, ex-Staff ML Engineer at Lyft, sharing valuable lessons and practical advice for anyone looking to enhance the adoption of their open-source projects.
Explore more about Albumentations and join the community at:
GitHub: https://github.com/albumentations-team/albumentations
Website: https://albumentations.ai/
LinkedIn: https://www.linkedin.com/company/100504475
Twitter: https://x.com/albumentations
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
UiPath Test Automation using UiPath Test Suite series, part 5DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 5. In this session, we will cover CI/CD with devops.
Topics covered:
CI/CD with in UiPath
End-to-end overview of CI/CD pipeline with Azure devops
Speaker:
Lyndsey Byblow, Test Suite Sales Engineer @ UiPath, Inc.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Threats to mobile devices are more prevalent and increasing in scope and complexity. Users of mobile devices desire to take full advantage of the features
available on those devices, but many of the features provide convenience and capability but sacrifice security. This best practices guide outlines steps the users can take to better protect personal devices and information.
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!SOFTTECHHUB
As the digital landscape continually evolves, operating systems play a critical role in shaping user experiences and productivity. The launch of Nitrux Linux 3.5.0 marks a significant milestone, offering a robust alternative to traditional systems such as Windows 11. This article delves into the essence of Nitrux Linux 3.5.0, exploring its unique features, advantages, and how it stands as a compelling choice for both casual users and tech enthusiasts.
Communications Mining Series - Zero to Hero - Session 1DianaGray10
This session provides introduction to UiPath Communication Mining, importance and platform overview. You will acquire a good understand of the phases in Communication Mining as we go over the platform with you. Topics covered:
• Communication Mining Overview
• Why is it important?
• How can it help today’s business and the benefits
• Phases in Communication Mining
• Demo on Platform overview
• Q/A
GridMate - End to end testing is a critical piece to ensure quality and avoid...ThomasParaiso2
End to end testing is a critical piece to ensure quality and avoid regressions. In this session, we share our journey building an E2E testing pipeline for GridMate components (LWC and Aura) using Cypress, JSForce, FakerJS…
Maruthi Prithivirajan, Head of ASEAN & IN Solution Architecture, Neo4j
Get an inside look at the latest Neo4j innovations that enable relationship-driven intelligence at scale. Learn more about the newest cloud integrations and product enhancements that make Neo4j an essential choice for developers building apps with interconnected data and generative AI.
Climate Impact of Software Testing at Nordic Testing DaysKari Kakkonen
My slides at Nordic Testing Days 6.6.2024
Climate impact / sustainability of software testing discussed on the talk. ICT and testing must carry their part of global responsibility to help with the climat warming. We can minimize the carbon footprint but we can also have a carbon handprint, a positive impact on the climate. Quality characteristics can be added with sustainability, and then measured continuously. Test environments can be used less, and in smaller scale and on demand. Test techniques can be used in optimizing or minimizing number of tests. Test automation can be used to speed up testing.
In his public lecture, Christian Timmerer provides insights into the fascinating history of video streaming, starting from its humble beginnings before YouTube to the groundbreaking technologies that now dominate platforms like Netflix and ORF ON. Timmerer also presents provocative contributions of his own that have significantly influenced the industry. He concludes by looking at future challenges and invites the audience to join in a discussion.
5. What is Angular 2?
JavaScript Framework
Cross platform
Fully component based
Built from the ground up with TypeScript
Native ES6 modules
Supports server-side prerendering
Hello and welcome to this tech lunch about Angular 2-.
In one mapa couple of weeks ago Jens and Jouni did a small presentation about angular 2 and this is how they portrated it. Being this evil empire that is gathering followers througout the galaxy.
But I like to see things differently, and hopefully after this tech lunch so will you.
muista että atomissa on valkoinen teema
And this is how I see the current situation. There are a lot of different frameworks all around the galaxy fighting for supremacy. And here in the middle we can see this old princess called AngularJs. And she pretty much started this whole fight back in the year 2010. And after that she gotten a lot different rivals, like React and Polymer. But no worries, a new hope has emerged in the galaxy and that is of course Angular 2. (click) Being the new hope and restoring some balance to the internet.
So yeah, topic of today is Angular 2 and for those who don’t know me, my name is Sami Suo-Heikki and this is actually my first tech lunch.
So to the first question in hand, what is Angular 2? I’m assuming that most of you already know what Angular 2 is and what its used for. But still lets make a small recap about it.
Javascript framework: For building awesome and lighting fast applications.
Cross platform: Meaning that you can use it to build other stuff than just web apps, but I’ll soon tell you a bit more about that.
Fully component based:framework is component based. When you are loading angular 2, you are just loading the core of it. Meaning that you don’t have to load every feature that is has, but only the things that you really need. And also with Angular you easily build your own application to be a component based and that is a best practice.
Built from the ground up with TypeScript: meaning Types are a first class construct.
Native ES6 modules:
-no more endless script tags.
-The ES6 module standard has two parts:-Declarative syntax (for importing and exporting)-Programmatic loader API: to configure how modules are loaded and to conditionally load modules
Server side prerendering: Just like other JS framework called React, Angular 2 also supports server-side prerendering. This means that you can render the first view of your application in the server-side, meaning that the first view the user sees is loaded with a speed of lighting. And you can easily do this like with Node.js
They promote themselves as one framework which can be used for basically creating any application. But that’s kinda marketing bullshit of course. But yeah one framework for mobile and desktop, and when I say mobile and desktop I don’t just mean mobile and desktop sized web applications. But real mobile and desktop applications. Even native mobile applications. But in these cases you need to use a library of your choosing.
and when i say one framework for mobile and desktop, I don’t just mean responsive web applications that looks nice on mobile and desktop. But with Angular 2 you can even create desktop and mobile applications.
And here couple of examples like Ionic:
And how ionic works is that you are working with web views and Ionic gives you tools on bulding UIs that look native on iOS, android and Windows phone. But use web views like you use on the web. But it also gives you the access to all the native features that you propably want like the camera and gps.
And another example is NativeScript and they give a renderer that actually uses the native UI elements on Android, ios and windows. So you can build your app using javascript in Angular 2 but having fully native UI.
And for desktop applications you can use Electron. and what they give you is a part of chrome for rendering and node for processing in one package. and with it you can get access to all platform APIs like hardware.
and these are not all features that are in Angular 2, but due to a limited time, this is what we are going to check out next.
Encapsulate the template, data and the behaviour of a view. So it would be more accurate to call it a view component. Every angular 2 app has at least one component which can be called the root component. And inside components can be several other components. It will help breaking up a big application into a smaller and managable components. And these components can be re-used in different places in our app or in a totally different application.
A Component controls a patch of screen real estate that we could call a view. We define a Component's application logic - what it does to support the view - inside a class. The class interacts with the view through an API of properties and methods.
And now you might be thinking that what do these components look like? They are actually just a plain typescript classes. And it can have properties and methods. And these properties hold the data for the view and the methods implement the behavior of the view.
A Component controls a patch of screen real estate that we could call a view. We define a Component's application logic - what it does to support the view - inside a class. The class interacts with the view through an API of properties and methods.
And not you might be thinking that what do these components look like? They are actually just a plain typescript classes. And it can have properties and methods. And these properties hold the data for the view and the methods implement the behavior of the view.
A Component controls a patch of screen real estate that we could call a view. We define a Component's application logic - what it does to support the view - inside a class. The class interacts with the view through an API of properties and methods.
And not you might be thinking that what do these components look like? They are actually just a plain typescript classes. And it can have properties and methods. And these properties hold the data for the view and the methods implement the behavior of the view.
A Component controls a patch of screen real estate that we could call a view. We define a Component's application logic - what it does to support the view - inside a class. The class interacts with the view through an API of properties and methods.
And not you might be thinking that what do these components look like? They are actually just a plain typescript classes. And it can have properties and methods. And these properties hold the data for the view and the methods implement the behavior of the view.
A Component controls a patch of screen real estate that we could call a view. We define a Component's application logic - what it does to support the view - inside a class. The class interacts with the view through an API of properties and methods.
And one key thing to realize is that these components are totally decoupled from the DOM. So please, no jQuery in Angular 2 applications.
So instead of accessing the dom, we use binding
So instead of accessing the dom, we use binding. If we example change the name, the dom element attached to this property would automatically update. So we don’t need a reference for that dom element in order to update it.
Similarly to handle an event raised from the dom element like click or keyInput, we can bind it to a method in our component. And decoupling our component from the dom makes our component a unit testable. Because if you just have a class with no references to elements we can easily test it and don’t require the dom.
And how to two way data binding is handled in Angular 2? Pretty easy actually. Application’s and user's changes flows both ways, handling both property changes and event binding. Without a framework, we would be responsible for pushing data values into the HTML controls and turning user responses into actions and value updates. Writing such push/pull logic by hand would be hard and a nightmare as any experienced jQuery programmer can confirm.
And the next thing is services, which actually not Angular 2 specific thing, but actually just a resuable data service that you can build in between your application and backend service. So a good thing is to delegate everything that is not needed for the view to the service. So a service is just a plain class that can encapsulate different non-ui logic of your application.
For example Data access, making http calls, logging, business logic and configurations of your application.
And another key player in our Angular 2 application is the router, which suprise suprise responsible for navigation. So it will subscribe to changes in the url and to figure out what component to present to the user.
And the last key player in Angular is the Directive. And similary as to components is that we use them to work with the UI. But unlike the component, the directive doesn’t have a template or any HTML itself. It is just for modifying the existing DOM elements. And one example of a directive is what the Elements and the pro team here has built for the Vaadin Elements.