Fundamentals of AJS

Introduction or Fundamentals of AJS

• The basics of birth or fundamentals of AJS were initially released in 2010. 
• AngularJS is often referred to as Angular 1.x, while Angular refers to versions 2 and later. Angular (versions 2 and beyond) introduced significant changes and improvements, and the syntax and architecture are quite different from AngularJS.
• While AngularJS(earlier/old name) is still used in some existing projects, for new projects, it’s recommended to consider using the latest versions of Angular(latest/new name) for better features, performance, and community support.
• AngularJS follows the principles of declarative programming and aims to enhance both the design and testing aspects of web development.

Definition of AJS

• AngularJS is a JavaScript-based open-source, front-end, dynamic web application framework developed by Google. 

Characteristics/Features of AJS

• AJS is designed to simplify the development of dynamic, single-page web applications (SPAs).
• AJS uses MVC (Model-View-Controller) and MVVM (Model-View-ViewModel) architectures in their development.

Components of AJS

1. Data Binding:

   • It is one of the distinctive features of AngularJS is two-way data binding, i.e., changes in the user interface (UI)/model are automatically reflected in the application’s data model/view, and vice versa(changes in the view automatically update the model).
   • This simplifies the code and reduces the need for manual DOM manipulation.
   • This simplifies the synchronization between the view and the underlying data.
2. MVC Architecture:
   • AngularJS follows the Model-View-Controller (MVC) architecture, where:
     • Model: Represents the data and business logic.
     • View: Renders the user interface.
     • Controller: Manages the interaction between the model and view.

3. Directives:

   • Directives are markers on a DOM element that tell AngularJS to attach a specified behavior to that DOM element or even transform the DOM element and its children.
   • Examples are ng-model, ng-repeat, ng-if, etc.

4. Expressions:

   • AngularJS uses expressions that are used to bind codes/application data to HTML.
   • AJS variables are written inside double curly braces or bindings {{ expression }} to display data.
   • For example, {{ ags_variable }}.

5. Modules:

   • AngularJS applications are organized into modules.
   • Modules are containers for controllers, services, filters, and directives.
   • An AngularJS module is a container for different parts of an AJS application.
   • It helps in organizing and structuring the code.
   • We can define modules using the angular.module function.
   •  For example –
   var x = angular.module('myApp', []);

6. Controllers:

   • Controllers are JavaScript functions that handle the business logic and are bound to a particular scope.
   • They are responsible for setting up the initial state of the scope object and adding behavior to it.
   • They manage the data and behavior of the application.
7. Services:
   • Services are objects or functions that carry out specific tasks.
   • AngularJS has several built-in services, and we can also create custom services when needed.
   • Services are singletons that perform tasks common to all parts of our application.
   • AngularJS has several built-in services, such as $http for making HTTP requests.

8. Filters:

   • Filters are used to format the value of an expression for display to the user.
   • They can be used in templates, controllers, or services.

9. Routing:

   • AngularJS supports client-side routing, allowing us to create single-page applications where different views are loaded dynamically without a full page refresh/reload. The ngRoute module is often used for this purpose.
10. Testing:
    • AngularJS was designed with testability in mind.
    • It includes features that support unit testing, end-to-end testing, and mocking of dependencies.

11. Dependency Injection:

    • AngularJS uses dependency injection to make components reusable, testable, and maintainable.
    • Dependencies are injected into components rather than being hard-coded.