Angular is an open-source front-end web framework that provides a platform for easy development of web-based single page applications (SPAs) and empowers developers in curating cross-platform applications. It integrates features like declarative templates, dependency injection and various other best practices that smoothens the development path.
What are the advantages of using Angular?
It supports two-way data-binding
It follows MVC pattern architecture
It supports static template and Angular template
You can add a custom directive
It also supports RESTful services
Validations are supported
Client and server communication is facilitated
Support for dependency injection
Has features like Event Handlers, Animation, etc.
Are there any disadvantages?
Complex SPAs can be inconvenient and laggy to use due to their size
Dynamic applications do not always perform well
Learning Angular requires a decent effort and time
What are components in Angular?
Components are like the basic building block in an Angular application. Components are defined using the @component decorator. A component has a selector, template, style and other properties, using which it specifies the metadata required to process the component.
What is data binding?
In Angular, data binding is one of the most powerful and important features that allow you to define the communication between the component and DOM(Document Object Model). It basically simplifies the process of defining interactive applications without having to worry about pushing and pulling data between your view or template and component. In Angular, there are four forms of data binding:
String Interpolation
Property Binding
Event Binding
Two-Way Data Binding
What is string interpolation in Angular?
String interpolation in Angular is a special syntax that uses template expressions within double curly {{ }} braces for displaying the component data. It is also known as moustache syntax. The JavaScript expressions are included within the curly braces to be executed by Angular and the relative output is then embedded into the HTML code. These expressions are usually updated and registered like watches, as a part of the digest cycle.
What are expressions?
Angular expressions are code snippets that are usually placed in binding such as {{ expression }} similar to JavaScript. These expressions are used to bind application data to HTML
Syntax: {{ expression }}
What are directives?
A core feature of Angular, directives are attributes that allow you to write new HTML syntax, specific to your application. They are essentially functions that execute when the Angular compiler finds them in the DOM. The Angular directives are segregated into 3 parts:
Component Directives
Structural Directives
Attribute Directives
On which types of the component can we create a custom directive?
Angular provides support to create custom directives for the following:
Element directives − Directive activates when a matching element is encountered.
Attribute − Directive activates when a matching attribute is encountered.
CSS − Directive activates when a matching CSS style is encountered.
Comment − Directive activates when a matching comment is encountered
What are pipes?
Pipes in Angular can take in data, run some logic and transform it to produce a new output. Pipes are essentially the same idea as a filter; it changes data in a reusable way without having to modify data for solely an appearance-based purpose.
What is the difference between annotations and decorators in Angular?
In Angular, annotations are used for creating an annotation array. They are only metadata set of the class using the Reflect Metadata library.
Decorators in Angular are design patterns used for separating decoration or modification of some class without changing the original source code
What is the HttpClient?
The HttpClient in @angular/common/http offers a simplified client HTTP API for Angular applications that rests on the XMLHttpRequest interface exposed by browsers. Additional benefits of HttpClient include testability features, typed request and response objects, request and response interception, Observable apis, and streamlined error handling.
What is routing?
An Angular router is responsible for interpreting a browser URL as an instruction to navigate to a client-generated view. The router is bound to links on a page to tell Angular to navigate the application view when a user clicks on it
What is the command used to launch an Angular application?
ng serve is the Angular CLI command used to launch an Angular application.
What are lifecycle hooks for components and directives?
An Angular component has a discrete life-cycle which contains different phases as it transits through birth till death. In order to gain better control of these phases, we can hook into them using the following:
constructor: It is invoked when a component or directive is created by calling new on the class.
ngOnChanges: It is invoked whenever there is a change or update in any of the input properties of the component.
ngOnInit: It is invoked every time a given component is initialized. This hook is only once called in its lifetime after the first ngOnChanges.
ngDoCheck: It is invoked whenever the change detector of the given component is called. This allows you to implement your own change detection algorithm for the provided component.
What is the scope in Angular?
Scope in Angular is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in a hierarchical structure which mimics the DOM structure of the application. Scopes can watch expressions and propagate events.
What do controllers do?
Controllers are JavaScript functions which provide data and logic to HTML UI. As the name suggests, they control how data flows from the server to HTML UI.
How do you connect Angular to Spring?
Create your Spring Boot project and add the spring-boot-starter-web dependency to your pom.xml file.
(optional) Set up a Rest Controller and run the program to test that the project is working as expected to this point.
Create a folder titled ‘frontend’ in your src/main/resources file path.
Run the command ng new angular app to create a new Angular project within your Spring Boot project.
Edit the angular.json file and change the outputPath value to src/main/public/ resources to generate the build files there
Insert a plugin into the pom.xml file to inform Maven that the Angular project should be compiled before the Spring Boot project.
Package your project with the command mvn package in your root directory.
Run your program with the command java -jar target/name-of-jar.jar
How do you consume your REST API in Angular?
Create the AngularJS controller Module
use AngularJS’s component $http.get() and pass it the REST API you want it to consume.
Use another AngularJS component $scope to set a model object that will be bound to the application page’s DOM
Create the Application Page; an HTML file.
Include script tags forThe AngularJS library from a CDN
The controller’s file from the application’s path
Add custom attributes to your HTML namely…
ng-app can be used on the tag to indicate that the page is an AngularJS application
ng-controller can be used on the tag to indicate that it should reference the the controller module
Run the Client
Use the Spring Boot CLI to create a .groovy file to reference the Spring Boot app you want to run and use ‘spring run’ followed by your groovy file name to run it.
Rebecca Hull's Wordpress 