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.,
- Angular modules help organize an application into blocks of related functionality. Modules declare components, directives, pipes and services that belong to that module.
- There are different types of modules like root modules, feature modules, and shared modules. The root module launches the app. Feature modules extend functionality. Shared modules contain reusable constructs.
- Modules can import and export specific constructs to make them available to other modules. Services declared in a module are singletons app-wide unless the module is lazy loaded. Core modules contain global services imported by the root module only.
Angular is a platform and framework for building single-page client applications using HTML and TypeScript. The basic building blocks of Angular include components, modules, directives, decorators, pipes, data binding, templates, and services. Components define views with templates and logic. Modules organize related code. Directives modify DOM elements. Decorators add metadata. Pipes transform data. Data binding syncs data and UI. Templates define views. Services provide reusable functionality.
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.
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.
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.
The document outlines an online training course for Angular 10 that covers fundamental concepts like TypeScript, Angular fundamentals, NgRx, server-side integration with Node and Express, Angular Material, PrimeNG, and a final e-commerce project. The 50-day, 100-hour course includes daily live and hands-on training, video lessons, project files, and lifetime access for 6000 INR or $85. Key topics include Angular architecture, components, routing, HTTP requests, reactive forms, state management with NgRx, REST APIs, authentication, and deployment.
Angular is an open-source front-end web development platform for building dynamic single-page applications. It was developed and is maintained by Google. Traditional web applications run from the server, requiring the client to request pages from the server on each user interaction. Single-page applications handle requests and rendering on the client-side using JavaScript, only requiring the server when data needs processing or business logic execution. Angular has evolved through several versions since its initial release in 2010. It is now a TypeScript-based framework that supports progressive web apps and mobile development. Major companies like Google, PayPal, and Microsoft use Angular for its component-based architecture, cross-platform capabilities, and productivity benefits.
Angular is a platform for building applications with templates, dependency injection, and integrated tools. It contains modules, components, directives, routing, and services as building blocks. Modules contain routes, components, directives, and services. Components form part of the DOM tree. Directives attach behavior to DOM elements. Routing enables navigation between views. Services provide business logic and data access. The Angular CLI is used to generate, develop, and maintain Angular applications.
Angular is a TypeScript-based framework for building single-page web applications. Some key points:
- Angular 14 is the latest version, released in June 2022. It introduced features like standalone components and typed forms.
- Angular provides advantages like cross-platform support, improved speed/performance, and support for unit testing.
- The Angular CLI is used to initialize, develop, and maintain Angular apps from the command line. Commands include ng new to create a new app and ng help to view available commands.
The document summarizes Angular directives including ngIf, ngFor, ngSwitchCase, ngClass, and ngStyle. It describes how ngIf and ngFor are structural directives that change the DOM layout by adding and removing elements. NgIf and ngFor use an asterisk syntax that gets desugared into <ng-template> elements. NgFor iterates over collections and supports additional syntax like trackBy. NgSwitch is a set of cooperating directives that displays different elements based on a switch expression. NgClass and ngStyle are attribute directives that update CSS classes and styles on elements.
The document describes an internship project building a web application using AngularJS for the client-side views, Express for the server, and Node.js. The application allows users to submit queries which are passed from Angular to Express to a commerce API, with responses returned to render dynamic views. The intern gained experience with asynchronous JavaScript, Angular, Express, Node, and related tools like Balsamiq and Git.
This document provides an overview of Angular, including:
- Angular is a JavaScript framework used to build client-side applications with HTML. Code is written in TypeScript which compiles to JavaScript.
- Angular enhances HTML with directives, data binding, and dependency injection. It follows an MVC architecture internally.
- Components are the basic building blocks of Angular applications. Modules contain components and services. Services contain reusable business logic.
- The document discusses Angular concepts like modules, components, data binding, services, routing and forms. It provides examples of creating a sample login/welcome application in Angular.
This document provides an overview of Angular's template-driven and model-driven forms. It describes the key directives, classes, and interfaces used for building forms in Angular. It explains how to add validation, track form state, create custom validators, and tie forms to components and templates. The document also demonstrates how to set up two-way data binding between forms and models using directives like ngModel, ngFormControl, and ngForm.
This document discusses Angular directives, including built-in and custom directives. It describes the three types of built-in directives - component directives, structural directives, and attribute directives. It provides examples of common built-in directives like ngIf, ngFor, ngSwitch, ngModel, ngStyle, and ngClass. It also explains how to create a custom attribute directive to dynamically style an element.
The document outlines an agenda for a presentation on AngularJS that covers:
1. An introduction to AngularJS and its core features like two-way data binding, templates, and MVC architecture.
2. Explanations and examples of key AngularJS concepts like directives, expressions, forms, services, modules, routing, and scopes.
3. Discussions of AngularJS advantages like fast development and scalability, and disadvantages like complexity.
4. References for further learning and a question/answer session.
The document discusses various methods for sharing data between Angular components, including:
1) Parent to child components using @Input to pass data via templates.
2) Child to parent using @ViewChild and AfterViewInit lifecycle hook to access child component properties.
3) Child to parent using @Output and event emitters to emit data on user events like button clicks.
4) Between unrelated components using a shared service with RxJs Subjects to share stream of data between all components accessing the service.
This document outlines an AngularJS certification training agenda that covers directives. It defines directives as classes that extend HTML and transform the DOM. There are three types of directives: components, structural directives, and attribute directives. Built-in directives like NgFor and NgIf are covered, which add and remove elements. The document demonstrates how to create a custom attribute directive by using the @Directive decorator and accessing native DOM elements.
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.
Angular - Chapter 4 - Data and Event HandlingWebStackAcademy
The document provides information about Angular data binding and event handling. It discusses how interpolation can be used to connect data from a component class to its template. It also explains how property binding and event binding allow two-way communication between the component class and template. Finally, it introduces ngModel for setting up two-way data binding between an input element and a property.
In this comprehensive guide, Angular is described as a one-stop solution for front-end development. Learn everything there is to know about Angular, including how it works, why, and the benefits.
Angular Kickstart document provides an overview of Angular including:
- Angular is a client side JavaScript framework that allows building of single page applications.
- A single page application loads initial content via the first page load and subsequent content without reloading the page.
- The document discusses Angular features such as modularity, performance, TypeScript support, and building blocks like modules, components and directives. It also provides instructions on setting up the development environment for Angular applications.
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/
Angular IO Overview
The presenter introduces foundational Angular IO concepts like components, TypeScript, and the Angular CLI tool. Angular IO is a component-based framework for building single page applications. It uses TypeScript for strong typing. Components couple custom HTML elements to functionality. The Angular CLI helps generate and build Angular applications.
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.
Angular is an open source JavaScript framework for building web applications. It was developed by Google and released in 2017. Some key features include being cross-platform for mobile and desktop, high performance, and productivity. The document outlines how to set up a development environment with Node.js and npm, create a new Angular project using the Angular CLI, and describes the basic structure of an Angular project including components, TypeScript, and data binding.
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!
This document provides an overview of building a website with Angular 2+. It discusses key Angular concepts like modules, components, templates, directives, services, pipes and custom configuration. It also demonstrates how to debug Angular applications in Chrome. Code examples are provided to illustrate modules, components, templates, directives, services, pipes and custom configuration. The document aims to teach developers how to use various parts of Angular to build a website.
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.
The document provides an overview of Angular including:
- Angular is an open source JavaScript framework for building web applications in HTML and JavaScript. It provides services and objects to create applications faster.
- Typescript is a programming language that adds optional static typing to JavaScript. It compiles to JavaScript.
- Modules, components, templates, metadata, services, and routes are architectural concepts in Angular that define application structure and functionality.
- Components control views and consist of templates, classes, and metadata. Services provide shared functionality across modules. Routes enable navigation between views.
Angular is a platform and framework for building client applications in HTML and TypeScript. The main building blocks of an Angular application are modules, components, directives, and services. Modules provide a compilation context and make components and directives available. Components define views and use services. Services provide reusable business logic. Directives add behavior to existing elements.
This document provides an overview of key concepts for building a website with Angular, including modules, components, templates, directives, services, pipes, custom configuration, debugging in Chrome, and elements. It discusses each concept and provides examples from demo code. The document is intended to teach how to use various parts of Angular to build a website.
Building Blocks of Angular 2 and ASP.NET CoreLevi Fuller
This document provides an overview of building applications with Angular 2 and ASP.NET Core. It describes the Angular CLI for scaffolding Angular applications, key aspects of Angular like components, directives, and services. It also summarizes ASP.NET Core, including commands, dependency injection, controllers and building a sample pet store application using Angular and ASP.NET Core.
This document provides an overview of AngularJS including its advantages, uses, required tools, architecture, key concepts like directives, filters, dependency injection and services. AngularJS is a JavaScript MVC framework created by Google that focuses on the HTML side of web apps. It enhances HTML with directives, templates and bindings and is well-suited for single page apps. Development requires a code editor, browser and optional tools like NodeJS, GitHub, NPM and Gulp. The document outlines Angular's modular structure and core components like controllers, modules and scopes.
AngularJS is an open source JavaScript framework for building dynamic web applications. It enhances HTML with custom directives and bindings to enrich client-side web applications with reusable components. Key features include two-way data binding, reusable components, support for MVC/MVVM design patterns, end-to-end testing, cross-browser compatibility, and services. AngularJS allows developers to organize applications into modules and controllers to keep code clean and reusable.
Coordinate Systems in FME 101 - Webinar SlidesSafe Software
If you’ve ever had to analyze a map or GPS data, chances are you’ve encountered and even worked with coordinate systems. As historical data continually updates through GPS, understanding coordinate systems is increasingly crucial. However, not everyone knows why they exist or how to effectively use them for data-driven insights.
During this webinar, you’ll learn exactly what coordinate systems are and how you can use FME to maintain and transform your data’s coordinate systems in an easy-to-digest way, accurately representing the geographical space that it exists within. During this webinar, you will have the chance to:
- Enhance Your Understanding: Gain a clear overview of what coordinate systems are and their value
- Learn Practical Applications: Why we need datams and projections, plus units between coordinate systems
- Maximize with FME: Understand how FME handles coordinate systems, including a brief summary of the 3 main reprojectors
- Custom Coordinate Systems: Learn how to work with FME and coordinate systems beyond what is natively supported
- Look Ahead: Gain insights into where FME is headed with coordinate systems in the future
Don’t miss the opportunity to improve the value you receive from your coordinate system data, ultimately allowing you to streamline your data analysis and maximize your time. See you there!
GDG Cloud Southlake #34: Neatsun Ziv: Automating AppsecJames Anderson
The lecture titled "Automating AppSec" delves into the critical challenges associated with manual application security (AppSec) processes and outlines strategic approaches for incorporating automation to enhance efficiency, accuracy, and scalability. The lecture is structured to highlight the inherent difficulties in traditional AppSec practices, emphasizing the labor-intensive triage of issues, the complexity of identifying responsible owners for security flaws, and the challenges of implementing security checks within CI/CD pipelines. Furthermore, it provides actionable insights on automating these processes to not only mitigate these pains but also to enable a more proactive and scalable security posture within development cycles.
The Pains of Manual AppSec:
This section will explore the time-consuming and error-prone nature of manually triaging security issues, including the difficulty of prioritizing vulnerabilities based on their actual risk to the organization. It will also discuss the challenges in determining ownership for remediation tasks, a process often complicated by cross-functional teams and microservices architectures. Additionally, the inefficiencies of manual checks within CI/CD gates will be examined, highlighting how they can delay deployments and introduce security risks.
Automating CI/CD Gates:
Here, the focus shifts to the automation of security within the CI/CD pipelines. The lecture will cover methods to seamlessly integrate security tools that automatically scan for vulnerabilities as part of the build process, thereby ensuring that security is a core component of the development lifecycle. Strategies for configuring automated gates that can block or flag builds based on the severity of detected issues will be discussed, ensuring that only secure code progresses through the pipeline.
Triaging Issues with Automation:
This segment addresses how automation can be leveraged to intelligently triage and prioritize security issues. It will cover technologies and methodologies for automatically assessing the context and potential impact of vulnerabilities, facilitating quicker and more accurate decision-making. The use of automated alerting and reporting mechanisms to ensure the right stakeholders are informed in a timely manner will also be discussed.
Identifying Ownership Automatically:
Automating the process of identifying who owns the responsibility for fixing specific security issues is critical for efficient remediation. This part of the lecture will explore tools and practices for mapping vulnerabilities to code owners, leveraging version control and project management tools.
Three Tips to Scale the Shift Left Program:
Finally, the lecture will offer three practical tips for organizations looking to scale their Shift Left security programs. These will include recommendations on fostering a security culture within development teams, employing DevSecOps principles to integrate security throughout the development
AC Atlassian Coimbatore Session Slides( 22/06/2024)apoorva2579
This is the combined Sessions of ACE Atlassian Coimbatore event happened on 22nd June 2024
The session order is as follows:
1.AI and future of help desk by Rajesh Shanmugam
2. Harnessing the power of GenAI for your business by Siddharth
3. Fallacies of GenAI by Raju Kandaswamy
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfjackson110191
These fighter aircraft have uses outside of traditional combat situations. They are essential in defending India's territorial integrity, averting dangers, and delivering aid to those in need during natural calamities. Additionally, the IAF improves its interoperability and fortifies international military alliances by working together and conducting joint exercises with other air forces.
Navigating Post-Quantum Blockchain: Resilient Cryptography in Quantum Threatsanupriti
In the rapidly evolving landscape of blockchain technology, the advent of quantum computing poses unprecedented challenges to traditional cryptographic methods. As quantum computing capabilities advance, the vulnerabilities of current cryptographic standards become increasingly apparent.
This presentation, "Navigating Post-Quantum Blockchain: Resilient Cryptography in Quantum Threats," explores the intersection of blockchain technology and quantum computing. It delves into the urgent need for resilient cryptographic solutions that can withstand the computational power of quantum adversaries.
Key topics covered include:
An overview of quantum computing and its implications for blockchain security.
Current cryptographic standards and their vulnerabilities in the face of quantum threats.
Emerging post-quantum cryptographic algorithms and their applicability to blockchain systems.
Case studies and real-world implications of quantum-resistant blockchain implementations.
Strategies for integrating post-quantum cryptography into existing blockchain frameworks.
Join us as we navigate the complexities of securing blockchain networks in a quantum-enabled future. Gain insights into the latest advancements and best practices for safeguarding data integrity and privacy in the era of quantum threats.
The DealBook is our annual overview of the Ukrainian tech investment industry. This edition comprehensively covers the full year 2023 and the first deals of 2024.
How to Avoid Learning the Linux-Kernel Memory ModelScyllaDB
The Linux-kernel memory model (LKMM) is a powerful tool for developing highly concurrent Linux-kernel code, but it also has a steep learning curve. Wouldn't it be great to get most of LKMM's benefits without the learning curve?
This talk will describe how to do exactly that by using the standard Linux-kernel APIs (locking, reference counting, RCU) along with a simple rules of thumb, thus gaining most of LKMM's power with less learning. And the full LKMM is always there when you need it!
this resume for sadika shaikh bca studentSadikaShaikh7
I am a dedicated BCA student with a strong foundation in web technologies, including PHP and MySQL. I have hands-on experience in Java and Python, and a solid understanding of data structures. My technical skills are complemented by my ability to learn quickly and adapt to new challenges in the ever-evolving field of computer science.
Data Protection in a Connected World: Sovereignty and Cyber Securityanupriti
Delve into the critical intersection of data sovereignty and cyber security in this presentation. Explore unconventional cyber threat vectors and strategies to safeguard data integrity and sovereignty in an increasingly interconnected world. Gain insights into emerging threats and proactive defense measures essential for modern digital ecosystems.
An invited talk given by Mark Billinghurst on Research Directions for Cross Reality Interfaces. This was given on July 2nd 2024 as part of the 2024 Summer School on Cross Reality in Hagenberg, Austria (July 1st - 7th)
Performance Budgets for the Real World by Tammy EvertsScyllaDB
Performance budgets have been around for more than ten years. Over those years, we’ve learned a lot about what works, what doesn’t, and what we need to improve. In this session, Tammy revisits old assumptions about performance budgets and offers some new best practices. Topics include:
• Understanding performance budgets vs. performance goals
• Aligning budgets with user experience
• Pros and cons of Core Web Vitals
• How to stay on top of your budgets to fight regressions
How Netflix Builds High Performance Applications at Global ScaleScyllaDB
We all want to build applications that are blazingly fast. We also want to scale them to users all over the world. Can the two happen together? Can users in the slowest of environments also get a fast experience? Learn how we do this at Netflix: how we understand every user's needs and preferences and build high performance applications that work for every user, every time.
Details of description part II: Describing images in practice - Tech Forum 2024BookNet Canada
This presentation explores the practical application of image description techniques. Familiar guidelines will be demonstrated in practice, and descriptions will be developed “live”! If you have learned a lot about the theory of image description techniques but want to feel more confident putting them into practice, this is the presentation for you. There will be useful, actionable information for everyone, whether you are working with authors, colleagues, alone, or leveraging AI as a collaborator.
Link to presentation recording and transcript: https://bnctechforum.ca/sessions/details-of-description-part-ii-describing-images-in-practice/
Presented by BookNet Canada on June 25, 2024, with support from the Department of Canadian Heritage.
Interaction Latency: Square's User-Centric Mobile Performance MetricScyllaDB
Mobile performance metrics often take inspiration from the backend world and measure resource usage (CPU usage, memory usage, etc) and workload durations (how long a piece of code takes to run).
However, mobile apps are used by humans and the app performance directly impacts their experience, so we should primarily track user-centric mobile performance metrics. Following the lead of tech giants, the mobile industry at large is now adopting the tracking of app launch time and smoothness (jank during motion).
At Square, our customers spend most of their time in the app long after it's launched, and they don't scroll much, so app launch time and smoothness aren't critical metrics. What should we track instead?
This talk will introduce you to Interaction Latency, a user-centric mobile performance metric inspired from the Web Vital metric Interaction to Next Paint"" (web.dev/inp). We'll go over why apps need to track this, how to properly implement its tracking (it's tricky!), how to aggregate this metric and what thresholds you should target.
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/