Introduction to Angular & Video Agenda
Hey everyone, welcome back to another video on the Angular series. In this session, we're going to cover the topic of what is Angular.
I'm sure all of you use mobile and web applications, be it from social media to health care, e-commerce, and net banking. These apps are used by billions of people across the globe. Now, the main reason we use these apps is that they offer seamless user experience and interface. But how are they developed to provide such reliability? One of the frameworks that is widely used to build such robust apps is Angular. So let's dive into the session now.
So here is a list of topics that we're going to be covering. First up, we'll see why Angular was introduced, then what is Angular, features of Angular, Angular architecture, advantages and limitations of Angular, the learning curve of Angular, and finally we'll look at some of the companies that deploy Angular. So without further delay, let's begin.
Why Angular? The Role of JavaScript Frameworks
Why Angular? Now, JavaScript is the most commonly used client-side scripting language. It is written into HTML documents, enabling interactions with web pages in many unique ways. So as a relatively easy-to-learn language with almost pervasive support, it is exceptionally well suited to develop modern applications. But the question arises: is JavaScript ideal for developing single-page applications that require modularity, testability, and other features? Perhaps not.
However, we have a variety of frameworks and libraries designed to help us with such things with respect to front-end development. Angular and JavaScript together bring in structure and consistency to your web applications and also provide scalability and maintainability. Angular is specifically developed for single-page applications.
What is Angular & Single-Page Applications (SPAs)?
So now the question arises: what exactly is Angular? Angular is an open-source JavaScript framework written completely in TypeScript. Now, it was primarily aimed to develop single-page applications and is maintained by Google.
Angular as a framework provides a few advantages while also providing a standard structure for developers. It is designed for web, desktop, and mobile platforms. If you have a doubt here as to what exactly single-page applications are, let me help you with that. Now, these single-page applications are basically applications that get loaded just once. So the main page gets loaded onto your browser. So any further interactions does not lead to loading of subsequent pages. Anything that has to be done further is just an addition to the already loaded page. So these single-page applications are primarily developed using Angular.
Moving ahead, let's look at the features of Angular.
Feature 1: The Document Object Model (DOM)
We have four features that we're going to be discussing. We have the Document Object Model, TypeScript, data binding, and testing. Now let's look at them one by one.
Now, the Document Object Model treats an XML or an HTML document as a tree structure. Now here, every node in the tree structure defines an object representing a part of your document. Angular uses the regular DOM. Now let's suppose you've made 10 updates on a single HTML page. So every time you make a change, the corresponding DOM or the tree structure needs to be updated. Now, Angular updates the entire tree structure of HTML tags.
Feature 2: TypeScript Integration
Moving on to our next feature, we have TypeScript. Now, TypeScript defines a set of types to JavaScript, which helps you write JavaScript that is easier to understand. Now, all the TypeScript code compiles down to basic JavaScript that can run smoothly on any platform. Now, TypeScript is not mandatory for developing an Angular application, but it is highly recommended. The main reason it's highly recommended is that it offers better syntactic structure while making the codebase easier to understand and maintain. Now, TypeScript can be installed as an NPM package. Now, to do that you just have to run the command npm install -g typescript on your command prompt.
Feature 3: Two-Way Data Binding
Next up is data binding. Now, data binding is a process that allows you to manipulate web page elements using the web browser. It mainly employs dynamic HTML and does not require complex scripting or programming. It is used in web pages that include interactive components like calculators, tutorials, games, etc. Now, incremental display of a web page makes data binding extremely convenient when pages contain a large amount of data.
When it comes to Angular, it uses two-way data binding. So any changes made in the UI element is reflected in the corresponding model state. And conversely, any changes made in the model state are reflected onto the UI state. This allows the framework to connect the DOM to the model data via the controller.
Feature 4: Testing with Jasmine and Karma
The last feature we're discussing is testing. Angular uses Jasmine to run its various tests. The Jasmine framework allows various functionalities to write different kinds of test cases. Karma is a task runner for the tests that use a configuration file to set the startup reporters and testing framework. So with that, we've covered the features of Angular.
Understanding Angular's MVC Architecture
So let's go ahead and understand the architecture of Angular. Angular is a full-fledged MVC framework. It provides a strong opinion on how the application should be structured and offers bi-directional data flow and updates to the real DOM.
MVC, short for Model-View-Controller, is an architectural pattern that separates the application layer into model, view, and controller. The model here relates to all the data-related logic. View, on the other hand, is used for UI logic of the application. And Controller is the brain of the setup. Now, it is an interface between the model and view.
Core Advantages of Using Angular
Moving on, let's look at the advantages of Angular.
First up, we have custom components. Angular allows you to build your own components that can pack functionality along with rendering logic into reusable pieces.
Data binding, as discussed. Angular allows you to effortlessly move your data from your JavaScript code to the view and react to user events without having to write any code yourself.
Dependency injection. Angular allows you to write modular services and have them injected wherever they are needed. This greatly improves the testability and reusability of the same. Don't worry if you can't wrap your head around these topics; we're going to discuss them further in the coming videos.
Next advantage is testing. Angular has been built from the ground up with testability in mind. You can literally test every part of your application.
Comprehensive. Angular is a full-fledged framework and provides out-of-the-box solutions for server communication, routing, and more.
Lastly, we have excellent browser compatibility. Angular is cross-platform and browser compatible. An Angular application can typically run on all browsers, be it Chrome, Firefox, Safari, and platforms like Windows, Mac OS, and Linux.
A Brief History of Angular Versions
Now, many versions of Angular have been released ever since its inception. All of these versions have added to the efficient working of the framework. Now here are two different versions released. First up was Angular 1. It was built on JavaScript and completely based on controllers. Next release was Angular 2. Now this incorporated the component-based approach wherein the entire UI was divided into several components and lastly integrated to give the final logic.
Next was Angular 4. It included router updation. Angular CLI or command line interface 1.0 was introduced, however not deployed. In this release, the Angular CLI was optimized and commands like ng update and ng add were added. In the Angular 7 release, prompts were introduced which provided tips in CLI about the functions being used.
In Angular 8, Ivy renderer and Bazel were introduced. And finally, the most recent release was Angular 9. Now, this came with the better framework and Angular Material. Now this completely switched to the Ivy renderer as a default compiler.
Limitations and Disadvantages of Angular
Now that we've learned about the pros of using Angular, let's look at some of the limitations of Angular.
First up is a steep learning curve. Now since Angular is a complete full-fledged framework, it becomes difficult for learners to begin with. You need to be acquainted with simple topics and then move on to more advanced topics to become proficient in this language.
Next up is limited SEO options. Now, Angular offers limited SEO options and poor accessibility to search engine crawlers.
It's verbose and complex. Now, a common issue faced by the Angular community is the verbosity of the framework. It also poses to be complex compared to other front-end tools.
And lastly, migration. Now one of the drawbacks of Angular is poor migration. Now it becomes difficult to port legacy code to Angular style architecture. Also with each new release it is painful to upgrade and a lot of them are not backward compatible.
Navigating the Angular Learning Curve
Next up, let's look at the Angular learning curve. Now, if you wish to learn Angular, you need to be acquainted with basic topics in Angular. Some of them are directives, modules, decorators, components, services, dependency injection, pipes, and templates. Now once you've mastered your basics, you will want to go and understand more advanced topics such as change detection, zones, AOT compilation, and Rx.js.
However, the learning curve of Angular is clear-cut. In the beginning, it could be a little intimidating, but once you start using the tool, it becomes way more easier to comprehend and understand what is going on.
Who Uses Angular? & Final Thoughts
And lastly, let's look at some of the companies that use Angular today. Many top-tier companies like Nike, Forbes, Google, HBO, Sony, Upwork among others readily deploy Angular.
So with that, we conclude the session. I hope it was informative. If you have any doubts or questions, let us know in the comment section below. Thank you so much for being here and watch out for more videos on this series on Angular. Until then, keep learning and stay tuned to Simplilearn.
Hi there, if you like this video, subscribe to the Simplilearn YouTube channel, and click here to watch similar videos. To nerd up and get certified, click here.
