How Does Angular Work?

1
(No Transcript)
2
How Does Angular Work?

• A framework for creating client-side web apps is
  called Angular. Typically, TypeScript, HTML, and
  CSS are used. The Angular framework's intriguing
  feature is that Google made it.
• For the creation of client-side web applications,
  Angular offers developers robust tools. To create
  stable and responsive single-page applications,
  Angular adheres to component-based architecture
  to the letter (SPA).
• But the main query is How does Angular function?
  So far, we've covered a lot of specific
  information regarding the processes involved in
  creating Angular applications.

3
What is Angular Framework?

• Angular is a platform and framework made
  explicitly for creating web and single-page apps.
  For creating reliable online apps, Angular
  tightly adheres to the HTML template language and
  is written in the TypeScript programming
  language.
• The Angular framework, a collection of TypeScript
  libraries, is often used by developers working
  with AngularJS development companies to provide
  core and optional functionality.

4
Understanding Angular App Development Structure

• Developers must thoroughly examine the workspace
  structure and application configuration used to
  understand how Angular works.
• Every Angular application functions as a
  workspace. By default, the ng new
  name_of_application command generates a skeleton
  application at the workspace's root in the manner
  shown below.
• workspace/(folder name is name_of_application
  given at cmd)
• ... (workspace-wide config files)
• src/ --(source and support files for application)

5

• Each application has its workspace, and the
  developers typically refer to this arrangement as
  a "multi-repo" development approach.
  Additionally, the 'workspace' folder consists of
  workspace-specific configuration files, whereas
  the 'src' folder consists of application-specific
  files and folders.
• Workspace Configuration Files
• angular.json The file manages the workspace and
  project-specific defaults for every Angular build
  and development purpose. No matter how many npm
  packages the developers have installed in the
  workspace, they need to specify the list of
  packages to be used when they need them in your
  application in angular.json.
• package.json This file includes the projects
  metadata and plays an essential role in managing
  the projects dependencies, scripts, npm package
  versions and many more.

6

• package-lock.json This file includes all the
  information related to npm packages installed in
  the npm_modules folder. Some info like package
  version, hash to verify the package integrity and
  list of its dependencies are included in the
  file.
• tsconfig.json TypeScript is a language
  developers typically use to develop Angular apps.
  This file specifies root files and compiler
  options required to compile our application.
• Application Configuration Files
• index.html Its the main HTML page rendered for
  the Angular application and displayed to the user
  in the browser.
• main.ts Its an important file in the Angular
  application and is responsible for compiling all
  components and template files with JIT(Just In
  Time) compiler. Moreover, the developers can also
  use the Ahead Of Time compiler by adding the
  aot flag to ng build or ng serve CLI
  commands(Recommended for production environment).

7
How Does Angular Work?

• A module in an Angular application is nothing
  more than a collection of commonly used
  components, directives, pipes, and services. To
  effectively provide robust functionality, all of
  these groupings interact with one another via
  communication.
• An extensive enterprise application is nothing
  more than a collection of these built-in Angular
  modules, such as the HTTP module (to make an HTTP
  call from the application).

8

• The eight Angular application building blocks
  that each developer commonly uses on a daily
  basis are
• Modules For every Angular application, you will
  have only one root module named AppModule. The
  module usually provides the Angular developers
  with the bootstrap mechanism that makes it easy
  to launch the new application.
• Components Like modules, every Angular project
  contains at least one component, the root
  component. The primary role of the root component
  is to connect the component hierarchy with a page
  document object model (DOM).
• Services The Angular developers create a service
  class when no specific data or logic is
  associated with the particular view. In addition,
  the developers can even share the data or logic
  among different components. The _at_Injectable
  decorator immediately precedes the service class
  definition.

9

• Templates Angular templates are nothing but a
  combination of HTML and Angular markup. The
  primary aim of such templates is to modify HTML
  elements before they are displayed quickly. In
  addition, template directives provide program
  logic, and binding markup connects your
  application data and the DOM.
• Metadata Metadata is nothing but an instructor
  that informs Angular about how to process a
  class. It is designed explicitly to decorate the
  class so that the developers can quickly
  configure the expected behaviour of a class.
• Data Binding The Angular data binding concept
  typically handles real-time communication between
  a template and its related component. Moreover,
  data binding is also a boon for communication
  between parent and child components.

10

• Directives Angular components and directives are
  interconnected with each other. In simple words,
  we can say that directives and components both
  are essential building blocks of Angular
  applications.
• Dependency Injection The primary role of the
  Angular developer is to keep the component
  classes short and straightforward. And thats
  what Dependency Injection (DI) does. DI is not
  responsible for fetching data from a server,
  validating the user input, or logging directly
  into the console.

11
Angular Bootstrapping Process

• When an Angular application loads, that specific
  process is known as bootstrapping. Generally, the
  Angular project file structure is divided into
  three categories
• Application files
• Bootstrap files
• Configuration files
• How a bootstrapping process works
• With the help of the tsc TypeScript compiler, the
  compilation of application codes starts
• Webpack is used for bundling and minification of
  javascript files.
• The deployment and bootstrapping process take
  place.
• Run the JIT compiler for all components,
  directives and pipes.
• Render index.html in the browser.

12
Conclusion

• Eventually, we can say that an Angular
  application is a tree to a component, and these
  components are further enabled to add behaviour
  to UI through
• Services, Pipes, Directives, Dependency
  injection, and Modules
• Such components are logical units of large
  applications, and numerous modules are connected
  to create a stable Angular application.
• Angular offers built-in modules, pipelines, and
  directives for some core and fundamental
  functions by which we can develop our building
  blocks and connect them to create an
  enterprise-level application.
• Therefore, an Angular application functions as a
  component of trees connected to form modules and
  an enterprise-level Angular application.

13
THANK YOU
Contact Us (91) 991-308-8360 / 1 (912)
528-5566 inquiry_at_albiorixtech.com livealbiorix.te
ch For More Information Visit Us
At www.albiorixtech.com