This document discusses Angular components, dependency injection, and routing. It defines Angular as being built on modules, components, templates, and services. Components are the basic building blocks and make up a hierarchical tree structure. Dependency injection allows components to access services. Routing in Angular uses a router to navigate between views and components based on URL changes.
Http Service will help us fetch external data, post to it, etc. We need to import the http module to make use of the http service. Let us consider an example to understand how to make use of the http service.
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.
TypeScript lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript is pure object oriented with classes, interfaces and statically typed like C# or Java. The popular JavaScript framework Angular 2.0 is written in TypeScript. Mastering TypeScript can help programmers to write object-oriented programs and have them compiled to JavaScript, both on server side and client side.
Angular - Chapter 4 - Data and Event HandlingWebStackAcademy
In Angular , events such as button click or any other sort of events can also be handled very easily. The events get triggered from the html page and are sent across to Angular JS class for further processing.
Data binding is a core concept in Angular and allows to define communication between a component and the DOM, making it very easy to define interactive applications without worrying about pushing and pulling data. There are four forms of data binding and they differ in the way the data is flowing.
Http Service will help us fetch external data, post to it, etc. We need to import the http module to make use of the http service. Let us consider an example to understand how to make use of the http service.
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.
TypeScript lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript is pure object oriented with classes, interfaces and statically typed like C# or Java. The popular JavaScript framework Angular 2.0 is written in TypeScript. Mastering TypeScript can help programmers to write object-oriented programs and have them compiled to JavaScript, both on server side and client side.
Angular - Chapter 4 - Data and Event HandlingWebStackAcademy
In Angular , events such as button click or any other sort of events can also be handled very easily. The events get triggered from the html page and are sent across to Angular JS class for further processing.
Data binding is a core concept in Angular and allows to define communication between a component and the DOM, making it very easy to define interactive applications without worrying about pushing and pulling data. There are four forms of data binding and they differ in the way the data is flowing.
Presentation about new Angular 9.
It gives introduction about angular framework.
Provides information about why we use angular,
additional features and fixes from old versions. It will clearly explain how to create a new angular project and how to use angular commands and their usages.
It will also explain about the key components like angular architecture, routing, dependency injection etc.,
This Edureka "Angular Directives" tutorial will help you to learn about different directives in Angular 2. Below are the topics covered in this tutorial:
1) Why we need Angular Directive?
2) What is Angular Directive?
3) Types of Angular Directive
4) Built-in Angular Directives
5) Working with Custom Angular Directives
Subscribe to our channel to get updates. Check our complete Angular playlist here: https://goo.gl/09KsDC
A directive is a custom HTML element that is used to extend the power of HTML. Angular 2 has the following directives that get called as part of the BrowserModule module.
ngif
ngFor
If you view the app.module.ts file, you will see the following code and the BrowserModule module defined. By defining this module, you will have access to the 2 directives.
Come see how easy it is to build fast, accurate, and responsive web UIs using the React library. Even if you’ve never written Javascript before, React’s straightforward syntax can get you started with your UI project quickly. In this session, you’ll learn about React’s declarative syntax and state representation, explore some of the basic components that are used to build sophisticated UIs, and leave with a foundational application you can continue to build on.
Introduction to angular with a simple but complete projectJadson Santos
A simple front end project with angular. Its show how to create your first components, include bootstrap templates, create routes and build the project to production.
A simple tutorial for understanding the basics of angular JS. Very useful for the beginners. Also useful for the quick revision. Very attractive design for the tutorial of angular js.
Slides from my latest talk (and videos) about Angular dependency
injection, You can find related videos here: https://www.youtube.com/playlist?list=PLfZsWIHsTcftJl7WlidsXSBAHBXQBR4j2
Learn how to build RESTful API using Node JS with Express Js Framework. Database used is Mongo DB (Mongoose Library). Learn Step by step what is Node JS, Express, API and Mongo DB. Explain and sample code step to build RESTful API
An Open-Source JavaScript Framework
It’s used to build Single Page based Web Application (SPA)
Developed by Google,
Release date March 2017,
Current version 4.4.6 (stable).
Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components.
Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template.
A component must belong to an NgModule in order for it to be available to another component or application. To make it a member of an NgModule, list it in the declarations field of the NgModule metadata.
Presentation about new Angular 9.
It gives introduction about angular framework.
Provides information about why we use angular,
additional features and fixes from old versions. It will clearly explain how to create a new angular project and how to use angular commands and their usages.
It will also explain about the key components like angular architecture, routing, dependency injection etc.,
This Edureka "Angular Directives" tutorial will help you to learn about different directives in Angular 2. Below are the topics covered in this tutorial:
1) Why we need Angular Directive?
2) What is Angular Directive?
3) Types of Angular Directive
4) Built-in Angular Directives
5) Working with Custom Angular Directives
Subscribe to our channel to get updates. Check our complete Angular playlist here: https://goo.gl/09KsDC
A directive is a custom HTML element that is used to extend the power of HTML. Angular 2 has the following directives that get called as part of the BrowserModule module.
ngif
ngFor
If you view the app.module.ts file, you will see the following code and the BrowserModule module defined. By defining this module, you will have access to the 2 directives.
Come see how easy it is to build fast, accurate, and responsive web UIs using the React library. Even if you’ve never written Javascript before, React’s straightforward syntax can get you started with your UI project quickly. In this session, you’ll learn about React’s declarative syntax and state representation, explore some of the basic components that are used to build sophisticated UIs, and leave with a foundational application you can continue to build on.
Introduction to angular with a simple but complete projectJadson Santos
A simple front end project with angular. Its show how to create your first components, include bootstrap templates, create routes and build the project to production.
A simple tutorial for understanding the basics of angular JS. Very useful for the beginners. Also useful for the quick revision. Very attractive design for the tutorial of angular js.
Slides from my latest talk (and videos) about Angular dependency
injection, You can find related videos here: https://www.youtube.com/playlist?list=PLfZsWIHsTcftJl7WlidsXSBAHBXQBR4j2
Learn how to build RESTful API using Node JS with Express Js Framework. Database used is Mongo DB (Mongoose Library). Learn Step by step what is Node JS, Express, API and Mongo DB. Explain and sample code step to build RESTful API
An Open-Source JavaScript Framework
It’s used to build Single Page based Web Application (SPA)
Developed by Google,
Release date March 2017,
Current version 4.4.6 (stable).
Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components.
Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template.
A component must belong to an NgModule in order for it to be available to another component or application. To make it a member of an NgModule, list it in the declarations field of the NgModule metadata.
BigData_TP2: Design Patterns dans HadoopLilia Sfaxi
Pour accéder aux fichiers nécessaires pour faire ce TP, visitez: https://drive.google.com/folderview?id=0Bz7DokLRQvx7M2JWZEt1VHdwSE0&usp=sharing
Pour plus de contenu, Visitez http://liliasfaxi.wix.com/liliasfaxi !
Pour accéder aux fichiers nécessaires pour faire ce TP, visitez: https://drive.google.com/folderview?id=0Bz7DokLRQvx7M2JWZEt1VHdwSE0&usp=sharing
Pour plus de contenu, Visitez http://liliasfaxi.wix.com/liliasfaxi !
BigData_TP1: Initiation à Hadoop et Map-ReduceLilia Sfaxi
Pour accéder aux fichiers nécessaires pour faire ce TP, visitez: https://drive.google.com/folderview?id=0Bz7DokLRQvx7M2JWZEt1VHdwSE0&usp=sharing
Pour plus de contenu, Visitez http://liliasfaxi.wix.com/liliasfaxi !
Pour accéder aux fichiers nécessaires pour faire ce TP, visitez: https://drive.google.com/folderview?id=0Bz7DokLRQvx7M2JWZEt1VHdwSE0&usp=sharing
Pour plus de contenu, Visitez http://liliasfaxi.wix.com/liliasfaxi !
A seminar in advanced Software Engineering concerning using models to guide the development process, and QVT to transfer a model into another model automatically
Utilisation de MLflow pour le cycle de vie des projet Machine learningParis Data Engineers !
Mlflow est un projet opensource pour administrer le cycle de vie des projets machine learning (de l’expérimentation jusqu’au déploiement) afin de mieux les intégrer dans l’écosystème qui les entoure.
Durant cette présentation nous montrerons les différentes composantes de MLflow et ferons une démonstration de son utilisation à la fois dans le contexte d’une plateforme Databricks et d’un IDE local.
The openCypher Project - An Open Graph Query LanguageNeo4j
We want to present the openCypher project, whose purpose is to make Cypher available to everyone – every data store, every tooling provider, every application developer. openCypher is a continual work in progress. Over the next few months, we will move more and more of the language artifacts over to GitHub to make it available for everyone.
openCypher is an open source project that delivers four key artifacts released under a permissive license: (i) the Cypher reference documentation, (ii) a Technology compatibility kit (TCK), (iii) Reference implementation (a fully functional implementation of key parts of the stack needed to support Cypher inside a data platform or tool) and (iv) the Cypher language specification.
We are also seeking to make the process of specifying and evolving the Cypher query language as open as possible, and are actively seeking comments and suggestions on how to improve the Cypher query language.
The purpose of this talk is to provide more details regarding the above-mentioned aspects.
We want to present the openCypher project, whose purpose is to make Cypher available to everyone – every data store, every tooling provider, every application developer. openCypher is a continual work in progress. Over the next few months, we will move more and more of the language artifacts over to GitHub to make it available for everyone.
openCypher is an open source project that delivers four key artifacts released under a permissive license: (i) the Cypher reference documentation, (ii) a Technology compatibility kit (TCK), (iii) Reference implementation (a fully functional implementation of key parts of the stack needed to support Cypher inside a data platform or tool) and (iv) the Cypher language specification.
We are also seeking to make the process of specifying and evolving the Cypher query language as open as possible, and are actively seeking comments and suggestions on how to improve the Cypher query language.
The purpose of this talk is to provide more details regarding the above-mentioned aspects.
Getting Started with Angular 4 and TypeScript
Slides:
1- What is TypeScript.
2- TypeScript Content
3- Why TypeScript
4- TypeScript Interfaces
5- TypeScript Decorators
6- TypeScript Import and Export
7- What is Angular JS
8- Angular Architecture Overview
9- Anatomy of an Angular Application
10- Setting up an Angular Application
11- Angular CLI
12- Running your application
13- Modules
14- Components
15- Templates
16- Metadata
17- Data binding
18- Pipes
19- Services and Service Creation
Force.com can automatically generate user interfaces, but in some cases you might want to build a more custom UI. Join us to learn about Visualforce, the component-based UI framework that lets you build attractive, dynamic, reusable user interfaces. We'll cover code walk-throughs, common use cases, leveraging Apex on the server side, debugging techniques, and how to utilize the component framework to make your code portable and maintainable.
A full course about asp.net mvc 5 in Arabic. You can watch on my youtube channel https://www.youtube.com/watch?v=jrhdXwuyrfs&list=PLAPpPaAUVQyZJvtvWH9eOJcVkj7NLPQLk
A Web Framework that shortens the Time it takes to develop software in at least an Order of Magnitude. while also tremendously minimizing Effort Pain, Time waste, Complexity, Cost of change & more
Introduction
Require JS
Handlebars
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.
http://www.ivanomalavolta.com
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
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.
2. MedTech
Why Angular?
• Angular JS
• Javascript Framework for creating web and mobile single page applications
• Angular 2
• Easier to learn than Angular 1.x
• Fewer concepts
• Supports multiple languages (ES5, ES6, TypeScript and DART)
• Modular (everything is a Component)
• Performant (5X faster than version 1)
• This document explains the notions of Angular2, RC6 (February 2017)
2
Angular
4. MedTech
Description
• Angular 2 is built in TypeScript
• Official collaboration between Microsoft and Google
• JavaScript-like language
• Superset of EcmaScript6
• Improvements over ES6
• Types
• Classes
• Annotations
• Imports
• Language Utilities (e.g. destructuring)
4
TypeScript
5. MedTech
Types
• Major improvement over ES6: type checking
• Helps when writing code because it prevents bugs at compile time
• Helps when reading code because it clarifies your intentions
• Typing is optional
• Same types as in ES: string, number, boolean,…
var name: string;
• Types can also be used in function declarations:
function greetText(name: string): string{
return "Hello " + name;
}
5
TypeScript
6. MedTech
Built-in Types
6
TypeScript
Types Examples
String var name : string = 'Lilia'
Number var age : number = 36
Boolean var married : boolean = true
Array var jobs : Array<string> = [‘IBM’, ‘Microsoft’,
‘Google’]
var jobs : string[] = [‘Apple’, ‘Dell’, ‘HP’]
Enums enum Role {Employee, Manager, Admin};
var role: Role = Role.Employee;
Role[0] //returns Employee
Any
(defaulttypeifomittingtyping
foragivenvariable)
var something: any = 'as string';
something = 1;
something = [1, 2, 3];
Void
(notypeexpected,noreturn
value)
function setName(name: string): void {
this.name = name;
}
7. MedTech
Classes
• In ES5, OO programming was accomplished by using prototype-based
objects
• In ES6, built-in classes were defined
class Vehicle {}
• Classes may have properties, methods and constructors
• Properties
• Each property can optionally have a type
7
TypeScript
class Person {
first_name: string;
last_name: string;
age: number;
}
8. MedTech
Classes
• Methods
• To call a method of a class, we have to create an instance of this class, with the
new keyword
• If the methods don’t declare an explicit return type and return a value, it’s
assumed to be any
8
TypeScript
class Person {
first_name: string;
last_name: string;
age: number;
greet(){
console.log("Hello ", this.first_name);
}
ageInYears(years: number): number {
return this.age + years;
}
}
9. MedTech
Classes
• Methods
• To invoke a method:
9
TypeScript
// declare a variable of type Person
var p: Person;
// instantiate a new Person instance
p = new Person();
// give it a first_name
p.first_name = 'Felipe';
// call the greet method
p.greet();
// how old will you be in 12 years?
p.ageInYears(12);
10. MedTech
Classes
• Constructor
• Named constructor(..)
• Doesn’t return any values
10
TypeScript
class Person {
first_name: string;
last_name: string;
age: number;
constructor(first:string,last:string,age:number){
this.first_name = first;
this.last_name = last;
this.age = age;
}
greet(){
console.log("Hello ", this.first_name);
}
}
var p: Person = new Person('Felipe', 'Coury', 36);
p.greet();
11. MedTech
Inheritance
• Inheritance is built in the core language
• Uses the extends keyword
• Let’s take a Report class:
11
TypeScript
class Report {
data: Array<string>;
constructor(data:Array<string>){
this.data = data;
}
run(){
this.data.forEach( function(line)
{ console.log(line); });}
}
var r: Report = new Report([‘First Line', ‘Second Line’]);
r.run();
12. MedTech
Inheritance
• We want to change how the report presents the data to the user:
12
TypeScript
class TabbedReport extends Report{
header: string;
constructor(header:string,values:string[]){
super(values);
this.header = header;
}
run(){
console.log('—'+header+'—');
super.run();
}
}
var header: string = 'Name';
var data: string[] =
['Alice Green', 'Paul Pfifer', 'Louis Blakenship'];
var r: TabbedReport = new TabbedReport(header, data)
13. MedTech
Fat Arrow Functions
• Fat arrow => functions are a shorthand notation for writing functions
13
TypeScript
// ES5-like example
var data =
['Alice Green', 'Paul Pfifer', 'Louis Blakenship'];
data.forEach(function(line) { console.log(line); });
// Typescript example
var data: string[] =
['Alice Green', 'Paul Pfifer', 'Louis Blakenship'];
data.forEach( (line) => console.log(line) );
14. MedTech
Fat Arrow Functions
• The => syntax shares the same this as the surrounding code
• Contrary to a normally created function in JavaScript
14
TypeScript
// ES5-like example
var nate = {
name: "Nate",
guitars:
["Gibson", "Martin", "Taylor"],
printGuitars: function() {
var self = this;
this.guitars.forEach(function(g)
{
console.log(self.name + "
plays a " + g);
});
}
};
// TypeScript example
var nate = {
name: "Nate",
guitars:
["Gibson", "Martin", "Taylor"],
printGuitars: function() {
this.guitars.forEach((g) => {
console.log(this.name + "
plays a " + g);
});
}
};
15. MedTech
Template Strings
• Introduced in ES6, enable:
• Variables within strings, without concatenation with +
• Multi-line strings
15
TypeScript
var firstName = "Nate";
var lastName = "Murray";
// interpolate a string
var greeting = `Hello ${ firstName} ${ lastName} `;
console.log(greeting);
var template = `
<div>
<h1> Hello</h1>
<p> This is a great website</p>
</div>
`
// do something with `template`
16. MedTech
TypeScript Language
• And there is more…
• Consult: http://www.typescriptlang.org/docs/tutorial.html for
more detailed information about the language!
16
TypeScript
18. MedTech
Angular Application Structure
• An angular application is a tree of Components
• The top level component is the application itself, which is rendered by
the browser when bootstrapping the application.
• Components are:
• Composable
• Reusable
• Hierarchical
• Let's take as an example an inventory management application
18
Components in Angular
26. MedTech
Modules
• Angular apps are modular:
• An application defines a set of Angular Modules or NgModules
• Every angular module is a class with an @NgModule decorator
• Every Angular App has at least one module: the root module
• There are other feature modules
• Cohesive blocks of code, dedicated to an application domain, a workflow or a closely related
set of capabilities
• NgModule takes a single metadata object describing the module, with the following
properties
• Declarations: view classes (components, directives and piped)
• Exports: subset of public declarations, usable in the templates of other modules
• Imports: external modules needed by the templates of this module
• Providers: creators of services that this module contributes to
• Bootstrap: main application view, called the root component, that hosts all other app views
26
Angular Architecture
27. MedTech
Templates
• A snippet of the HTML code of a component
• A component's view is defined with its template
• Uses Angular's template syntax, with custom elements
27
Angular Architecture
<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<ul>
<li *ngFor="let hero of heroes"
(click)="selectHero(hero)">
{{hero.name}}
</li>
</ul>
<hero-detail
*ngIf="selectedHero"
[hero]="selectedHero">
</hero-detail>
28. MedTech
Metadata
• Tells Angular how to process a class
• Uses decorators to attach information to a class:
• @Component: identifies the class below it as a component class, with
options:
• moduleId: source of the base address (module.id) for module-relative URLs (such as
templateURL)
• selector: CSS selector for the template code
• templateURL: address of the component's HTML template
• providers: array of dependency injection providers for services that the component requires
• Other metadata decorators:
• @Injectable, @Input, @Output,..
28
Angular Architecture
29. MedTech
Data Binding
• Angular supports Data Binding
• Mechanism for coordinating parts of a template with parts of a component
• Four main forms:
• {{hero.main}}: interpolation
• Displays the component's hero.name property value within the <li> element
• [hero]: property binding
• Passes the value of selectedHero to the child comp.
• (click): event binding
• Calls the component's selectHero method when the
user clicks a hero's name
• [(ngModel)]: Two-way data binding
• Combines property and event binding, with ngModel
29
Angular Architecture
<li>{{hero.name}}</li>
<hero-detail
[hero]="selectedHero">
</hero-detail>
<li (click)="selectHero(hero)">
</li>
<input [(ngModel)]="hero.name">
30. MedTech
Directives
• Angular templates are dynamic
• When Angular renders them, it transforms the DOM according to instructions
given by directives
• A directive is a class with the @Directive decorator
• A component is a directive-with-a-template
• A @Component decorator is actually a @Directive extended with template-
oriented features
• Appear within an element tag as attributes do
• Two types of directives
• Structural directives
• Attribute directives
30
Angular Architecture
31. MedTech
Directives
• Structural directives
• Alter the layout by adding, removing and replacing elements in the DOM
• Attribute directives
• Alter the appearance or behaviour of an existant element
• Look like regular HTML attributes
• Custom attributes
• You can write your own directives
31
Angular Architecture
<li *ngFor="let hero of heroes"></li>
<hero-detail *ngIf="selectedHero"></hero-detail>
<input [(ngModel)]="hero.name">
32. MedTech
Services
• Almost anything can be a service
• A class with a narrow, well-defined purpose
• Ex: logging servie, data service, tax calculator, application configuration,…
• There is no specific definition of a class in Angular, but classes are
fundamental to any Angular application
• Component classes should be lean
• They shouldn't fetch data from the server, validate user input or log directly to
the console
• They just deal with user experience, mediate between the view and the logic
• Everything non trivial should be delegated to services
• A service is associated to a component using dependency injection
32
Angular Architecture
34. MedTech
Definition
• Important application design pattern
• Commonly called DI
• A way to supply a new instance of a class with the fully-formed
dependencies it requires
• Most dependencies are services
• DI is used to provide new components with the services they need
• It knows which services to instantiate by looking at the types of the
component's constructor parameters
• When Angular creates a component, it asks an injector for the services
it requires
34
Dependency Injection
constructor(private service: HeroService) { }
35. MedTech
Injector
• Maintains a container of service instances that it has previously
created
• If a requested service instance is not in the container, the injector
makes one and adds it to the container before returning the service to
Angular
• When all requested services have been resolved and returned, Angular
can call the component's constructor with those services as arguments
35
Dependency Injection
36. MedTech
Provider
• In order for the injector to know which services to instantiate, you need
to register a provider of each one of them
• Provider: Creates or returns a service
• It is registered in a module or a component
• Add it to the root module for it to be available everywhere
• Register it in the component to get a new instance of the service with each
new instance of the component
36
Dependency Injection
@NgModule({
imports: [
…
],
providers: [
HeroService,
Logger
],
…
})
@Component({
moduleId: module.id,
selector: 'hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
})
37. MedTech
@Injectable()
• @Injectable() marks a class as available to an injector for instantiation
• It is mandatory if the service class has an injected dependency
• For example: if the service needs another service, which is injected in it
• It is highly recommended to add an @Injectable() decorator for every
service class for the sake of
• Future proofing
• Consistency
• All components and directives are already subtypes of Injectable
• Even though they are instantiated by the injector, you don't have to add the
@Injectable() decorator to them
37
Dependency Injection
39. MedTech
Angular Router
• Enables navigation from one view to the next as users perform
application tasks
• Interprets a browser URL as an instruction to navigate to a client-
generated view
• Can pass optional parameters to the supporting view component to help
it decide which specific content to display
• Logs activity in the browser's history journal so the back and forward
buttons work
• Most routing applications add a <base> element to the index.html as
the first child of <head>
• Tells the router how to compose navigation URLs
39
Routing
<base href="/">
40. MedTech
Angular Router
• One singleton instance of the
Router service exists for an
application
• When the browser's URL changes,
that router looks for the
corresponding Route to know
which component to display
• A router has no routes until you
configure it
• Using the
RouterModule.forRoot method
40
Routing
const appRoutes: Routes = [
{ path: 'crisis-center',
component: CrisisListComponent },
{ path: 'hero/:id',
component: HeroDetailComponent },
{ path: 'heroes',
component: HeroListComponent,
data: { title: 'Heroes List' }
},
{ path: '', redirectTo: '/heroes',
pathMatch: 'full'
},
{ path: '**',
component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
// other imports here
],
...
})
export class AppModule { }
41. MedTech
Router Views
• In order to render the component chosen by the router, a RouterOutlet
is inserted in the template
• To navigate from a route to another, you use routerLinks
• routerLinkActive associates a CSS class "active" to the cliqued link
41
Routing
<router-outlet></router-outlet>
<!-- Routed views go here -->
template: `
<h1>Angular Router</h1>
<nav>
<a routerLink="/crisis-center"
routerLinkActive="active">Crisis Center</a>
<a routerLink="/heroes"
routerLinkActive="active">Heroes</a>
</nav>
<router-outlet></router-outlet>
`
42. MedTech
Routing Module
• For simple routing, defining the routes in the main application module
is fine
• It can become more difficult to manage if the application grows and you
use more Router features
• Refactor the routing configuration in its own file: the Routing Module
• The Routing Module
• Separates routing concerns from other application concerns
• Provides a module to replace or remove when testing the
application
• Provides a well-known location for routing service providers
• Does not declare components
42
Routing
44. MedTech
Navigation Guards
• Sometimes, routes need to be protected:
• to prevent users from accessing areas that they're not allowed to access
• to ask for permission, …
• Navigation Guards are applied to routes to do that
• Four guard types:
• CanActivate: decides if a route can be activated
• CanActivateChild: decides if child routes of a route can be activated
• CanDeactivate: decides if a route can be deactivated
• CanLoad: decides if a module can be loaded lazily
• Guards can be implemented in different ways, but mainly, you obtain a
function that returns Observable<boolean>, Promise<boolean> or
boolean
44
Routing
45. MedTech
Navigation Guards: as Functions
• To register a guard as a function, you need to define a token and the
guard function, represented as a provider
• Once the guard registered with a token, it is used on the route
configuration
45
Routing
@NgModule({
...
providers: [
provide: 'CanAlwaysActivateGuard',
useValue: () => {
return true;
}
],
...
})
export class AppModule {}
export const AppRoutes:RouterConfig = [
{
path: '',
component: SomeComponent,
canActivate:
['CanAlwaysActivateGuard']
}
];
46. MedTech
Navigation Guards: as Classes
• Sometimes, a guard needs DI capabilities
• Should be declared as Injectable classes
• Implement in this case CanActivate, CanDeactivate or CanActivateChild
interfaces
46
Routing
import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class CanActivateViaAuthGuard
implements CanActivate {
constructor(private authService: AuthService){
}
canActivate() {
return this.authService.isLoggedIn();
}
@NgModule({
...
providers: [
AuthService,
CanActivateViaAuthGuard
]
})
export class AppModule {}
…
{
path: '',
component: SomeComponent,
canActivate: [
'CanAlwaysActivateGuard',
CanActivateViaAuthGuard
]
}
47. MedTech
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
References
47
• Sites
• Angular2 official documentation, https://angular.io/docs, consulted in March
2017
• Pascal Precht, Protecting Routes Using Guards in Angular, https://
blog.thoughtram.io/angular/2016/07/18/guards-in-angular-2.html#as-
classes, updated in December 2016, consulted in March 2017
• Textbook
• Rangle’s Angular2 Training Book, rangle.io, Gitbook
• Ang-book 2, the complete book on AngularJS2, 2015-2016