Angular: The most popular framework!

I recently attended a workshop hosted by Women Techmakers Nagpur on Angular by Nishu Goel . She is one of the GDE for Angular and is indeed doing a phenomenal job in the field of Angular. It was worth attending a workshop for newbies in web development like me. Icing on the cake was that we got an opportunity to do hands on practice on Angular while learning and this made the session more interesting and interactive. If you are an avid reader and want some reference about Angular then you must read a fantastic book called “Step by Step Angular Routing” by none other than Nishu Goel ma’am. I got to learn how Angular got evolved as the most popular web development frameworks, its features and the few basic building blocks to get started with. So, read on to learn about Angular!

Angular Tools and setups:

First of all, to get started with Angular, we need Code Editors or an environment that supports Angular. For this, type:

npm install -g @angular/cli

in your browser to install Angular CLI in your system. Once Angular CLI is installed you can use any IDE of your choice such as Visual Studio Code, Sublime text or WebStorm.

Also, there are many tools that engineers commonly use with Angular to get the full benefit of the framework.

So, some main tools are:

1.RxJS: It’s not likely that you’ll be able to work with Angular without RxJS, a reactive programming library, aimed at handling asynchronous data with multiple events. It basically allows engineers to set up multiple channels of data exchange to ease resource consumption.

2.Angular CLI: Command-line interface (CLI) is used to create projects, add files, perform updates, deal with debugging testing, and deployment.

What is Angular?

Angular is a structural framework for dynamic web applications. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application components clearly and succinctly. Its data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology.(Definition of AngularJS as put by its official documentation).

Till now, there have been many versions of Angular. The most recent one Angular 9 was introduced in February 2020.

How to get started with angular?

Now, let’s look at the architecture of an Angular application that relies on certain fundamental concepts of Angular.

They are as follows:

1.Component: Angular is a component-based framework. Components represent views, which are sets of screen elements that Angular can choose among and modify according to your program logic and data. Components is basically a class which is defined to be visible in any elements in the screen or browser. Every Angular application has at least one component, the root component that connects a component hierarchy with the page document object model (DOM). Components are typically used to create UI widgets

2.Data-binding: It is the automatic synchronization of data between model and view components. Angular supports two-way data binding, meaning that changes in the DOM, such as user choices, are also reflected in your program data.

3.Scope: These are objects that refer to the model. They act as a glue between controller and view.

4.Controller: These are JavaScript functions bound to a particular scope.

5.Services: AngularJS comes with several built-in services such as http to make a XMLHttpRequests. These are singleton objects which are instantiated only once in the app.

6.Filters: These select a subset of items from an array and return a new array.

7.Directives: Directives are markers on DOM (document object model) elements such as elements, attributes, CSS and more. These can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives such as ngBind, ngModel, etc.

8.Templates: These are the rendered views with information from the controller and model. These can be a single file (such as index.html) or multiple views in one page using partials

9.Routing: It is the concept of switching views. Routes are definitions(objects) composed from at least a path and a component (or a redirectTo path) attributes. The path refers to the part of the URL that determines a unique view. Angular Router NgModule provides a service that lets you define a navigation path among the different application states and view hierarchies in your app.

10.Pipes: Pipes are a useful feature in Angular. There are simple ways to transform values in an angular template There are some built in pipes, but you also build your own pipes. A pipe can take in values and then return values.

11.Modules: A module is a collection of components, directives, pipelines and services that are related in such a way that can be combined with other modules to create an application.

12.Model View Whatever (MVW): It is a design pattern for dividing an application into different parts called Model, View, and Controller, each with distinct responsibilities. AngularJS does not implement MVC in the traditional sense, but rather something closer to MVVM (Model-View-ViewModel). The Angular JS team refers to it humorously as Model View Whatever.

13.Deep Linking: Deep linking allows to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.

14.Dependency Injection: AngularJS has a built-in dependency injection subsystem that helps the developer to create, understand, and test the applications easily.It lets you keep your component classes lean and efficient. They don’t fetch data from the server, validate user input, or log directly to the console; they delegate such tasks to services.

Once you’re familiar with these fundamental building blocks and commands of Angular, you can explore them more in detail and can also build some of the interesting applications at beginner level.It is rightly said that the more you practice and build things the more knowledge gets acquired by you. So. There are some interesting projects that one can build using Angular at beginner level.

1.Budget Calculator App

2.Tic Tac Toe game

Some quick tips and facts about angular:

1.Angular is best utilized for completing advanced, large-scale projects under the direction of a seasoned developer.

2.Angular is a framework used for front-end development. This involves the client-side of the application and has little to do with the back end.

3.Angular is created for enterprise-scale applications.

4.Angular elements can be added to projects that were built using a different platform, such as React or Polymer.

5. Angular is supported by Google.

6.This program is not up to par with SEO best practices, so if your primary focus is search engine optimization, opt for a different platform.

7. Angular is a JavaScript framework—not a JS Library.

8.Angular ranked second in “most used technology” in the Stack Overflow Survey of 2018.

Do you know:

At first, Google developed Angular to use it internally for its websites and services. As Angular continued to evolve, developers began using it as a solution that helps visualize data in big data projects. Currently, many popular companies' websites are built with this framework.Some of them are mentioned below, take a look at it!

Advantages of Angular:

Angular is a very popular framework and comes with lots of merits and demerits. Let’s take a look at its merits.

1.It provides the capability to create Single Page Application in a very clean and maintainable way.

2.It provides data binding capability to HTML. Thus, it gives users a rich and responsive experience.

3.Angular code is unit testable.

4.Angular uses dependency injection and makes use of separation of concerns.

5.Angular provides reusable components.

6.With Angular, the developers can achieve more functionality with short code.

7.In Angular, views are pure HTML pages, and controllers written in JavaScript do the business processing.

Disadvantages of Angular:

We have seen the good things about Angular, but there is another side to the story as well. Let us talk about some of the downsides of using one of the most popular web development frameworks.

Not Secure: Being a JavaScript only framework, applications written in AngularJS are not safe. Server side authentication and authorization is must to keep an application secure.

Not degradable: If the user of your application disables JavaScript, then nothing would be visible, except the basic page.

Complexity: Angular is big and complicated. With multiple ways to do the same thing it is hard to tell which way is better for a particular task. Different developers’ coding styles and habits might complicate integration of different components into a whole solution.

Although there are many pros and cons accompanied with some amazing features of Angular but the feature that I love the most is that it offers the two-way binding between the view and the model and thus, we get rid of a lot of useless code to set up bindings and keeping the view and model in sync all the times.On the top of everything, AngularJS applications can run on all major browsers and smartphones, including Android and iOS based phones/tablet.