What to learn in Angular?

Angular has a lot of built-in stuff. This largely broadens the scope of things it can do without having to use too many additional libraries but at the same time, it brings a lot to be learned to get working with them.

This post is just a high-level overview of what all Angular offers in general and their short descriptions in very layman's terms.

Angular CLI

This is not something that is taught typically but hardly anyone uses Angular without using its CLI so it was worth mentioning. So, Angular CLI is just a tool to develop and manage Angular applications through commands. This is important because Angular projects have a lot of files in them and the folder structure can really be overwhelming if tried to be managed manually.

Components

Components are sort of the fundamental building blocks for an Angular application. As the name suggests, these are the individual pieces or sections that together form the UI.

Templates

Templates are the HTML part of the component.

  • Interpolation- Incorporating dynamic values in the HTML

  • Attribute, Class, and Style Bindings- Changing HTML elements attributes, classes, and styles dynamically.

  • Property Binding - Changing HTML elements properties dynamically

  • Event Binding - Triggering some logic on the occurrence of a user event

  • Two-way Binding - Simultaneous listening to events and updating values. This is sort of a combination of Property Binding and Event Binding

  • Template Variables- Using one part of a template at another place in the template.

Components LifeCycle

The different stages that a component can go through and the different functions that Angular exposes to leverage these stages.

Pipes

They are used for transforming the data while displaying. For example- to change the case of a text or to format a number as a percent, etc.

Directives

They enable additional behavior in the app. Mainly, there are two types of directives- Attribute Directives and Structural Directives. One can also make a custom directive as per one's need.

Services

Services work as a piece of code dedicated to handling logic that does not play a direct role in the displaying of data i.e. they usually don't contain view-related logic, unlike the components. Service can also be used for communication between different components.

Routing & Navigation

Navigating around different views based on interpreting the different URLs.

  • Absolute and Relative Routing
  • Programmatic navigation
  • Route Parameters, Query Parameters, and fragments
  • Passing data to a route
  • Child routes
  • Redirection and Wildcard routes
  • Route Guards

Angular Forms

Forms are designed using HTML but Angular does provide some powerful directives which make working with forms and their validations much easier. Two approaches can be used for designing Forms- Template driven approach and Reactive Approach.

  • Template Driven and Reactive approach
  • Form State and Validation
  • Useful directives in forms like ngModel, etc.
  • Two-way binding in forms

Observables

They play a major role in the asynchronous part of the app such as HTTP requests, etc. They can be subscribed to for getting data which usually comes with a time delay or at uncertain intervals of time.

  • Subscription
  • Completion & Errors
  • Possibility of memory leak and avoiding them
  • Subjects

HTTP Request and Response

Though it's not Angular specific, it's an integral part of any client-side scripting language or framework. Angular uses an HTTP client module for the purpose of sending requests and receiving responses.

  • Setting Headers
  • RxJS operators
  • Error handling
  • Interceptors
  • Response body type

Authentication

Though it's not Angular specific, it's an integral part of any client-side scripting language or framework. Angular uses an HTTP client module for the purpose of sending requests and receiving responses.

  • Sending Signup and Login requests
  • Handling errors
  • Verifying Logged in status
  • Getting and storing tokens
  • Attaching tokens with an outgoing HTTP request

Multiple Modules and Lazy Loading

The Angular app can be divided into several modules to make things clean and organized. Furthermore, the performance can be significantly enhanced using the lazy loading of those multiple modules. This is particularly very useful in big and complex projects.

Unit Testing

Angular CLI automatically downloads the Jasmine Test framework. The spec files are dedicated files to write the test cases.

Deployment

After the development is complete, building the project for production and deploying it to a server is a great learning experience in itself. It involves a lot of things which doesn't usually come in the way at the time of development such as Optimization, Ahead-Of-Time Compilation, Proper routing after deployment, etc.

Angular Universal

In the post-What is a Single Page Application? I did mention that one of the big limitations SPAs were facing was the SEO. The concept of Server-Side Rendering aims to solve that issue and Angular Universal is sort of an extension of Angular to just do that.

Comments

Post a Comment

Popular posts from this blog

What are Bootstrap breakpoints?

Image
  As I mentioned in the previous post  What is a Responsive Web page?  , breakpoints play a very important role in making a webpage responsive. So, let's now try to understand breakpoints and see them in action. X-Small: Portrait phones (less than 576 px) Small: Landscape phones (576 px and up) Medium: Tablets (768 px and up) Large: Desktops (992 px and up) Extra Large: Large Desktops (1200 px and up) Extra Extra Large: Larger Desktops (1400 px and up) By default, these are the categories into which all screen sizes are classified. Bootstrap provides different classes for these categories- sm , md , lg , xl , and xxl . These are called responsive classes. Let's say we use lg with some other Bootstrap class "A" what it would mean is that particular class "A" will get applied for all the screen sizes >= 992px. Also, suppose we want to apply the "A" class for the 'Large' category but a different class "B" for the 'Extra Large&
Read more

What is Bootstrap Grid System?

Image
 I don't want to go through every single detail of what Bootstrap Grid System can do because there is a lot and as I mentioned in the last part of  What is Bootstrap? Why use it?  the best way to know a tech in detail is to go through their documentation again and again. However, I do want to share some fundamentals to get a working knowledge of the Grid System. Bootstrap Grid System assumes 12 equal divisions of any screen. So, whatever device you have been using be it a mobile phone, tablet, laptop, or desktop. The total screen width has been split into 12 equal parts. Now, out of these 12 divisions, any number of divisions ranging from 1-12 can be applied to different HTML elements. The higher the number, the more width that particular element takes on the screen. Let's write this simple piece of code:- < div   class = "row mt-4 text-center" >      < div   class = "col-12 border bg-info py-4" >         12/12 or 100% of total width available &l
Read more

What is Bootstrap? Why use it?

Image
  Prerequisites- Basic HTML and CSS   Long story short- Bootstrap is a CSS framework. What's a framework? Now, this is something that most of us usually not have a clear understanding about. We often misunderstand 'language' with a 'framework'. However, there's a difference. Let's try to understand it through an example. Let's try to design a very simple login page with HTML and CSS. < form >      < div >          < label   for = "emailField" >             Email address </ label >          < input   type = "email"   id = "emailField" >      </ div >      < div >          < label   for = "passwordField" >             Password </ label >          < input   type = "password"   id = "passwordField" >      </ div >      < div >          < button   type = "submit" >             Login </ button >      </ d
Read more