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.,
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).
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.
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).
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.
Learn web development with the famous Angular framework from scratch in this Angular 6 online training tutorial.
Get the course here : https://www.eduonix.com/angular-4-the-complete-guide?coupon_code=JY10
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.
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.
Angular 14: What's new! explore in-depth the features of Angular 14 and learn how to get started with it. Angular 14 has been released with several significant features.
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.
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.
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.
Slides from my latest talk (and videos) about Angular dependency
injection, You can find related videos here: https://www.youtube.com/playlist?list=PLfZsWIHsTcftJl7WlidsXSBAHBXQBR4j2
AngularJS, a MVW framework from Google is based on JavaScript, a language globally known to millions of developers worldwide - thus giving it a much lower learning curve even for complete beginners. Integrating AngularJS is simple as it evaluates page once HTML is in the DOM and make easier to bind Angular on top of existing applications. It can run along with Node.js, an asynchronous development platform with lightning speed execution, which makes building Mean Stack applications easier and faster. AngularJS comes with a very good documentation and also have wide range of third party modules making it user-friendly for developers.
Introduction to angular | Concepts and Environment setupAnsley Rodrigues
Presentation explaining the concepts and theory of Angular2 framework for front-end development of web applications(Compent, template, Dependency Injection, Services, Component interaction, Directives, Data Binding, etc).
A live demo example helps to understand the concepts better.
Learn web development with the famous Angular framework from scratch in this Angular 6 online training tutorial.
Get the course here : https://www.eduonix.com/angular-4-the-complete-guide?coupon_code=JY10
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.
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.
Angular 14: What's new! explore in-depth the features of Angular 14 and learn how to get started with it. Angular 14 has been released with several significant features.
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.
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.
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.
Slides from my latest talk (and videos) about Angular dependency
injection, You can find related videos here: https://www.youtube.com/playlist?list=PLfZsWIHsTcftJl7WlidsXSBAHBXQBR4j2
AngularJS, a MVW framework from Google is based on JavaScript, a language globally known to millions of developers worldwide - thus giving it a much lower learning curve even for complete beginners. Integrating AngularJS is simple as it evaluates page once HTML is in the DOM and make easier to bind Angular on top of existing applications. It can run along with Node.js, an asynchronous development platform with lightning speed execution, which makes building Mean Stack applications easier and faster. AngularJS comes with a very good documentation and also have wide range of third party modules making it user-friendly for developers.
Introduction to angular | Concepts and Environment setupAnsley Rodrigues
Presentation explaining the concepts and theory of Angular2 framework for front-end development of web applications(Compent, template, Dependency Injection, Services, Component interaction, Directives, Data Binding, etc).
A live demo example helps to understand the concepts better.
How does Angular Work? So far, we've covered a number of specific information regarding the processes involved in creating Angular applications.
For more Information: https://www.albiorixtech.com/blog/how-does-angular-work/
Are you ready to embark on an exciting journey into web development? Angular for Beginners is a comprehensive introductory course designed to empower you with the skills and knowledge needed to build dynamic and responsive web applications using the Angular framework.
Angular, developed and maintained by Google, is a powerful front-end framework that simplifies the process of building robust and feature-rich single-page applications. This course is specifically tailored for individuals with little to no prior experience in web development, providing a gentle and hands-on introduction to Angular's core concepts and principles.
Key Learning Objectives:
Introduction to Web Development:
Explore the fundamental concepts of web development, including HTML, CSS, and JavaScript.
Understand the role of front-end frameworks in building modern web applications.
Getting Started with Angular:
Set up your development environment and create your first Angular project.
Familiarize yourself with the Angular CLI (Command Line Interface).
Understanding Angular Architecture:
Learn about the building blocks of Angular applications, including components, modules, and services.
Grasp the concept of data binding and how it facilitates communication between components.
Templates and Directives:
Dive into Angular templates and explore the usage of directives for dynamic content rendering.
Understand the role of structural directives like *ngIf and *ngFor.
Component Communication:
Master the art of communication between Angular components using input and output properties.
Explore the concept of parent-child and sibling component communication.
Forms and User Input:
Learn how to create reactive forms and handle user input effectively.
Validate and submit forms using Angular's form handling capabilities.
Routing and Navigation:
Implement client-side navigation using Angular Router.
Understand how to create and navigate between multiple views in a single-page application.
Services and Dependency Injection:
Explore the role of services in Angular applications.
Understand the concept of dependency injection and how it promotes code reusability.
Introduction to HTTP and Observables:
Communicate with a server using Angular's HttpClient module.
Handle asynchronous operations with Observables.
Deployment and Best Practices:
Learn how to deploy your Angular application to a hosting platform.
Explore best practices for structuring and maintaining Angular code.
By the end of this course, you will have gained a solid foundation in Angular and be well-equipped to take your first steps in the world of web development. Join us on this exciting journey, and let's build amazing web applications together!
Agenda:
1- Introduction: basic description and overview about what is angular and why we should use it.
2- AngularJS Core Features: key features of angularJS.
3- Guides and help: API and documentation references, in addition of online courses.
Single Page Applications in SharePoint with AngularSparkhound Inc.
The Angular framework allows developers to create lightweight single page web applications with ease. By leveraging the Angular framework and the SharePoint 2013 REST API, we can create lightweight applications within SharePoint as alternatives to InfoPath forms and OOTB SharePoint web parts. This presentation will cover the basics of single page applications with Angular as well as targeting the SharePoint platform with SPA applications.
https://youtu.be/_yLt_abcK2w
Angular is a TypeScript-based open-source front-end platform that makes it easy to build applications with in web/mobile/desktop. The major features of this framework such as declarative templates, dependency injection, end to end tooling, and many more other features are used to ease the development.
Angular 7 is a Javascript framework built around the concept of components, and more precisely, with the Web Components standard in mind. It was rewritten from scratch by the Angular team using Typescript (although we can use it with ES5, ES6, or Dart as well).
Angular 7 is a big change for us compared to 1.x. Because it is a completely different framework than 1.x, and is not backward-compatible. Angular 7 is written entirely in Typescript and meets the ECMAScript 6 specification
angular interview questions and answers, angular 7 interview questions and answers, angular interview question, angular interview questions and answers for experienced, angular 7 interview questions, angular 6 interview questions,
angular interview questions, angular 6 interview questions and answers, angular 2 interview questions, angular7, angular 5 interview questions, angular interview, angular 2 interview questions and answers, angular questions and answers
Angular-Js is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.
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.
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.
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.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
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
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
Generating a custom Ruby SDK for your web service or Rails API using Smithyg2nightmarescribd
Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
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.
2. 2
Introduction
toAngular
JavaScript framework
Bootstraps JavaScript with HTML pages
Enhances UI experience of user
It is a framework for building web and mobile client-side
apps with JavaScript or more precisely a super-language of
JavaScript called TypeScript built by Microsoft
It implements core and optional functionality as a set of
TypeScript libraries that you import into your apps.
The framework, written in pure JavaScript, was intended to
decouple an application’s logic from DOM manipulation
3. 3
Why
Angular?
Detailed documentation
Angular boasts detailed documentation where
developers can find all necessary information
Angular Material.
This collection of Material Design elements optimized
for Angular lets developers easily integrate UI
components.
Great ecosystem of third-party components
The popularity of Angular has resulted in the appearance
of thousands of additional tools and components that
can be used in Angular apps.
Component-based architecture.
According to this architecture, an app is divided into
independent logical and functional components.
These components can easily be replaced and decoupled
as well as reused in other parts of an app.
Component independence makes it easy to test a web
app and ensure that every component works seamlessly.
4. 4
Why
Angular?
Ahead-of-time compiler.
Angular’s AOT compiler converts TypeScript and HTML into
JavaScript during the build process.
This code is compiled before the browser loads your web app so
that it’s rendered much faster.
An AOT compiler is also much more secure than a just-in-time
(JIT) compiler.
CLI
Allows you to create a new Angular project, add features to it,
and run unit and end-to-end tests with a few simple commands.
Angular Elements.
Starting with Angular 6, developers can easily add custom
elements to any web app built with React, JQuery, Vue, or any
other environment
Ivy Renderer
Ivy Renderer translates an app’s components and templates into
JavaScript code that can be displayed by a browser.
The main characteristic of this tool is its tree shaking technique.
During rendering, Ivy removes unused code to make it clearer
and smaller. As a result, web apps load faster.
6. 6
Features and
Fixes
Enables AOT compiler on by default
This means that the AOT builds will be noticeably faster.
The change in the compiler and runtime, would no
longer require entryComponents and ng serve
Default Ivy compiler
Improves the bundle sizes.
Allows for better debugging
Faster Mobile Apps
By reducing the size of JavaScript bundles, Ivy opens
a platform for developers to speed up the
application
Adds improved TypeChecking & faster testing
More reliable ng update
ng update --create-commits, the tool commits the state
of our codebase after each migration, to debug the
changes made to the code.
Selector-less directives in Ivy
Improved internationalzation (i18n)
7. 7
Features and
Fixes
New options for 'providedIn'
This angular 9 feature provides us with some additional
options while create an @Injectable service in Angular.
platform - providedIn: 'platform' makes the service available
in a special singleton platform injector that is shared by all
applications on the page.
any - Provides a unique instance in every module (including
lazy modules) that instills the token.
TypeScript 3.7 Support
Optional chaining
Nullish Coalescing
Assertion function
Semicolon formatter option
Uncalled function checks
Component Hareness
Angular 9 is making harnesses available to any component
author as part of the Component Dev Kit (CDK)
9. 9
Installation and
Configurations
Need to install Node.js to use npm
Run the following command in command prompt to install Angular CLI and
create new project
npm install -g @angular/cli
ng new
The Angular CLI makes it easy to create an application that already works,
right out of the box
When you run ng new my-dream-app a new folder, named my-dream-app,
will be created in the current working directory.
ng serve
Build an app and serve it locally, the server automatically rebuilds the
app and reloads the page when you change any of the source files
10. 10
Commands
ng build
Compiles an Angular app into an output directory named
dist at the given output path
ng test
Runs karma task runner for our tests
ng generate
Generates and/or modifies files based on a schematic
ng e2e
Builds and serves an Angular app, then runs end-to-end
tests using Protractor
ng lint
Runs linting tools on Angular app code in a given project
folder [ tslint.json ]
10
11. 11
Key
Components
• The default root component
File app-routing.module.ts contains url mapping of components
File app.component.ts contains definition of root component
File app.module.ts contains configuration of the component
File app.component.html contains template component
Index.html bootstraps root component.
14. 14
Introduction
14
Improvements over ES6
Types Classes Annotations Imports exports
Language Utilities
(e.g. destructuring)
TypeChecking
Official collaboration between Microsoft and Google
TypeScript = JavaScript + Strong typing
TypeScript introduced fromAngular 2+.
15. 15
JavaScript and
TypeScript
JavaScript and TypeScript is superset of ES
ES => EcmaScript
ES is a standard JS,TS are implementation
ES 6+ Modern JavaScripts.
No types in JavaScript(loosely coupled)
Example of number type in TypeScript
15
• this.id = "saw" // throws compilation error
17. 17
TypeScript -
Classes
17
In ES5, OO programming was accomplished by using prototype-based objects
TS classes may have properties methods and constructors
Inheritance built in core language
Uses extends keyword
To call a method of a class, we have to create an instance of this class, with the
new keyword
Constructor
• Named constructor(..)
• Doesn’t return any values
20. 20
Architecture -
Modules
20
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
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
21. 21
Architecture
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
22. 22
Architecture
MetaData
Helps angular how to process data
Uses decorators to attach information to a class:
@Component
Selector : source of the base address (module.id) for
module-relative URLs
TemplateUrl : address of the component's HTML
template
Providers : : array of dependency injection providers
for services that the component requires
StyleUrls : CSS address for the template code
Other metadata decorators: • @Injectable, @Input, @Output,..
22
23. 23
DataBinding
Mechanism for coordinating parts of a template
with parts of a component
Four main forms
Interpolation {{...}} :
Displays the component's todo property
value within the <td> element
Property Binding [….] :
Passes the value of id to the child
comp
<view-todo>
Event Binding (click) :
Calls the component's updateTodo()
method when the user clicks update
button
Two-way data-binding [(ngModel)] :
Combines property and event binding,
with ngModel
23
24. 24
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
Two types of directives
Structural directives
Alter the layout by adding, removing and replacing
elements in the DOM
<li *ngFor="let todo of todos"></li>
<view-todo *ngIf="idNotNull"> <view-todo>
Attribute directives
Alter the appearance or behaviour of an existant
element
Look like regular HTML attributes
<input type='text' [(ngModel)] ="user.username">
24
25. 25
Architecture -
Services
25
Service is a class with a narrow, well-defined purpose
• Logging service, data service..
Component classes should be lean,
• They shouldn't fetch data from the server,
• They just deal with user experience, mediate between the view and the logic,
• Everything non trivial should be delegated to services
ng generate service <service-name>
A service is associated to a component using dependency
injection
27. 27
Dependency
Injection -
Introduction
Important design pattern
Commonly called DI
A way to supply a new instance of a class with the fully-formed dependencies it
requires
In plain English, one object supplying the dependencies of another object.
Makes code more readable and maintainable.
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
• constructor(private service : Service)
28. 28
Injector
When Angular creates a component, it asks an injector for the
services it requires
Component asks an injector for the services it requires
Maintains a container of service instances
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
Serive A Serice B Service C
Component
Constructor(private service : Service B)
Inectors
29. 29
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
@NgModule(
{ imports : [ ... ],
providers:[ TodoDataService, LogService ]
})
@Injectable() marks a class as available to an injector for
instantiation
@Injectable({
providedIn: 'root',
})
Essential ingredient in every Angular service definition
Dependency
Injection Providers
& @Injectable
29
31. 31
Routing -
Introduction
Enables navigation from one view to the next as users
perform application tasks
Interprets a browser URL as an instruction to navigate
to a clientgenerated 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
32. 32
Routing Module
[ app-routing.module.ts ]
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
33. 33
Routing Module -
Example
One singleton instance of
the Router service exists for
an application (app-
routing.module.ts)
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
In order to render the
component chosen by
the router, a router-outlet is
inserted in the template
RouterLink used to navigate between pages
34. 34
RouterGuard
Service
Sometimes, routes need to be
protected: to prevent users from
accessing, areas that they're not
allowed to access, to ask for
permission etc.,
Router 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
35. 35
Sites
Additional References
1. https://angular.io/docs - Angular Documentation
2. https://www.typescriptlang.org/docs/home.html -TypeScript Docs
3. https://cli.angular.io/ - Angular commands
Text books
• The Ng-book - A Complete Book on Angular (2020 Edition) https://www.newline.co/ng-book/2/