Introduction to AngularJS

Angular is a set of Javascript Framework, often used to build Single Page Application (SPA) projects. It works based on extended HTML attributes (these attributes comply with Angular's rules). This is a completely free and open source framework used by thousands of programmers around the world in the past years, however, this framework has now been acquired by google and changed. structures, features, but still used and maintained in old projects in the period from 2010 – 2016. angularJS homepage: https://angularjs.org/

Basic knowledge to grasp to approach AngularJS

To learn Angular, you need to have at least a basic knowledge of HTML and javascript. In addition, because Angular nature works as Single Page, using API form to get data, so in order to do deeply with angular, it is necessary to equip more knowledge about XMLHttpRequest (javascript) , Ajax (Jquery) to approach when accessing. easier.

Features of AngularJS

• AngularJS is a Javascript-based framework for creating rich web applications
• AngularJS is often used for frontend development (client interface) through APIs to get data from the server and use the data to present html AngularJS source code conforms to MVC (Model – View – Controller) structure.
• Provides Data-binding mechanism to reduce software development time
• Angular is open source, completely free and developed by thousands of programmers around the world.
• In short, it can be understood that working with AngularJS is like working with Ajax, using the bind data mechanism, operating according to the MVC model, and using a service to interact with data from the server.

Describe the concept of MVC pattern in programming

Model: is the concept of the application's data, easier to understand than we want to work with the data of an employee (including: name, age, grades, class name). This data will be called the model concept in the MVC structure and the programmer uses it to work instead of normal calls. In angluarJS, Model is represented as JSON (Javascript Object Notation) data type, this data type is a data format type with a built-in structure, and is frequently used to communicate data between client and Server, programming languages always have builtin functions (available) to parse and work with variables with data type JSON.

View: is the interface concept of the application, easier to understand than what the user sees and interacts with (on the browser), the user will not know what is behind the model, the controller of the application is using. And of course, views understand the model, and will use the data not in the model to display it for user interaction.

Controller: This is the place to handle the logic, in between to communicate with the View and the Model, the controller contains the logic to work with the data represented through the Model, and gives it to the view for the view to understand and display to the user. . In Angular, the controller's flow is to call the service to communicate with the server through the API, get the data (model) and return the view to display to the user.

AngularJS Core Features & Concepts

Data-binding : (data binding) automatically synchronizes data between model and view
Scope: (Scope) These are connection objects between Controller and View
Controller : Central to control the flow of software, used in conjunction with scope objects to process data, and define the desired interface to display to the user.
Service : As I mentioned above, AngularJS uses APIs built from web services (PHP, ASP) to manipulate the DB.
Filters : Filters out the elements of an array and returns the new array
Directives : mark up DOM elements, that is, create custom HTML tags
Templates : a component that helps display information from the controller, can be understood as an HTML structure template, this is a component of views
Routing : switch between actions in the controller, based on the URL the user manipulates in the browser
MVC : Model divides separate components into Model, View, Controller. This is a pretty cool model, but in Angular it's slightly reworked to resemble MVVM (Model View View Model).
Deep Linking : Deep linking, which allows you to encode the state of your application in URLs so that it is bookmarkable to search engines.
Dependency Injection : Angular makes it easier for developers to create apps to develop, understand, and test easily.

Advantages and disadvantages of AngularJS

Advantages:

• Angular allows to create applications in a simple, clean way
• Application development time is reduced due to coherent code structure, data-binding mechanism saves programming time, no need to use too many events like pure javascript or Jquery
• Angular uses data bind like .NET with HTML binding feature, so it makes users feel comfortable.

Defect:

Although angular has many advantages, it also has the opposite side:

• Insecure: Developed from javascript so it's not secure, the server side has to regularly confirm permissions for the system to run smoothly. Therefore, AngularJS is usually only used as a frontend and communicates with the server through the API, not directly interacting with the database.
• Dependencies: this is a Javascript framework, so the application cannot run if the user accesses it on a device that does not support javascript.
• Error on mobile devices at the moment
• Stopped development and ended support until the end of 2022. Google has abandoned the old framework structures and replaced by the next Angular versions with completely different concepts, it will take time to approach from the ground up. .

Below is a basic introduction to angularJS, although the language is out of date, in practice, old projects using AngularJS still need to be maintained, and if understand the structure of AngularJS, with a knowledge base This will be easily accessible to the current new frameworks such as ReactJS, VueJS, or Angular 9 which are very powerful at the moment.