Angular

The Angular framework is based on JavaScript. A <script> tag can be used to add it to an HTML page.

Angular uses Directives to expand HTML attributes and Expressions to tie data to HTML.

Angular extends HTML

Angular adds ng-directives to HTML.

An Angular application is defined via the ng-app directive.

The ng-model directive connects HTML controls to application data.

The ng-bind directive connects the HTML display to the application data.

Angular Expressions

• Angular uses Expressions to bind data to HTML.
• Expressions in Angular can be written inside double braces {{expression}}.
• Angular expressions can also be written as ng-bind=” expression” inside a directive.
• The expression will be resolved by Angular, and the result will be returned exactly where the expression was written.
• Expressions in Angular are similar to JavaScript expressions in that they can contain literals, variables, and operators.
• If the ng-app directive is removed, HTML will display the expression as is, without solving it.
• Angular will simply resolve the expression and deliver the result, so you may write expressions wherever you want.

Angular Modules

• An application is defined by an Angular module.
• A module is a container for an application’s various components.
• The application controllers are contained in the module.
• Controllers are always associated with a module.

Creating a module

• The Angular function ‘angular.module’ is used to construct a module.
• The “myApp” option refers to an HTML element that will be used to launch the application.
• You may now add controllers, directives, filters, and other features to your Angular app.

Adding a controller — Add a controller to your application and use the ng-controller directive to refer to it.

Angular Directives

• Directives in Angular are extended HTML attributes with the prefix ng-.
• An Angular application is started with the ng-app directive.
• The ng-init directive is used to set up an application’s data.
• The ng-model directive connects HTML controls to application data.
• The ‘ng-app’ directive additionally informs Angular that the <div> element is the “owner” of the App.

Angular ng-model directive

You can use the ng-model directive to link the value of an input field to an Angular variable.

Two-way Binding — The binding works in both directions. The value of the Angular property will change whenever the user changes the value in the input field.

Angular Data Binding

In Angular, data binding refers to the synchronization of the model and the view.

Data Model — A data model is used in Angular apps. The data model is a set of data that the program can use.

HTML View

• The view is the HTML container in which the Angular application is shown.
• The view has access to the model, and it can show model data in a variety of ways.
• You can use the ng-bind directive to bind the element’s innerHTML to the model property you specify.
• Double braces can also be used to display content from the model.
• To link the model to the view, you can use the ng-model directive on HTML controls.

Angular Controllers

• Controllers are used to control Angular applications.
• The application controller is defined using the ng-controller directive.
• A controller is a JavaScript Object that may be constructed using any JavaScript object constructor.
• Controllers are frequently stored in external files in larger applications.

Angular Scope

• The binding part between the HTML (view) and the JavaScript is the scope (controller).
• A scope is an object that contains all of the properties and methods that are available.
• Both the view and the controller have access to the scope.
• In Angular, you pass the $scope object as an argument when creating a controller.
• The view (HTML) gets access to these properties when properties are added to the $scope object in the controller.
• You don’t use the prefix $scope in the view; instead, you refer to a property by its name.

Root Scope — The scope created on the HTML element that contains the ng-app directive is called $rootScope in all applications.

The rootScope is accessible throughout the application.

The application uses the current scope if a variable has the same name in both the current scope and the rootScope.

Angular Services

• A service in Angular is a function or object that is only available for your Angular application.
• There are about 30 built-in services in Angular.
• The $location service is one of them.
• The $location service includes methods that return information about the current web page’s location.
• The $location service is supplied as a parameter to the controller.
• The service must be declared as a dependency in order to be used in the controller.

Angular ajax -$http

The $http service in Angular sends a request to the server and receives a response.

The .get method is a shortcut way of the $http service. There are multiple shortcut methods:

• .get()
• .delete()
• .head()
• .patch()
• .jsonp()
• .put()
• .post()

All of the techniques shown above are shortcuts for using the $http service.

The $http service is called with an object as an argument in the example above.

The object specifies the HTTP method, the url, what to do if the request succeeds, and what to do if the request fails.

Angular API

Angular Global API — It is a collection of global JavaScript functions that can be used to execute common activities such as:

• Object comparison
• Object iteration
• Data conversion
  The angular object is used to access the Global API functionalities.

Angular Routing

The ngRoute module may be used to browse to different pages in your application while keeping the application as a SPA (Single Page Application) with no page reloading.

The ngRoute module allows you to route your application to different pages without having to refresh the whole thing.

Angular-Dependency Injection

Dependency Injection is a program design technique in which dependencies are passed to components rather than hard-coded within them.

It relieves a component of the burden of locating dependencies and allows dependencies to be configured.

It also aids with the reuse, maintenance, and testing of components.

Angular has a fantastic Dependency Injection system.

It includes the following fundamental components, which can be injected as dependencies into one another.

• Service
• Value
• Factory
• Constant
• Provider

This blog will help you to get a better understanding of Angular.