In the SPA technology, only a single page, which is index.HTML, is maintained although the URL keeps on changing. Unlike traditional web technology, SPA technology is faster and easy to develop as well.
In conventional web technology, as soon as a client requests a webpage, the server sends the resource. However, when again the client requests for another page, the server responds again with sending the requested resource. The problem with this technology is that it requires a lot of time.
Posted Date:- 2021-09-09 06:00:40
Here are some of the new aspects introduced in Angular 6:
1. Angular Elements – It allows converting Angular components into web components and embeds the same in some non-Angular application
2. Tree Shakeable Provider – Angular 6 introduces a new way of registering a provider directly inside the @Injectable() decorator. It is achieved by using the providedIn attribute
3. RxJS 6 – Angular 6 makes use of RxJS 6 internally
4. i18n (internationalization) – Without having to build the application once per locale, any Angular application can have “runtime i18nâ€
Posted Date:- 2021-09-09 05:59:52
The process of monitoring the watchlist in order to track changes in the value of the watch variable is termed the digest cycle in Angular. The previous and present versions of the scope model values are compared in each digest cycle.
Although the digest cycle process gets triggered implicitly, it is possible to start it manually by using the $apply() function.
Posted Date:- 2021-09-09 05:58:15
Although both Angular expressions and JavaScript expressions can contain literals, operators, and variables, there are some notable dissimilarities between the two. Important differences between Angular expressions and JavaScript expressions are enlisted below:
<> Angular expressions support filters while JavaScript expressions do not
<> It is possible to write Angular expressions inside the HTML tags. JavaScript expressions, contrarily, can’t be written inside the HTML tags
<> While JavaScript expressions support conditionals, exceptions, and loops, Angular expressions don’t
Posted Date:- 2021-09-09 05:57:05
Written with HTML, templates in Angular contains Angular-specific attributes and elements. Combined with information coming from the controller and model, templates are then further rendered to cater the user with the dynamic view.
Posted Date:- 2021-09-09 05:55:34
Directives. The image represents the types of directives in Angular; Attribute, structural, and custom.
Posted Date:- 2021-09-09 05:54:54
The response body doesn't may not return full response data because sometimes servers also return special headers or status code which which are important for the application workflow. Inorder to get full response, you should use observe option from HttpClient,
getUserResponse(): Observable<HttpResponse<User>> {
return this.http.get<User>(
this.userUrl, { observe: 'response' });
}
Now HttpClient.get() method returns an Observable of typed HttpResponse rather than just the JSON data.
Posted Date:- 2021-09-09 05:54:16
HttpInterceptors are part of the @angular/common/http module and are used to inspect and transform HTTP requests and HTTP responses as well. These interceptors are created to perform checks on a request, manipulate the response, and perform cross-cutting concerns, such as logging requests, authenticating a user using a request, using gzip to compress the response, etc.
Posted Date:- 2021-09-09 05:53:29
Angular interpolation happens when in our template we type some JavaScript expression inside double curly braces ‘{{ someExpression() }}’. This is used to add dynamic content to a web page. However, we can do the same by assigning some dynamic content to the innerHTML property of a DOM element. The difference between the two is that, in Angular, the compiler always escapes the interpolated content, i.e., HTML is not interpreted, and the browser displays the code as it is with brackets and symbols, rather than displaying the output of the interpreted HTML. However, in innerHTML, if the content is HTML, then it is interpreted as the HTML code.
Posted Date:- 2021-09-09 05:52:50
In a normal Angular application, the browser executes our application, and JavaScript handles all the user interactions. However, because of this, sometimes, if we have a large application with a big bundle size, our page’s load speed is slowed down quite a bit as it needs to download all the files, parse JavaScript, and then execute it. To overcome this slowness, we can use server-side rendering, which allows us to send a fully rendered page from the server that the browser can display and then let the JavaScript code take over any subsequent interactions from the user.
Posted Date:- 2021-09-09 05:51:35
Angular expressions and JavaScript expressions are quite different from each other as, in Angular, we are allowed to write JavaScript in HTML, which we cannot do in plain JavaScript. Also, all expressions in Angular are scoped locally. But, in JavaScript, these expressions are scoped against the global window object. These differences, however, are reconciled when the Angular compiler takes the Angular code we have written and converts it into plain JavaScript, which can then be understood and used by a web browser.
Posted Date:- 2021-09-09 05:50:54
AngularJS is the previous version of Angular, which is a complete rewrite, i.e., there are several differences between the two that we can highlight.
<> Architecture: AngularJS supports the MVC architecture in which the model contains the business logic; the view shows the information fetched from the models, and the controller manages interactions between the view and the model by fetching data from the model and passing it to the view. On the other hand, in Angular, we have a component-based architecture where instead of having separate pieces for logic, presentation, etc., we now have a single self-contained piece of the user interface that can be used in isolation or included in a big project.
<> Language: In AngularJS, we could only use JavaScript. However, in Angular, we can use both TypeScript and JavaScript.
<> Mobile support: In AngularJS, we do not get mobile browser support out of the box, but in Angular, we do get mobile support for all popular mobile browsers.
Posted Date:- 2021-09-09 05:50:16
In Angular, the common module that is available in the package @angualr/common is a module that encapsulates all the commonly needed features of Angular, such as services, pipes, directives, etc. It contains some sub-modules as well such as the HttpClientModule, which is available in the @angular/common/http package. Because of the modular nature of Angular, its functionalities are stored in small self-contained modules, which can be imported and included in our projects if we need these functionalities.
Posted Date:- 2021-09-09 05:48:55
In Angular, when we are using the HttpClient module to communicate with a backend service and fetch some data, after fetching the data, we can broadcast it to multiple subscribers, all in one execution. This task of responding with data to multiple subscribers is called multicasting. It is specifically useful when we have multiple parts of our applications waiting for some data. To use multicasting, we need to use an RxJS subject. As observables are unicast, they do not allow multiple subscribers. However, subjects do allow multiple subscribers and are multicast.
Posted Date:- 2021-09-09 05:46:15
A scope is an object in Angular referring to the application model. It is a context for executing expressions. These scopes are organized in a hierarchical form that is similar to the application’s DOM structure. A scope helps in propagating various events and watching expressions.
Posted Date:- 2021-09-09 05:45:42
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.
Posted Date:- 2021-09-09 05:44:51
Digest cycle in Angular is the process in which the watchlist is monitored to track changes in the watch variable value. In each digest cycle, there is a comparison between the present and the previous versions of the scope model values.
Posted Date:- 2021-09-09 05:44:17
The login details of a user are given to an authenticate API available on the server. Once the credentials are validated by the server, it returns a JSON web token (JWT), which includes attributes and the data of the current user. Further, the user is easily identified using JWT, and this process is known as authentication.
After logging in, users have various types and levels of access—some can access everything, while others may have restrictions from some resources. Authorization determines the access level of these users.
Posted Date:- 2021-09-09 05:42:48
No, the AOT collector understands a subset of (or limited) JavaScript features. If an expression uses unsupported syntax, the collector writes an error node to the .metadata.json file. Later point of time, the compiler reports an error if it needs that piece of metadata to generate the application code.
Posted Date:- 2021-09-09 05:41:59
Angular bootstrapping, in simple words, allows professionals to initialize or start the Angular application. Angular supports both manual and automatic bootstrapping. Let’s briefly understand the two.
<> Manual bootstrapping: It gives more control to professionals with regards to how and when they need to initialize the Angular app. It is extremely useful in places where professionals wish to perform other tasks and operations before the Angular compiles the page.
<> Automatic bootstrapping: Automatic bootstrapping can be used to add the ng-app directive to the application’s root, often on the tag if professionals need Angular to automatically bootstrap the application. Angular loads the associated module once it finds the ng-app directive and, further, compiles the DOM.
Posted Date:- 2021-09-09 05:41:23
The metadata.json file can be treated as a diagram of the overall structure of a decorator’s metadata, represented as an abstract syntax tree(AST). During the analysis phase, the AOT collector scan the metadata recorded in the Angular decorators and outputs metadata information in .metadata.json files, one per .d.ts file.
Posted Date:- 2021-09-09 05:40:37
Angular Universal is a server-side rendering module for Angular applications in various scenarios. This is a community driven project and available under @angular/platform-server package. Recently Angular Universal is integrated with Angular CLI.
Posted Date:- 2021-09-09 05:39:16
RouterLinkActive is a directive that toggles css classes for active RouterLink bindings based on the current RouterState. i.e, the Router will add CSS classes when this link is active and and remove when the link is inactive. For example, you can add them to RouterLinks as below
<h1>Angular Router</h1>
<nav>
<a routerLink="/todosList" routerLinkActive="active">List of todos</a>
<a routerLink="/completed" routerLinkActive="active">Completed todos</a>
</nav>
<router-outlet></router-outlet>
Posted Date:- 2021-09-09 05:36:14
Most of the Front-end applications communicate with backend services over HTTP protocol using either XMLHttpRequest interface or the fetch() API. Angular provides a simplified client HTTP API known as HttpClient which is based on top of XMLHttpRequest interface. This client is avaialble from @angular/common/http package. You can import in your root module as below,
import { HttpClientModule } from '@angular/common/http';
The major advantages of HttpClient can be listed as below,
1. Contains testability features
2. Provides typed request and response objects
3. Intercept request and response
4. Supports Observalbe APIs
5. Supports streamlined error handling
Posted Date:- 2021-09-09 05:34:47
The Angular Router which represents a particular component view for a given URL is not part of Angular Core. It is available in library named @angular/router to import required router components. For example, we import them in app module as below,
Posted Date:- 2021-09-09 05:33:24
RxJS is a library, and the term stands for Reactive Extensions for JavaScript. It is used so that we can use observables in our JavaScript project, which enables us to perform reactive programming. RxJS is used in many popular frameworks such as Angular because it allows us to compose our asynchronous operations or callback-based code into a series of operations performed on a stream of data that emits values from a publisher to a subscriber. Other languages such as Java, Python, etc. also have libraries that allow them to write reactive code using observables.
Posted Date:- 2021-09-09 05:32:16
If the request fails on the server or failed to reach the server due to network issues then HttpClient will return an error object instead of a successful reponse. In this case, you need to handle in the component by passing error object as a second callback to subscribe() method. Let’s see how it can be handled in the component with an example,
fetchUser() {
this.userService.getProfile()
.subscribe(
(data: User) => this.userProfile = { ...data }, // success path
error => this.error = error // error path
);
}
It is always a good idea to give the user some meaningful feedback instead of displaying the raw error object returned from HttpClient.
Posted Date:- 2021-09-09 05:31:53
Angular Material is a UI component library that allows professionals to develop consistent, attractive, and completely functional websites, web pages, and web applications. It becomes capable of doing so by following modern principles of web designing, such as graceful degradation and browser probability.
Posted Date:- 2021-09-09 05:30:42
A pure pipe is only called when Angular detects a change in the value or the parameters passed to a pipe. For example, any changes to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object). An impure pipe is called for every change detection cycle no matter whether the value or parameters changes. i.e, An impure pipe is called often, as often as every keystroke or mouse-move.
Posted Date:- 2021-09-09 05:29:08
You can use the Angular CLI for this. The following set of commands generates a new library skeleton –
ng new my-workspace --create-application=false cd my-workspace
ng generate library my-lib
Posted Date:- 2021-09-09 05:28:28
The components, framework and CLI used by Angular applications are packaged as npm packages. Npm packages can be downloaded using the npm CLI client.
Posted Date:- 2021-09-09 05:28:00
Angular library is a set of generic solutions that other developers have put together to be re-used. We can create own library using Angular. These libraries can be published and shared as npm packages. A library should be imported in the app.
Posted Date:- 2021-09-09 05:27:32
With JIT, the compilation happens during run-time in the browser. It is the default way used by Angular. The commands used for JIT compilation are –
ng build ng serve
In AOT compilation, the compiler compiles the code during the build itself. The CLI command for aot compilation is -
ng build --aot ng server –aot
AOT is more suitable for the production environment whereas JIT is much suited for local development.
Posted Date:- 2021-09-09 05:25:56
Two types of compilations – AOT (Ahead-of-Time) and JIT (Just-in-Time).
Posted Date:- 2021-09-09 05:25:23
In a single page application (SPA), only the home page (index.html) is maintained throughout even though the URL keeps on changing. It is faster and easier to implement when compared with traditional web technology. In traditional technology, every time a user makes a request, the request is passed on to the server. This takes more time.
Posted Date:- 2021-09-09 05:24:55
The root module that you bootstrap to launch the application is called as a bootstrapping module. Every Angular application has a bootstrapping module. It is also called as the AppModule. The bootstrapping module is mentioned in the AppModule class.
@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Posted Date:- 2021-09-09 05:24:27
Various differences between Angular and AngularJS are stated as follows:
<> Architecture - AngularJS supports the MVC design model. Angular relies on components and directives instead
<> Dependency Injection (DI) - Angular supports a hierarchical Dependency Injection with unidirectional tree-based change detection. AngularJS doesn’t support DI
<> Expression Syntax - In AngularJS, a specific ng directive is required for the image or property and an event. Angular, on the other hand, use () and [] for blinding an event and accomplishing property binding, respectively
<> Mobile Support - AngularJS doesn’t have mobile support while Angular does have
<> Recommended Language - While JavaScript is the recommended language for AngularJS, TypeScript is the recommended language for Angular
<> Routing - For routing, AngularJS uses $routeprovider.when() whereas Angular uses @RouteConfig{(…)}
<> Speed - The development effort and time are reduced significantly thanks to support for two-way data binding in AngularJS. Nonetheless, Angular is faster thanks to upgraded features
<> Structure - With a simplified structure, Angular makes the development and maintenance of large applications easier. Comparatively, AngularJS has a less manageable structure
<> Support - No official support or updates are available for the AngularJS. On the contrary, Angular has active support with updates rolling out every now and then
Posted Date:- 2021-09-09 05:23:48
As soon as a promise is made, the execution takes place. However, this is not the case with observables because they are lazy. This means that nothing happens until a subscription is made. While promises handle a single event, observable is a stream that allows passing of more than one event. A callback is made for each event in an observable.
Posted Date:- 2021-09-09 05:22:15
ng generate class Dummy [options]
This will generate a class named Dummy.
Posted Date:- 2021-09-09 05:21:42
The double curly braces represent interpolation. It is a special syntax. Angular converts it into property binding. You can think of it as an alternate for property binding. The name of the component is written inside the inner curly braces. During execution, the name is replaced by the actual string value of the property. For example,
<h2> {{apptitle}} <img src="{{imgname}}" style="height:30px"> </h2>
Angular will evaluate and replace apptitle and imgname with their actual values.
Posted Date:- 2021-09-09 05:11:34
Angular organizes the $scope objects into a hierarchy that is typically used by views. This is known as the scope hierarchy in Angular. It has a root scope that can further contain one or several scopes called child scopes.
In a scope hierarchy, each view has its own $scope. Hence, the variables set by a view’s view controller will remain hidden to other view controllers. Following is a typical representation of a Scope Hierarchy:
Root $scope
$scope for Controller 1
$scope for Controller 2
…
..
.
$scope for Controller n
Posted Date:- 2021-09-09 05:10:53
The user login credentials are passed to an authenticate API, which is present on the server. Post server-side validation of the credentials, a JWT (JSON Web Token) is returned. The JWT has information or attributes regarding the current user. The user is then identified with the given JWT. This is called authentication.
Post logging-in successfully, different users have a different level of access. While some may access everything, access for others might be restricted to only some resources. The level of access is authorization.
Posted Date:- 2021-09-09 05:10:18
Also referred to as moustache syntax, string interpolation in Angular refers to a special type of syntax that makes use of template expressions in order to display the component data. These template expressions are enclosed within double curly braces i.e. {{ }}.
The JavaScript expressions that are to be executed by Angular are added within the curly braces and the corresponding output is embedded into the HTML code. Typically, these expressions are updated and registered like watches as a part of the digest cycle.
Posted Date:- 2021-09-09 05:09:50
Unlike the previous versions of Angular, the 7th major release comes with splitting in @angular/core. This is done in order to reduce the size of the same. Typically, not each and every module is required by an Angular developer. Therefore, in Angular 7 each split of the @angular/core will have no more than 418 modules.
Also, Angular 7 brings drag-and-drop and virtual scrolling into play. The latter enables loading as well as unloading elements from the DOM. For virtual scrolling, the latest version of Angular comes with the package. Furthermore, Angular 7 comes with a new and enhanced version of the ng-compiler.
Posted Date:- 2021-09-09 05:09:14
Binding types can be grouped into three categories distinguished by the direction of data flow. They are listed as below,
1. From the source-to-view
2. From view-to-source
3. View-to-source-to-view
Posted Date:- 2021-09-09 05:08:52
A template expression produces a value similar to any Javascript expression. Angular executes the expression and assigns it to a property of a binding target; the target might be an HTML element, a component, or a directive. In the property binding, a template expression appears in quotes to the right of the = symbol as in [property]="expression". In interpolation syntax, the template expression is surrounded by double curly braces. For example, in the below interpolation, the template expression is {{username}},
<h3>{{username}}, welcome to Angular</h3>
The below javascript expressions are prohibited in template expression
1. assignments (=, +=, -=, ...)
2. new
3. chaining expressions with ; or ,
4. increment and decrement operators (++ and --)
Posted Date:- 2021-09-09 05:08:14
Angular recognizes the value as unsafe and automatically sanitizes it, which removes the script tag but keeps safe content such as the text content of the script tag. This way it eliminates the risk of script injection attacks. If you still use it then it will be ignored and a warning appears in the browser console.
Let's take an example of innerHtml property binding which causes XSS vulnerability,
export class InnerHtmlBindingComponent {
// For example, a user/attacker-controlled value from a URL.
htmlSnippet = 'Template <script>alert("0wned")</script> <b>Syntax</b>';
}
Posted Date:- 2021-09-09 05:07:35
Two-way data binding is done in Angular to ensure that the data model is automatically synchronized in the view. For example, when a user updates some data in a model and that model is being displayed in multiple places in a component, that update should be reflected in all the places.
Two-way data binding has been supported in Angular for a long time. Although, it is something that should be used with careful consideration as it could lead to poor application performance or performance degradation as time goes on. It is called two-way data binding because we can change some data that is in the component model from the view that is HTML, and that change can also propagate to all other places in the view where it is displayed.
Posted Date:- 2021-09-09 05:07:00
When building an Angular app, there will be times when we need to execute some code at some specific event—such as when a component is initialized or displayed on the screen or when the component is being removed from the screen. This is what lifecycle hooks are used for. For example, if we have some event listener attached to an HTML element in a component, such as a button click or form submission, we can remove that event listener before removing the component from the screen, just like we can fetch some data and display it on the screen in a component after the component is loaded on the screen. To use a lifecycle hook, we can override some methods on a component, such as ngOnInit or ngAfterViewInit. These methods, if available on a component, will be called by Angular automatically. This is why these are called lifecycle hooks.
Posted Date:- 2021-09-09 05:05:22
You can store your component's template in one of two places. You can define it inline using the template property, or you can define the template in a separate HTML file and link to it in the component metadata using the @Component decorator's templateUrl property.
The choice between inline and separate HTML is a matter of taste, circumstances, and organization policy. But normally we use inline template for small portion of code and external template file for bigger views. By default, the Angular CLI generates components with a template file. But you can override that with the below command,
ng generate component hero -it
Posted Date:- 2021-09-09 05:04:50