Skip to main content

What is AngularJS? An introduction to AngularJS.

What is AngularJS?


Angular is a structural framework for dynamic web applications, made in pure JavaScript.
What does it mean to be a structural framework?

The fact that Angular is a structural framework allows us to use HTML as a template language, and extend its syntax to express the components of the application in a cleaner and simpler way.

As an example, let’s see this case, where we obtain the value of an entry:

In JavaScript:-

HTML:<input id="”input-data”" type="”text”" />
Code: document.getElementById(“input-data”).value

In Angular:-

HTML : <input type="“text”" /> 
Code : $scope.inputData;

When should you use AngularJS?

While Angular has received a lot of attention, it’s still important to decide whether it makes sense to use it for your web application. As a result, it’s important to keep in mind the conditions of the application that we want to make.

It is convenient to use Angular when making an application that fits the following characteristics:

  • It is a large application
  • You need a good structure
  • You need robustness
  • It is complex

Structure:-

It uses MVC, where the model communicates with the database, and so the variables defined in the controller are modified and the view is updated.

What is a controller?

This is one of the tools that Angular provides in the defined context (scope) to work later.

When we define a controller, a new scope is created and can only access the variables we have chosen.

The driver is not used to:

  • Manipulate the DOM
  • Format the entries (forms are used for this purpose)
  • Filter an output (filters are used for this purpose)
  • Share code among components (services are used for this purpose)
  • Manage the life cycle of the components

AngularJS Features:-

Angular has the following key features which makes it one of the powerful frameworks in the market.

  1. MVC – The framework is built on the famous concept of MVC (Model-View-Controller). This is a design pattern used in all modern day web applications. This pattern is based on splitting the business logic layer, the data layer, and presentation layer into separate sections. The division into different sections is done so that each one could be managed more easily.

  2. Data Model Binding – You don't need to write special code to bind data to the HTML controls. This can be done by Angular by just adding a few snippets of code.

  3. Writing less code – When carrying out DOM manipulation a lot of JavaScript was required to be written to design any application. But with Angular, you will be amazed with the lesser amount of code you need to write for DOM manipulation.

  4. Unit Testing ready – The designers at Google not only developed Angular but also developed a testing framework called "Karma" which helps in designing unit tests for AngularJS applications.

    5. AngularJS Architecture:-

    Angular.js follows the MVC architecture, the diagram of the MVC framework as shown below. 

                                              Angularjs Architecture Diagram

    • The Controller represents the layer that has the business logic. User events trigger the functions which are stored inside your controller. The user events are part of the controller.

    • Views are used to represent the presentation layer which is provided to the end users

    • Models are used to represent your data. The data in your model can be as simple as just having primitive declarations. For example, if you are maintaining a student application, your data model could just have a student id and a name. Or it can also be complex by having a structured data model. If you are maintaining a car ownership application, you can have structures to define the vehicle itself in terms of its engine capacity, seating capacity, etc.

    AngularJS Advantages:-

    • Since it's an open source framework, you can expect the number of errors or issues to be minimal.

    • Two-way binding – Angular.js keeps the data and presentation layer in sync. Now you don't need to write additional JavaScript code to keep the data in your HTML code and your data later in sync. Angular.js will automatically do this for you. You just need to specify which control is bound to which part of your model.

    • Routing – Angular can take care of routing which means moving from one view to another. This is the key fundamental of single page applications; wherein you can move to different functionalities in your web application based on user interaction but still stay on the same page.

    • Angular supports testing, both Unit Testing, and Integration Testing.

    • It extends HTML by providing its own elements called directives. At a high level, directives are markers on a DOM element (such as an attribute, element name, and comment or CSS class) that tell AngularJS's HTML compiler to attach a specified behavior to that DOM element. These directives help in extending the functionality of existing HTML elements to give more power to your web application.

    What is a module?

    A module is a container for controllers, services, filters, directives. It gives structure to your application, since it represents different parts of it.

    A module can be used again and, in any order, since they can slow down the execution time. It is also excellent for unit tests because you have to refer to a single module.

    What is the view?

    It is what the user sees, it shows the functionality of our application.

    What is a directive?

    A directive transforms the DOM elements to add functionality. Angular has its own directives from the beginning.

    What is a service?

    It is a solution for communication to the database and the exchange of information among the different components of the application.

    They are singleton, which means that instances are created only when necessary. When the URL changes in the browser, all the controllers associated with that URL disappear, but not a service, so the data remains.


Location: Mumbai, Maharashtra 400051, India

Comments

Post a Comment

Popular posts from this blog

What is Nmap & How to Use Nmap Commands.

  Nmap is one of the most commonly used tools by   ethical hackers . Its ease of use and clean installation along with powerful scanning options, adds to its popularity. This nmap tutorial gives you a comprehensive understanding of the tool and teaches you how to perform advanced scans by yourself. Below is the list of topics that I’ll be covering through the course of this nmap tutorial.  What is Nmap? Nmap Scan Types Nmap Command List What is Nmap? Nmap , short for Network Mapper, is a network discovery and security auditing tool. It is known for its simple and easy to remember flags that provide powerful scanning options. Nmap is widely used by network administrators to scan for: Open ports and services Discover services along with their versions Guess the operating system running on a target machine Get accurate packet routes till the target machine Monitoring hosts Nmap  is a free and open source utility for network discovery and security auditing. Man...
Post a Comment
Read more

What is Cross-Site Scripting.

What is Cross-Site Scripting Attack :- Cross-site scripting, or XSS, involve a website including unintended Javascript code which is subsequently passes on to users who then execute that code via their browsers. A harmless example of this is :- alert(‘XSS’) Cross-Site Scripting (XSS) attacks are a type of injection, in which malicious scripts are injected into otherwise benign and trusted websites. XSS attacks occur when an attacker uses a web application to send malicious code, generally in the form of a browser side script, to a different end user. Flaws that allow these attacks to succeed are quite widespread and occur anywhere a web application uses input from a user within the output it generates without validating or encoding it. An attacker can use XSS to send a malicious script to an unsuspecting user. The end user’s browser has no way to know that the script should not be trusted, and will execute the script. Because it thinks the script came from a trusted source, ...
Post a Comment
Read more

Difference Between a Penetration Test and Vulnerability Assessment - Part 2

  The Difference Between a Penetration Test and Vulnerability Assessment - Part 2 What is the Difference Between a Penetration Test and Vulnerability Assessment? Part 2 of 2 Comparing Penetration Tests and Vulnerability Assessments In part 1 of this post, we focused on the Vulnerability Scans, Vulnerability Assessments, and  Vulnerability Management  in order to differentiate the 3 prior to digging into Penetration Tests. Now, let’s introduce and define Penetration Tests, explain the test itself and goals, then go through the different types of Penetration Tests. What is a Penetration Test? A  Penetration test , or pen test, is the process an ethical hacker conducts on a target and the IT environment to uncover vulnerabilities by exploiting them. The goal is to gain unauthorized access through exploitation which can be used to emulate the intent of a malicious hacker. Penetration test reports may also assess potential impacts on the organization and suggest counterme...
Post a Comment
Read more