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.
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
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 discusses the key building blocks of Angular applications including architecture, bootstrapping, modules, components, services, templates, decorators, dependency injection, and routing; it provides an overview of each concept and how they work together to create the structure of an Angular application; the presentation concludes with a demo of these concepts in action.
Laravel, längst kein unbestriebenes Blatt mehr, gewinnt immer mehr an Popularität.
In diesem Vortrag wir Laravel kurz vorgestellt mit Themen wie:
- Was ist Laravel?
- Woher kommt Laravel?
- Was bietet Laravel?
- Laravel und sein Ecosystem.
und einiges mehr...
The document discusses Swagger, an open source API documentation framework. It describes how Swagger is used to document REST APIs and provides an interactive UI. It then outlines how to add Swagger documentation to a Spring Boot project using Springfox, including adding dependencies, configuring Swagger, and annotating controllers. The document demonstrates how Swagger UI allows developers to easily view and test documented APIs in the browser.
- 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.
This document provides an overview of Spring Boot and some of its key features. It discusses the origins and modules of Spring, how Spring Boot simplifies configuration and dependency management. It then covers examples of building Spring Boot applications that connect to a SQL database, use RabbitMQ for messaging, and schedule and run asynchronous tasks.
JOHN HUMPHREYS VP OF ENGINEERING INFRASTRUCTURE SYSTEMS, NOMURA
Spring Boot is a modern and extensible development framework that aims (and succeeds!) to take as much pain as possible out of developing with Java. With just a few Maven dependencies, new or existing programs become runnable, init.d-compliant uber-JARs or uber-WARs with embedded web-servers and virtually zero-configuration, code or otherwise. As an added freebie, Spring Boot Actuator will provide your programs with amazing configuration-free production monitoring facilities that let you have RESTFUL endpoints serving live stack-traces, heap and GC statistics, database statuses, spring-bean definitions, and password-masked configuration file audits.
Angular 16 is the biggest release since the initial rollout of Angular, and it changes everything: Bye bye zones, change-detection, life-cycle, children-selectors, Rx and what not.
Recorded webinar based on these slides given by Yaron Biton, Misterbit Coding-Academy’s CTO, can be found at: https://www.youtube.com/watch?v=92K1fgPbku8
Coding-Academy offers advanced web-techs training and software development services: Top-rated Full-stack courses for Angular, React, Vue, Node, Modern architectures, etc. | Available top-notch on-demand-coders trough Misterbit technological solutions | Coding-Academy Bootcamp: Hundreds of employed full-stack developers every year | Anything web, end to end projects | Tech companies and startups | Consulting to management and dev teams | Workshops for managers and leaders.
Rasheed Amir presents on Spring Boot. He discusses how Spring Boot aims to help developers build production-grade Spring applications quickly with minimal configuration. It provides default functionality for tasks like embedding servers and externalizing configuration. Spring Boot favors convention over configuration and aims to get developers started quickly with a single focus. It also exposes auto-configuration for common Spring and related technologies so that applications can take advantage of them without needing to explicitly configure them.
This document provides an introduction to Angular, including its history and architecture. Angular is a TypeScript-based front-end framework for building client-side dynamic web applications. It discusses when to use Angular, such as for large complex projects or apps with dynamic content. The document also covers Angular's modules, components, data binding, directives, services and dependency injection.
Angular is a development platform for building mobile and desktop web applications using TypeScript/JavaScript. It is an update to AngularJS with a focus on mobile and typesafety. Major versions include Angular 1.x, 2.x, 4.x and 5.x. Angular uses components, services and modules to build applications with templates and styles. It is compiled to JavaScript using transpilation and supports AOT and JIT compilation. Common tools used with Angular include the Angular CLI, Webpack and Zone.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.
This document discusses data binding in Angular, including the differences between HTML attributes and DOM properties, the three types of data binding (one way and two way), and examples of each type of binding. It explains that one way binding can update properties, classes, styles, attributes and listen to events, but not read values. Two way binding uses the NgModel directive to both display and update a data property when the view changes. The document provides examples of property, event, class, style and attribute binding and how Angular matches bindings to component properties and events.
Spring Boot allows creating standalone Spring applications with minimal configuration. It makes assumptions about dependencies and provides default configurations. It aims to provide a faster development experience for Spring. Some key Spring Boot components include auto-configuration, core functionality, CLI, actuator for monitoring, and starters for common dependencies. To use Spring Boot, create a project with the Spring Initializr, add code and configurations, then build a jar file that can be run standalone.
Spring Boot is a framework that makes it easy to create stand-alone, production-grade Spring based Applications that can be "just run". It takes an opinionated view of the Spring platform and third-party libraries so that new and existing Spring developers can quickly get started with minimal configuration. Key features include automatic configuration of Spring, embedded HTTP servers, starters for common dependencies, and monitoring endpoints.
Swagger is an open source software framework backed by
a large ecosystem of tools that helps developers
design, build, document and consume RESTful Web
services.
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.,
AngularJS is an MVC framework for building client-side web applications. It uses two-way data binding between models and views, dependency injection to decouple modules, and directives to extend HTML. Key features include routing for single-page applications, services for reusable logic, and tools for testing AJAX code. AngularJS provides standard directives, services, and routing capabilities to build complete applications in the browser.
The document provides an agenda and recap for an Angular workshop session. The agenda covers Angular component lifecycle, modularizing Angular applications, Angular routing, and hands-on examples. The recap summarizes key points from the previous session, including why Angular is used for single page applications, its building blocks like components and services, and TypeScript. It also discusses Angular component lifecycle hooks and provides an example flow. The hands-on section describes refactoring a weather application to add routing and modularization. Essential coding practices like separation of concerns and reusability are also covered.
Angular 2.0 aims to build a complete platform for web applications by improving performance, developer productivity, and versatility compared to AngularJS 1.x. Key goals include making the framework faster, simpler, and more modular. It focuses on improved change detection, lazy loading of code, and support for features like universal rendering. Major companies like Capital One, The Weather Channel, and LucidChart adopted Angular 2.0 to build applications with better performance, collaboration, and maintenance. The framework saw contributions from an active open source community and remains one of the most popular JavaScript frameworks.
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.
Top Features And Updates Of Angular 13 You Must KnowAndolasoft Inc
At Andolasoft, we have expert Angular developers can help you migrate your existing applications, and also create new web and mobile applications with the best quality.
26 top angular 8 interview questions to know in 2020 [www.full stack.cafe]Alex Ershov
The document discusses 26 top Angular 8 interview questions, including questions about the difference between Promises and Observables, the purpose of ngOnInit versus the constructor, and what AOT (Ahead-of-Time compilation) is. It also covers questions about new features in Angular 8 like Bazel, Ivy, and changes to the lazy loading and location modules. Key topics covered include components, routing, RxJS, templates, and lifecycle hooks.
Discussion on angular offering, approaches to integrate web worker in angular (5 and 6) application, their pros and cons. A sample example implementation using custom web worker approach and integrating the same with CLI(1 and 6) and the application.
Slide deck presented during my session on "Introduction to Angular 2" at UNICOM DevCon 2016 conference on Thursday, Dec 1, 2016. The conference was at Mövenpick Hotel & Spa, Bengaluru.
Angular 2.0 introduces significant changes from Angular 1.x including a new component-based architecture, use of TypeScript for static typing, and improved performance. The document discusses how to prepare Angular 1.x applications for migration by refactoring into components and using TypeScript. It also provides an overview of key differences in Angular 2.0 like bootstrapping, data binding, dependency injection and services.
Angular from Zero to Mastery - Training (Intermediate)Smail LOUNES
Angular training covers building complete web apps with Angular including core concepts like components, services, routing and forms. The training will cover setting up the development environment, building the app architecture with modules, components and services, and implementing key features like data binding, communication between components, dependency injection, pipes, directives and HTTP requests. The trainees will then apply these concepts to build a mini travel app for Algeria with authentication, user profiles and admin features using techniques like reactive forms, Angular Material and Flex Layout.
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.
Angular 13 is a popular choice for enterprise-scale app development. It has relieved developers, often known as Angularities, by providing an Ivy view engine for a cleaner way of creating components. To know more visit at https://www.zenesys.com/blog/angular-13-features
Reason to choose Angular JS for your Web ApplicationPriyanka Verma
AngularJS is open source JavaScript framework that can be of help with utilizing Single Page HTML for declaring dynamic views in web-apps. The latest version of Angular 2 gives many advantages over AngularJS 1.x including better performance, lazy loading, simpler APIs, easier debugging and considerably more.
This document provides an introduction to Angular 2, including why it was developed, its key features and components, and how to set up an Angular 2 development environment. Some of the main points covered include:
- Angular 2 is a rewrite of Angular 1 and focuses on components over controllers, uses TypeScript, and supports services and mobile development better.
- It introduces components, modules, templates, and metadata. Common components include modules, components, and services.
- To set up Angular 2, developers need to install Node.js, npm, and use the Angular CLI to generate projects, or clone the quick start repository. The Angular CLI helps to create, develop, and maintain
AngularJS (1.x) is a client-side framework for developing browser-based applications using model-view-whatever architecture. It was created by Google and is open source. AngularJS uses templates, modules, services, dependency injection and two-way data binding to build single page applications. Key features include bootstrapping, routing, directives and unit testing capabilities. Angular 2 is a complete rewrite of AngularJS and uses only class-based services rather than multiple options.
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.
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.
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.
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.
Angular 6 Training with project in hyderabad indiaphp2ranjan
ngularJS is one of the JavaScript open-source web application frameworks which is generally used to add an HTML page along with a tag. The major aim of AngularJS is to simplify the application development and testing performance by providing a framework called MVC (Model View Controller) Architecture. It enables the application to change from bulk amount of programming code into a simple code.
The document provides an overview of React including its introduction, prerequisites, installation, fundamentals, components, life cycle, routing, hooks, Redux, projects, testing, comparison to Angular, and tips for React developers. It discusses key React concepts such as JSX, props, state, events, DOM, and virtual DOM.
The document discusses Spring framework concepts including inversion of control (IOC), dependency injection, Spring modules, the IOC container, and configuring beans through XML. It provides examples of injecting properties, constructor arguments, inner beans, and aliases in the Spring XML configuration file. The examples demonstrate how Spring's IOC container instantiates, configures and wires Java objects defined as beans in the configuration.
The document provides information about Hibernate, including:
1) Hibernate is an open-source object-relational mapping tool for Java that simplifies interaction between Java objects and relational databases.
2) It discusses Hibernate's architecture including the Configuration, SessionFactory, Session, Transaction, and Query objects.
3) Examples are provided of configuring Hibernate using annotations and XML files, performing basic CRUD operations, and mapping different relationship types like one-to-one and one-to-many.
The document provides information about Java Server Pages (JSP) technology:
- JSP separates the graphical design from dynamic content and allows Java code to be embedded in HTML pages, helping to develop dynamic web applications.
- It benefits web designers and programmers by allowing each to focus on their specialties without needing to learn the other's language.
- JSP pages are converted to servlets by the JSP container, with the Java code embedded in the servlet's _jspService() method. This process compiles and runs the page each time it is requested.
Introduction to Web Application Technologies
CGI Programs on the Web Server
What is servlet?
Jobs of servlet
Advantages over CGI
Why pages are build dynamically?
Servlet container
Installation & configuration
- Type 1: Integration of Tomcat server and eclipse
- Type 2: Java Servlet
Servlet Sample Example
Servlet Overview And Architecture
- Servlet Life cycle/Single Thread Model
- Interface Servlet
- HttpServlet Class
- HttpServletRequest, HttpServletResponse
Web Application Technologies,What is servlet?
Jobs of servlet
Advantages over CGI
Why pages are build dynamically?
Servlet container
Installation & configuration
- Type 1: Integration of Tomcat server and eclipse
- Type 2: Java Servlet
Servlet Sample Example
Servlet Overview And Architecture
- Servlet Life cycle/Single Thread Model
- Interface Servlet
- HttpServlet Class
- HttpServletRequest, HttpServletResponse
Handling client request :Http request
Generating Server Response : Http status code
Handling Session
- Cookies
- Session Tracking
- URL-re writing
- Hidden Form fields
Data Science applications on logistics. This will give overall data science applicability on various feilds of logistc management. Research and Trends, framework, forward, backward, process, move my goods, my goods, requests, beautiful soap, selenium, tools, arohaka technologies,exploratory data science, feature engineering, model building
This document contains an agenda for an interview preparation session focusing on .NET and C# ASP.NET. The agenda includes introductions, discussing domains and projects, an overview of the Software Development Life Cycle (SDLC) including Scrum and planning poker, version management using Git, problem solving techniques, an overview of common .NET programs and technologies like the .NET Framework and C#, and concluding with manager and HR rounds.
This document provides information about becoming an entrepreneur, including defining what an entrepreneur is, identifying common types of entrepreneurs, listing advantages of entrepreneurship, and outlining typical steps to become an entrepreneur. It discusses permits and registrations required, choosing a legal structure, developing an idea and value proposition, understanding the industry, and conducting market and financial feasibility analyses. A case study of the successful Indian startup RedBus is also included, which began as the founder struggled to book a bus ticket home.
This document provides an overview of the Java programming language. It discusses Java's history and why it was created. It also outlines some of Java's key fundamentals like variables, data types, operators, and control statements. Additionally, it covers object-oriented programming concepts in Java like classes, objects, inheritance and encapsulation. The document is intended to help readers get started with learning Java.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It adds optional static types, classes, and interfaces to JavaScript to help catch errors. TypeScript supports object-oriented programming concepts like classes, interfaces, inheritance, and modules. It is compatible with JavaScript and can reuse existing JavaScript code and libraries. The TypeScript compiler checks for errors and compiles TypeScript code into JavaScript that can run on any browser, device, or operating system that supports JavaScript.
The document provides an overview of Git and GitHub. It discusses version control systems and the differences between centralized (CVCS) and distributed (DVCS) version control systems. Git is introduced as a DVCS that allows for complex merges and fast collaboration. The document then covers Git concepts, commands, workflows and how to use GitHub for hosting Git repositories and collaborating on projects.
Jenkins is an open source tool that automates the continuous integration process. It monitors source code repositories for changes, automatically builds the code, runs tests, and provides feedback to developers. Before CI tools like Jenkins, software delivery was slow and locating bugs after integration was difficult. With Jenkins, every code change triggers an automatic build and test, improving feedback and release frequency while reducing bug fixing time. Jenkins has over 1000 plugins and alternatives include Travis CI, Buildbot, Bamboo, and JetBrains TeamCity.
Integrated Marketing Communications (IMC)- Concept, Features, Elements, Role of advertising in IMC
Advertising: Concept, Features, Evolution of Advertising, Active Participants, Benefits of advertising to Business firms and consumers.
Classification of advertising: Geographic, Media, Target audience and Functions.
The Jewish Trinity : Sabbath,Shekinah and Sanctuary 4.pdfJackieSparrow3
we may assume that God created the cosmos to be his great temple, in which he rested after his creative work. Nevertheless, his special revelatory presence did not fill the entire earth yet, since it was his intention that his human vice-regent, whom he installed in the garden sanctuary, would extend worldwide the boundaries of that sanctuary and of God’s presence. Adam, of course, disobeyed this mandate, so that humanity no longer enjoyed God’s presence in the little localized garden. Consequently, the entire earth became infected with sin and idolatry in a way it had not been previously before the fall, while yet in its still imperfect newly created state. Therefore, the various expressions about God being unable to inhabit earthly structures are best understood, at least in part, by realizing that the old order and sanctuary have been tainted with sin and must be cleansed and recreated before God’s Shekinah presence, formerly limited to heaven and the holy of holies, can dwell universally throughout creation
Webinar Innovative assessments for SOcial Emotional SkillsEduSkills OECD
Presentations by Adriano Linzarini and Daniel Catarino da Silva of the OECD Rethinking Assessment of Social and Emotional Skills project from the OECD webinar "Innovations in measuring social and emotional skills and what AI will bring next" on 5 July 2024
How to Show Sample Data in Tree and Kanban View in Odoo 17Celine George
In Odoo 17, sample data serves as a valuable resource for users seeking to familiarize themselves with the functionalities and capabilities of the software prior to integrating their own information. In this slide we are going to discuss about how to show sample data to a tree view and a kanban view.
Join educators from the US and worldwide at this year’s conference, themed “Strategies for Proficiency & Acquisition,” to learn from top experts in world language teaching.
How to Configure Time Off Types in Odoo 17Celine George
Now we can take look into how to configure time off types in odoo 17 through this slide. Time-off types are used to grant or request different types of leave. Only then the authorities will have a clear view or a clear understanding of what kind of leave the employee is taking.
No, it's not a robot: prompt writing for investigative journalismPaul Bradshaw
How to use generative AI tools like ChatGPT and Gemini to generate story ideas for investigations, identify potential sources, and help with coding and writing.
A talk from the Centre for Investigative Journalism Summer School, July 2024
How to Store Data on the Odoo 17 WebsiteCeline George
Here we are going to discuss how to store data in Odoo 17 Website.
It includes defining a model with few fields in it. Add demo data into the model using data directory. Also using a controller, pass the values into the template while rendering it and display the values in the website.
4. Angular is a platform and framework for building single-page client applications
using HTML and Typescript.
Angular is written in Typescript language
• Typescript is compiled into JavaScript
• JavaScript is used in HTML pages.
As a platform , Angular includes:
• A component-based framework for building scalable web applications
• A collection of well-integrated libraries that cover a wide variety of features,
including routing, forms management, client-server communication, and more.
• A suite of developer tools to help you develop, build, test, and update your code
4/6/2022 4
5. Developers: Google
Early version of angular was named angular 2 .then later renamed to just angular.
Angular open-source web application framework led by the Angular Team at Google.
Angular is different from Angularjs. Angular is rewrite of Angularjs. But this led to confusion among
developers.
Angular has MVC(Model View Controller)based architecture for application development.
We can use it with NPM and without npm(cdn etc) but 90% developer use NPM with NPM package.
4/6/2022 5
6. Versions Released Features
Angularjs 1 Oct-10 AngularJS usually referred to as “Angular.js” or Angular 1.x
JavaScript-based open-source front-end web application framework.
maintained by Google-single-page applications.
model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures
Angular 2 Sep-16 Re-written in typescript
3 skipped, due to some mismatch between @angular/core,@angular/compiler and @angular/router
4 Mar-17 backward compatibility previous versions
No major change from 2
reduced size of the code to 60%
5 Nov-17 Build optimizer
DOM support
compiler improvements
Internationalized
new router life cycle
6 May-18 angular material and Angular CLI
7 Oct-18 performance improvement
8 May-19 Dynamic imports
Differential loading
web worker support
new UX
4/6/2022 6
7. 4/6/2022 7
9 Feb-20 Angular material 9
Ivy Compiler(Smaller Bundle Size
Faster Testing
Better Debugging
Improved CSS class and style binding
Improved Type Checking
Improved build errors
Improved build times, enabling AOT on by default
Improved Internationalization)
Typescript support 3.7
10 Jun-20 Minor release with improvisation
11 Nov-20 popular bugfixes
12 May-21 passing context across HTTP
Support for SASS
Support for Tailwind css
webpack5 integration
13 Nov-21 IE11 Support removed
68% performance improvement
support typescript 4.4
improvements in angular material
8. 4/6/2022 8
1. Angular Ivy is the new default rendering engine. It removes unused code(treeshake) and recompild
the code changed
2. Starting from version 9 of Angular, your TypeScript code will be compiled using Ivy instead of the
older ViewEngine (VE).
3. Basically, Ivy decreases your bundle sizes, enhances testing, and improves debugging capabilities. In
addition, Ivy uses Ahead-of-Time compilation to speed up your apps.
• In Just In Time (JIT) compilation, the compiler will be bundled along with the application and send to the
browser. Angular application will be compiled in the browser and run just before the execution of application.
Eventhough JIT provides certain advanced feature, JIT slows down the compilation and also the app bundle will
be double the size produced by AOT compiler as it includes compiler as well.
• Ahead Of Time (AOT) Compiler
In AOT compilation, the compiler will emit optimised code ready to run inside the browser without any addition
step. It will reduce the size of the bundle as well as reduce the compilation time and startup time of the application.
– Optimised code.
– Faster build time.
– Reduced bundle size.
– Better performance.
9. . Design
Mobile – Angular 2 addresses the challenges(performance, load time) of mobile view
Modular – framework architecture MVC to component based UI improve better performance
ES6 Support- modular import , export, annotations , OOP class inheritance so on
Key differences are
Framework architecture
• Angular 2 take component base UI by combine controller and view
// Angular1 angular.module('App') .controller('TestController', function() { // controller logic });
// Angular2 @Component({ selector: 'App', templateUrl: 'index.html' }) export class TestComponent { }
• No more Scope
– Angular 1 retrieves data from controller to view through $scope but now it is through controller
property
Angular1 angular.module('App') .controller('TestController', function() { $scope.data1 = someData1;
$scope.data2 = someData2; })
// Angular2 @Component({ selector: 'App', templateUrl: 'index.html' }) export class TestComponent {
constructor() { this.data1 = someData1; this.data2 = someData2; } }
4/6/2022 9
WHY ANGULAR2 THAN ANGULAR 1
10. . Template Syntax and Databinding
| Data Direction | Syntax | Binding Type | | | |
One way from data source to view | {{expression}} | Interpolation | |
One way from data source to view | [target]="expression" | Property, Attribute, style, class | |
One way view to data source | (target)="expression" | Event | |
Two way | [(target)]="expression" | Two way
<!-- Angular1 --> <img src="{{some.expression}}">
<!-- Angular2 --> <img [src]="some.expression">
. Dependency Injecton
In Angular 1, we can inject dependencies in multiple places in different ways:
• in the link function by position
• in the directive definition by name
• in the controller function by name, etc
• In Angular 2, we can inject through constructor injection
4/6/2022 10
WHY ANGULAR2 THAN ANGULAR 1
11. In // Angular1
app.controller(<TestController<, [<SomeService<, function(SomeService) {
// logic here
})
// Angular2
export class TestComponent {
constructor(someService: SomeService) {}
}
• Component Life cycle hook
– provide to hook some code into the component's lifecycle through interface build-in to the core framework.
– Life cycle hook interface –OnInit, OnDestroy,OnChange, AfterContentInit,AfterContentChecked,AfterViewInit,AfterViewChecked
. export class TestComponent implements OnInit { ngOnInit() { // initialization code } }
• New Routing Mechanism
– angular2 has combine controller and view into one component the new routing mechanism
– Angular2 decorate the route using @RouteConfig annotation (anchor tag with RouterLink )
4/6/2022 11
WHY ANGULAR2 THAN ANGULAR 1
13. Installation and Configuration:
13
INSTALLATION AND CONFIGURATION
To install Angular on our local system, we need the following:
Node.js - what will understand your javascript code and execute it to produce a
result.
NPM (Node Package Manager)- tool which will allow you to install third party
libraries (other people's code) by using the command line.
IDE (Integrated Development Environment)or Text Editor
Steps to Install Node.js and NPM on Windows:
•Step 1: Download Node.js Installer
https://nodejs.org/en/download/.
•Step 2: Install Node.js and NPM from Browser
•Step 3: Verify Installation
node –v(This will display the installed Node.js version)
npm –v(This will display the installed NPM version)
15. Install the typescript
npm install -g typescript
Install the Angular CLI:
To install the Angular CLI, open a terminal window and run the following command:
npm install -g @angular/cli
ng update [options]
ng update @angular/cli@:<major_version> @angular/core@:<major_version>
Create a workspace and initial application:
Run the CLI command ng new and provide the name my-app:
ng new angularApp
Run the application :
Run the command: ng serve --o
Open your Browser : http://localhost:4200/
4/6/2022 15
INSTALLATION
16. 4/6/2022 16
ng new angularApp
workspace configuration files
worksspace cofig Purpose
.editorconfig Configuration for code editors. See EditorConfig.
.gitignore Specifies intentionally untracked files that Git should ignore.
README.md Introductory documentation for the root application.
angular.json
CLI configuration defaults for all projects in the workspace, including configuration
options for build, serve, and test tools that the CLI uses, such as Karma,
and Protractor.
package.json
Configures npm package dependencies that are available to all projects in the
workspace. .
package-lock.json
Provides version information for all packages installed into node_modules by the
npm client.
src/ Source files for the root-level application project.
node_modules/
Provides npm packages to the entire workspace. Workspace-
wide node_modules dependencies are visible to all projects.
tsconfig.json
The base TypeScript configuration for projects in the workspace. All other
configuration files inherit from this base file.
SRC configuration files
SRC/APP/ FILES PURPOSE
app/app.component.ts
Defines the logic for the application's root component, named AppComponent. The
view associated with this root component becomes the root of the view hierarchy as
you add components and services to your application.
app/app.component.html Defines the HTML template associated with the root AppComponent.
app/app.component.css Defines the base CSS stylesheet for the root AppComponent.
app/app.component.spec.ts Defines a unit test for the root AppComponent.
app/app.module.ts
Defines the root module, named AppModule, that tells Angular how to assemble the
application. Initially declares only the AppComponent. As you add more components
to the app, they must be declared here.
17. The Angular CLI is a command-line interface tool that you use to initialize, develop,
scaffold, and maintain Angular applications directly from a command shell.
https://angular.io/cli
Installing the angular cli
npm install -g @angular/cli
ng help
--loads all the command
ng build <project-name>
17
Angular CLI
20. 4/6/2022 20
ANGULAR ARCHITECTURE
The Angular application is made using the following:
Modules
Component
Template Directives
Data Binding
Services
Dependency Injection
Routing
21. 4/6/2022 21
Parent -Child Component
• Parent Component:
It is a root component that serves as a parent component
• Child Component:
The angular follows component-based Architecture, where each Angular component
manages a specific task or workflow.It is a more specific part inside a parent
component.
https://angular.io/guide/inputs-outputs
22. Interpolation: It is sending a file from component.ts to component.html
It's used to display the value of a component member variable in the associated template,
e.g. ``. We use curly braces for interpolation
Example: In component.ts
export class AppComponent{ appName=‘hello app’;
name=“angular”
getName(){return ram}
Obj={age:25}
arr=[‘ram’,’sham’]
}
In component.html
<h1>name</h1>
If giving double braces{{}}
<h1>{{name}}</h1>
<h1>{{getName}}</h1>
<h3>{{obj.age}}</h3>
<h2>{{arr.length}}</h2>
4/6/2022 22
23. Event binding allows us to bind events such as clicks, hover etc
Import Event in angular
oClick Event
• Keyup event
• Keyup with enter and space
oKeydown
oBlur
oMouseover and mouseleave
oGet values on textbox
oget value with value change
oGet value with button change
4/6/2022 23
Event
Example: In component.ts
export class AppComponent {
title=‘hello app’;
myEvent(evt){
Console.warn(evt)}}
In component.html
<button (click)=“myEvent(‘click event’)”>click me</button>
<input type=“text”(keyup)=“myEvent(‘keyup event’)”/>
<input type=“text” #box(keyup.enter)=“myEvent(box.value)”/>
<input type=“text” #box (keyup.space)=“myEvent(box.value)”/>
<input type=“text” #box (blur)=“myEvent(‘blur event’)”/>
<h1>(mouseover)=“myEvent(‘mouseover’)”>mouse event</h1>
24. Angular applications are modular and Angular has its own modularity system
called NgModules.
They can import functionality that is exported from other NgModules, and
export selected functionality for use by other NgModules.
Every Angular application has at least one NgModule class, the root module,
which is conventionally named AppModule and resides in a file
named app.module.ts.
The command to generate module is:
ng generate module auth
4/6/2022 24
MODULES
25. It is complete definition having complete feature for instance
Module: Auth
- components – signin, signout, resetpassword
- service – login-service
- classes – helper or Signin
- pipes
4/6/2022 25
MODULES
26. 4/6/2022 26
MODULES
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SigninComponent } from './signin/signin.component';
import { SignoutComponent } from './signout/signout.component’;
import { ResetpasswordComponent } from
'./resetpassword/resetpassword.component';
@NgModule({
declarations: [
SigninComponent,
SignoutComponent,
ResetpasswordComponent
],
imports: [
CommonModule
]
exports:[
SigninComponent,
SignoutComponent,
ResetpasswordComponent
]
})
export class AuthModule { }
27. 4/6/2022 27
MODULES
Availabilty in parent module:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AuthModule} from './auth/auth.module'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AuthModule
],
providers: [AuthModule],
bootstrap: [AppComponent]
})
export class AppModule { }
28. 4/6/2022
COMPONENT
The Component is the main building block of an Angular Application.
The Component contains the data & user interaction logic that defines how the
View looks and behaves.
The Angular applications will have lots of components. Each component handles a
small part of UI. These components work together to produce the complete user
interface of the application.
The Components consists of three main building blocks
• Template
• Class
• MetaData
The command to generate component is: ng generate component test
31. 4/6/2022
COMPONENT-INLINE TEMPLATE/STYLE
The Component can be created with inline template and inline style when there is
not required to develop separate html and css
it is generated as ng g c <comp-name> --inline-template –-inline-style
@Component({
selector: 'app-user-list',
template: `
<p class='.hometown'>
user-list works!
</p>
<div>test</div>
`,
styles: [
'hometown{background-color:red}',
'div{background-color:green;width: 70px; height: 300px; border: 1px solid
#c3c3c3; display: flex; flex-wrap: wrap; align-content: center;}'
]
})
}
32. 4/6/2022
Invoking function
<html>
<head><title>welcome to angular 12</title></head>
<body>
<button (click)="onClickMe('Mallikarjuna')">Click me!</button>
<button (click)="onClickMe('100')">Click me!</button>
<input type="text" name="username" #username placeholder="enter username" value=""
(keyup)="getValue(username.value)">
{{inputtext}}
</body>
</html>
App.component.ts
export class AppComponent {
inputtext=""
onClickMe(name:string|number){
alert('thank you for clicking me'+name)
}
getValue(name:string){
this.inputtext = name
}
33. 4/6/2022
Invoking function
<html>
<head><title>welcome to angular 12</title></head>
<body>
<button (click)="onClickMe('Mallikarjuna')">Click me!</button>
<button (click)="onClickMe('100')">Click me!</button>
<input type="text" name="username" #username placeholder="enter username" value=""
(keyup)="getValue(username.value)">
{{inputtext}}
</body>
</html>
App.component.ts
export class AppComponent {
inputtext=""
onClickMe(name:string|number){
alert('thank you for clicking me'+name)
}
getValue(name:string){
this.inputtext = name
}
34. The template defines the layout and content of the View. Without the
template, there is nothing for Angular to render to the DOM.
You can add Angular directives , Angular Pipes & Other Angular Components on the
template.
The data to Template comes from the Component, which in turn gets it from
a Angular Service. Using the data binding techniques, we can keep the Template in
sync with the Component.
The templates can use the Event Binding or two way data binding to notify the
component, when user changes something on the View.
There are two ways you can specify the Template in Angular.
• Defining the Template Inline
• Provide an external Template
4/6/2022
34
TEMPLATE
35. Two-way binding gives components in your application a way to share data. Use
two-way binding to listen for events and update values simultaneously between
parent and child components
import { FormsModule } from '@angular/forms';
app.component.html
<html>
<head><title>welcome to angular 12</title></head>
<body>
Two way binding:: <input type="text" [(ngModel)]="data" >
{{data}}
</body>
</html>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
data:any
}
4/6/2022
35
TWO WAY BINDING
36. Metadata Provides additional information about the component to the Angular.
Angular uses this information to process the class.
We use the @Component decorator to provide the Metadata to the Component.
The Components are defined with a @Component class decorator.
When Angular sees a class with @Component decorator, it treats the class as
Component.
Important Component metadata properties
• Selector
• Providers
• Directives
• Styles/styleUrls
• template/templateUrl
4/6/2022 36
METADATA
37. The Class provides the data & logic to the View.
Class Contains the Properties & Methods. The Properties of a class can be bind
to the view using Data Binding.
The simple Angular Class
export class AppComponent
{
title : string ="app"
}
Command to generate component:
ng g c <component_name>
4/6/2022 37
CLASS
38. Directives are classes that add additional behavior to elements in your Angular
applications.
The different types of Angular directives are as follows:
• Components: directives with a template. This type of directive is the most
common directive type.
• Attribute Directives: directives that change the appearance or behavior of an
element, component, or another directive.
Command to generate: ng g directive blueBackground
• Structural Directives: directives that change the DOM layout by adding and
removing DOM elements.
4/6/2022 38
DIRECTIVES
39. 4/6/2022 39
Directives
The ngIf Directives is used to add or remove HTML elements based on an expression.
The expression must return a boolean value. If the expression is false then the
element is removed, else the element is inserted
Ng-template is visible on condition statements when value is given
If else condition
Condition with string
Elseif condition
Condition with property binding.
Example: In component.ts In component.html
<h1 *ngif=“show”>if block</h1>
export class AppComponent{ <h1 *ngif=“show”>else block</h1>
<h1 *ngif=“show else elseBlock”>if block</h1>
<h1 *ngif=“show ==‘yes’; then ifBlock else
elseBlock”>if block</h1>
title=‘hello app’; <ng-template #ifBlock><h1>if block</h1></ng-template>
Show=false
Show=yes
Show=red} <ng-template #elseBlock><h1>if block</h1></ng-template>
<ng-template [ngif]=“show==‘red’”><h1>red
block</h1></ng-template>
40. 4/6/2022 40
Directives
• ngFor:
Is an Angular structural directive, which repeats a portion of the HTML
template once per each item from an iterable list (Collection).
Example:
<tr *ngFor="let customer of customers;">
<td>{{customer.customerNo}}</td>
<td>{{customer.name}}</td>
<td>{{customer.address}}</td>
<td>{{customer.city}}</td>
<td>{{customer.state}}</td>
</tr>
41. 4/6/2022 41
Directives
• ngSwitch:
The directive lets you add/remove HTML elements depending on a match
expression. ngSwitch directive used along with ngSwitchCase and ngSwitchDefault
Example:
<div [ngSwitch]="Switch_Expression">
<div *ngSwitchCase="MatchExpression1”> First Template</div>
<div *ngSwitchCase="MatchExpression2">Second template</div>
<div *ngSwitchCase="MatchExpression3">Third Template</div>
<div *ngSwitchCase="MatchExpression4">Third Template</div>
<div *ngSwitchDefault?>Default Template</div>
</div>
43. 4/6/2022 43
ATTRIBUTE DIRECTIVES
bluebackgroundDirective.ts
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appBluebackground]'
})
export class BluebackgroundDirective {
constructor(e1: ElementRef) {
e1.nativeElement.style.color =“blue";
}
}
• App.module.ts
import {BluebackgroundDirective} from './bluebackground.directive’
BluebackgroundDirective
app.component.html
<H1 appBluebackground>welcome to directive</H1> <br>
<p>welcome to angular 12</p> <br>
<p appBluebackground>welcome to angular 13</p> <br>
44. Dependency Injection is the ability to add the functionality of components at
runtime.
The DI framework lets you supply data to a component from an Injectable
service class , defined in its own file.
Dependencies are services or objects that a class needs to perform its function.
The @Injectable() decorator specifies that Angular can use this class in the DI
system.
4/6/2022 44
DEPENDENCY INJECTION
45. DI is a coding pattern where a class receives its dependencies from an external source
rather than creating them itself
class Company{
Dept;
Employee;
constructor(){
this.Dept = new Dept();
this.Employee = new Employee();
}
Drawback:
• The first drawback is that the code is not flexible. Any time the dependencies change, the
PostalDetails class needs to be changed as well.
• The second drawback is that this code is not suitable for testing. Anytime you instantiate a new
Company class, you get the same Dept and Employee.
4/6/2022 45
DEPENDENCY INJECTION
47. Pipes are used to transform the data.
Pipes will take data input and transform it into a desired format.
Pipes are written using the Pipe operator (|)
Types of Pipes:
• Built in Pipes:
Uppercase Lowercase
Currency Date
• Parameterized Pipes:
We can pass one or more parameters to pipes.
• Chaining Pipes:
We can connect multiple pipes to a data input.
• Custom Pipes:
We can create our own custom pipes for data formatting.
Example: <p>The hero's birthday is {{ birthday | date }}</p>
4/6/2022 47
PIPES
48. . Pipes
• For Example, the Date pipe formats the date according to locale rules. We can
pass arguments to pipe and chain pipes. The Angular also allows us to create the
Custom Pipe
<h3>Using Date Pipe </h3>
<p>Unformatted date : {{toDate }} </p> //Without pipe
<p>Formatted date : {{toDate | date}} </p>
4/6/2022 48
49. . Pipes
Types of Pipes:
• Angular Pipes :Angular Pipes takes data as input and formats or transform the data to display in
the template.
• Angular Custom Pipes : The Pipes are a great way to transform the appearance of elements in
the template. The Angular comes with some great built-in pipes like Date pipe, Currency pipe,
and Number pipe, etc. But if these pipes do not cover your needs, then we can create our
own pipe in Angular.
• Date Pipe: the Date pipe formats the date according to locale rules
• AsyncPipe: When an observable or promise returns something, we use a temporary property to
hold the content.
Later, we bind the same content to the template. With the usage of AsyncPipe, the promise or
observable can be directly used in a template and a temporary property is not required.
4/6/2022 49
50. . Pipes
KeyValue Pipe: The KeyValue Pipe converts given Object or Map into an array of key-value pairs.
We can use this with the ngFor to loop through the object keys.
• Using Pipes in Components & Service :
• Using pipes in our code involves three simple steps
• Import the pipe in Module
• Inject pipe in the constructor
• Use the transform method of the pipe
4/6/2022 50
51. Services allows us to create reusable common functionality between various
modules and components.
Services are injected into application using Dependency Injection mechanism.
Services are commonly used for making HTTP requests to our endpoints APIs
to request and receive the response.
Services can value , methods or combination of both.
Creating a Service:
ng generate service test_service
4/6/2022 51
SERVICE
54. Routing is a mechanism used to manage the ‘paths’ and ‘routes’ of our Angular
application.
Angular framework comes with “Router” module which has everything we need to
design, develop and implement routes and navigation links.
We navigate from one component view to other using routes.
Example:
const routes: Routes = [
{ path: 'first-component', component: FirstComponent },
{ path: 'second-component', component: SecondComponent },
];
4/6/2022 54
ROUTER
55. . Life Cycle
• Life Cycle hooks: When the angular application starts it creates and renders the
root component. It then creates and renders its Childrens & their children. It
forms a tree of components.
• The Angular life cycle hooks are nothing but callback function, which angular
invokes when a certain event occurs during the component’s life cycle.
4/6/2022 55
For example:
ngOnInit when Angular initializes the component for the first time.
When a component’s input property change, Angular invokes ngOnChanges
If the component is destroyed, Angular invokes ngOnDestroy
56. . Life Cycle
• Here is the complete list of life cycle hooks, which angular invokes during the
component life cycle. Angular invokes them when a certain event occurs.
• ngOnChanges
• ngOnInit
• ngDoCheck
• ngAfterContentInit
• ngAfterContentChecked
• ngAfterViewInit
• ngAfterViewChecked
• ngOnDestroy
4/6/2022 56
57. . Forms
The Angular forms are used to collect the data from the user.
The data entry forms can be very simple to very complex. It can contain large no of
input fields, Spanning multiple tabs. Forms may also contain complex validation logic
interdependent on multiple fields.
• Some things forms are expected to do
• Initialize the forms fields and present it to the user
• Capture the data from the user
• Track changes made to the fields
• Validate the inputs
• Display helpful errors to the user
4/6/2022 57
58. . Forms
• Form Module blocks:
The Angular Forms module consists of three Building blocks, irrespective of whether
you are using Template-driven or Reactive forms approach. (ref:
https://www.pluralsight.com/guides/difference-between-template-driven-and-
reactive-forms-angular)
FormControl: A FormControl represents a single input field in an Angular form.
Ex :
First Name : <input type="text" name="firstname" />
4/6/2022 58
Formcontrol FormGroup FormArray
59. . Forms
Form Group: FormGroup is a collection of FormControls. Each formcontrol is a
property in a FormGroup. with the control name as the key.
Example :
city : <input type="text" name="city" >
Street : <input type="text" name="street" >
PinCode : <input type="text" name="pincode" >
All of the above input fields are represented as the separate FormControl.
FormArray: is an array of form controls. It is similar to FormGroup except for one
difference. In FormGroup each FormControl is a property with the control name
as the key. In FormArray is an array of form controls.
• contactForm = new FormGroup( {
• name: new FormControl(''),
• cities:new FormArray([
• new FormControl('Mumbai'),
• new FormControl('Delhi')
• ]) });
4/6/2022 59
60. . HTTP
HTTP:The newly designed HttpClient Module allows us to query the Remote API
source to get data into our Application. It requires us to Subscribe to the returned
response using RxJs observables.
HTTP GET
The HttpClient.get sends the HTTP Get Request to the API endpoint and parses
the returned result to the desired type. By default, the body of the response is
parsed as JSON. If you want any other type, then you need to specify explicitly
using the observe & responseType options.
HTTP Post
The HttpClient.post() sends the HTTP POST request to the endpoint. Similar to the
get(), we need to subscribe to the post() method to send the request. The post
method parsed the body of the response as JSON and returns it. This is the
default behavior. If you want any other type, then you need to specify explicitly
using the observe & responseType options.
4/6/2022 60
61. . Authentication:
• Authentication: The user login credentials are passed to an authenticate API (on the
server). On the server side validation of the credentials happens and a JSON Web Token
(JWT) is returned. JWT is a JSON object that has some information or attributes about
the current user. Once the JWT is given to the client, the client or the user will be
identified with that JWT.
• Authorization: After logging in successfully, the authenticated or genuine user does
not have access to everything. The user is not authorized to access someone else’s
data,he/she is authorized to access some data.
4/6/2022 61
62. . Lazy Loading
• Lazy loading (also called on-demand loading) is an optimisation technique for the online
content, be it a website or a web app.
• Instead of loading the entire web page and rendering it to the user in one go as in bulk
loading, the concept of lazy loading assists in loading only the required section and delays
the remaining, until it is needed by the user.
• By default, NgModules are eagerly loaded, which means that as soon as the app loads, so
do all the NgModules, whether or not they are immediately necessary. For large apps
with lots of routes, consider lazy loading—a design pattern that loads NgModules as
needed. Lazy loading helps keep initial bundle sizes smaller, which in turn helps decrease
load times.
• There are two main steps to setting up a lazy-loaded feature module
• Create the feature module with the CLI, using the --route flag.
• Configure the routes.
4/6/2022 62
63. . Lazy Loading
• Advantages of Lazy loading:
• On-demand loading reduces time consumption and memory usage thereby optimising
content delivery. As only a fraction of the web page, which is required, is loaded first
thus, the time taken is less and the loading of rest of the section is delayed which saves
storage. All of this enhances the user’s experience as the requested content is fed in no
time.
• Unnecessary code execution is avoided.
• Optimal usage of time and space resources makes it a cost-effective approach from the
point of view of business persons. (website owners)
• Disadvantages of Lazy loading
• Firstly, the extra lines of code, to be added to the existing ones, to implement lazy load
makes the code a bit complicated.
• Secondly, lazy loading may affect the website’s ranking on search engines sometimes, due
to improper indexing of the unloaded content.
•
4/6/2022
63
64. . Jamine
• Jasmine is a JavaScript testing framework that supports a software development
practice called Behaviour-Driven Development, or BDD for short. It’s a specific flavour
of Test-Driven Development (TDD).
• The describe(string, function) function defines what we call a Test Suite, a collection of
individual Test Specs.
• The it(string, function) function defines an individual Test Spec, this contains one or
more Test Expectations.
• The expect(actual) expression is what we call an Expectation. In conjunction with a
Matcher it describes an expected piece of behaviour in the application.
• The matcher(expected) expression is what we call a Matcher. It does a boolean
comparison with the expected value passed in vs. the actual value passed to the expect
function, if they are false the spec fails.
4/6/2022
64
66. . Setup and Teardown
• Before execution of test cases sometime we have to pre and post activities required to
running each or all test cases
• beforeAll - This function is called once, before all the specs in a test suite (describe
function) are run.
• afterAll -This function is called once after all the specs in a test suite are finished.
• beforeEach - This function is called before each test specification (it function) is run.
• afterEach -This function is called after each test specification is run.
4/6/2022
66
67. . KARMA
• Spectacular Test Runner for JavaScript. Karma is not a testing framework, nor an
assertion library. Karma just launches a HTTP server, and generates the test runner
HTML file you probably already know from your favourite testing framework. So for
testing purposes you can use pretty much anything you like.
• Jasmine can be classified as a tool in the "Javascript Testing Framework" category,
while Karma is grouped under "Browser Testing".
4/6/2022
67
68. 1.What is Angular Framework?
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 are declarative templates, dependency injection, end to end tooling,
and many more other features are used to ease the development.
2. What is TypeScript?
TypeScript is a typed superset of JavaScript created by Microsoft that adds
optional types, classes, async/await, and many other features, and compiles to
plain JavaScript. Angular is built entirely in TypeScript and used as a primary
language. You can install it globally as,
npm install -g typescript.
3. What is Angular Router?
Angular Router is a mechanism in which navigation happens from one view to the
next as users perform application tasks. It borrows the concepts or model of
browser's application navigation.
4/6/2022 68
INTERVIEW QUESTIONS
69. 4. What are Directives in Angular?
Directives are attributes that allow the user to write new HTML syntax specific to
their applications. They execute whenever the Angular compiler finds them in
the DOM. Angular supports three types of directives.
• Component Directives
• Structural Directives
• Attribute Directives
5.What are different types of compilation in Angular?
Angular offers two ways to compile your application,
– Just-in-Time (JIT)
– Ahead-of-Time (AOT).
4/6/2022 69
INTERVIEW QUESTIONS
70. 6. What is router outlet?
The RouterOutlet is a directive from the router library and it acts as a placeholder
that marks the spot in the template where the router should display the
components for that outlet. Router outlet is used like a component,
<router-outlet></router-outlet> <!-- Routed components go here -->
7.What are decorators in Angular?
Decorators are a design pattern or functions that define how Angular features
work. They are used to make prior modifications to a class, service, or filter.
Angular supports four types of decorators, they are:
• Class Decorators
• Property Decorators
• Method Decorators
• Parameter Decorators
4/6/2022 70
INTERVIEW QUESTIONS
71. 8.What is an AOT compilation? What are its advantages?
The Ahead-of-time (AOT) compiler converts the Angular HTML and TypeScript
code into JavaScript code during the build phase, i.e., before the browser
downloads and runs the code.
• Some of its advantages are as follows.
• Faster rendering
• Fewer asynchronous requests
• Smaller Angular framework download size
• Quick detection of template errors
• Better security
4/6/2022 71
INTERVIEW QUESTIONS
72. 9.Explain the lifecycle hooks in Angular
• In Angular, every component has a lifecycle. Angular creates and renders these
components and also destroys them before removing them from the DOM. This
is achieved with the help of lifecycle hooks. Here's the list of them -
• ngOnChanges() - Responds when Angular sets/resets data-bound input
properties.
• ngOnInit() - Initialize the directive/component after Angular first displays the
data-bound properties and sets the directive/component's input properties/
• ngDoCheck() - Detect and act upon changes that Angular can't or won't detect
on its own.
• ngAfterContentInit() - Responds after Angular projects external content into
the component's view.
• ngAfterContentChecked() - Respond after Angular checks the content projected
into the component.
4/6/2022 72
INTERVIEW QUESTIONS
73. • ngAfterViewInit() - Respond after Angular initializes the component's views and
child views.
• ngAfterViewChecked() - Respond after Angular checks the component's views
and child views.
• ngOnDestroy - Cleanup just before Angular destroys the directive/component.
10. What is Eager and Lazy loading?
• Eager loading is the default module-loading strategy. Feature modules under
Eager loading are loaded before the application starts. This is typically used for
small size applications.
• Lazy loading dynamically loads the feature modules when there's a demand. This
makes the application faster. It is used for bigger applications where all the
modules are not required at the start of the application.
4/6/2022 73
INTERVIEW QUESTIONS
74. 11. What is REST?
REST in Angular stands for Representational State Transfer. It is an API that
works on the request of HTTP. Here, the requested URL points to the data that
has to be processed, after which an HTTP function is used to identify the
respective operation that has to be performed on the data given. The APIs that
follow this method are referred to as RESTful APIs.
12. What is DOM?
The full form of DOM is Document Object Model, and it is responsible for
representing the content of a web page and changes in the architecture of an
application. Here, all the objects are organized in the form of a tree, and the
document can easily be modified, manipulated, and accessed only with the help of
APIs.
4/6/2022 74
INTERVIEW QUESTIONS
75. 13. What is Transpiling in Angular?
• Transpiling is the process of converting the typescript into javascript.
• Though typescript is used to write code in the Angular applications, the code is
internally transpiled into javascript.
• In separate typescript conversion
• > tsc Typescript_Filename.ts
14. Which of the Angular life cycle component execution happens when a data-
bound input value updates?
ngOnChanges is the life cycle hook that gets executed whenever a change happens
to the data that was bound to an input.
15. Differentiate between Components and Directives in Angular
• Components break up the application into smaller parts.whereas,
• Directives add behavior to an existing DOM element.
4/6/2022 75
INTERVIEW QUESTIONS
76. 16. What is the use of @Input and @Output? Transpiling is the process of
converting the typescript into javascript.
• When it comes to the communication of Angular Components, which are in
Parent-Child Relationship.
• we use @Input in Child Component and @Output is used in Child Component to
receive an event from Child to Parent Component.
17. Which of the Angular life cycle component execution happens when a data-
bound input value updates?
ngOnChanges is the life cycle hook that gets executed whenever a change happens
to the data that was bound to an input.
18. Differentiate between Components and Directives in Angular
• Components break up the application into smaller parts.whereas,
• Directives add behavior to an existing DOM element.
4/6/2022 76
INTERVIEW QUESTIONS
77. 19. What is ViewEncapsulation?.
• ViewEncapsulation decides whether the styles defined in a component can affect
the entire application or not. There are three ways to do this in Angular:
– Emulated : styles from other HTML spread to the component.
– Native : styles from other HTML do not spread to the component.
– None : styles defined in a component are visible to all components.
20. In how many ways the Data Binding can be done?
• Data Binding happens between the HTML (template) and typescript (component).
Data binding can be done in 3 ways:
(i) Property Binding
(ii) Event Binding
(iii) Two-Way Data Binding.
4/6/2022 77
INTERVIEW QUESTIONS
78. 21. What is the sequence of Angular Lifecycle Hooks?.
4/6/2022 78
INTERVIEW QUESTIONS
79. 22. What is the purpose of using package.json in the angular project?.
– With the existence of package.json, it will be easy to manage the dependencies
of the project.
– If we are using typescript in the angular project then we can mention the
typescript package and version of typescript in package.json.
23. How is SPA(Single Page Application technology different from the traditional
web technology?
In traditional web technology, the client requests for a web page (HTML/JSP/asp) and
the server sends the resource (or HTML page), and the client again requests for
another page and the server responds with another resource. The problem here is a
lot of time is consumed in the requesting/responding or due to a lot of reloading.
Whereas, in the SPA technology, we maintain only one page (index.HTML) even
though the URL keeps on changing.
4/6/2022 79
INTERVIEW QUESTIONS
80. 24. What are ngModel and how do we represent it?.
• ngModel is a directive which can be applied on a text field.
• This a two-way data binding. ngModel is represented by [()]
25. Differentiate between Observables and Promises?
• Observables are lazy, which means nothing happens until a subscription is
made. Whereas Promises are eager; which means as soon as a promise is
created, the execution takes place.
• Observable is a stream in which passing of zero or more events is possible and the
callback is called for each event. Whereas, promise handles a single event.
4/6/2022 80
INTERVIEW QUESTIONS
81. 26. What are angularjs and angular2?.
4/6/2022 81
INTERVIEW QUESTIONS
Factor Angular JS Angular 2
language Written in JavaScript. Written in TypeScript(a superset of Javascript).
Routing
$routeprovider.when() is used for routing
configuration. @RouteConfig{} is used for routing.
Architecture
Uses MVC architecture to build the
applications.
Uses MVVM architecture to build the
applications.
Mobile Support AngularJS does not support mobiles.
Angular 2 was developed specifically to cater
to the mobile users.
Complications
It is easier to learn. However, the application
starts to lag once the number of users at a
time gets higher than 200.
It is inefficient for creating small applications,
as setting up the Angular 2 development
environment is difficult.
Syntax Syntax is complicated to learn. Syntax is comparatively easier than AngularJS.
Plugin
Additional plugins are not required for
developement.
Angular 2 require additional plugins for
development