Angular crash course

Angular crash course
For working developers
Birhan Nega, march, 2022

Angular
● Angular is a framework and platform for building single-page apps".
● It is one of the big three frontend frameworks along with React and Vue.
● Its main building blocks include modules, services and components ,directives
● Modules have root modules and feature modules.
● Components have root components, templates, views, data binding, directives and pipes
● Services have providers and use dependency injection.

Terms to discuss
● Components
● Modules (root module, feature modules)
● Services
● View
● Template
● Data binding
● Directive
● pipes

Components
● Typescript class that interacts with a view.
● A view consists of a component and a template
● A template is HTML combined with the data-binding syntax of Angular
● The view gets updated these properties and methods in the class
1. selector: this is what your component will be in HTML
2. templateUrl: This is the view that corresponds to your template.providers:

Services
● It is an injectable class which handles actions like fetching data from the
server, changing state, validating user input, or logging directly to the
console.
● Services avoid rewriting of code.
● A service can be written once and injected into all the components that
use that service
● They have @Injectable()decorator so that any component can inject them

Dependency injection
● Dependency injection is used to provide components with the services they can use.
● To define a class as a service in Angular, the @Injectable() decorator is used.
● It provides the metadata that allows Angular to inject it into a component as a
dependency.
● In the longhand method, you register an object with two properties, provide and useValue, in the
providers array of any module
● For shorthand method we can add them in providers array of the component metadata

Modules
● a place where you can group the components, directives, pipes, and
services, which are related to the application
● Angular applications are modular and Angular has its own modularity
system called NgModules
● The idea of modules comes from the single responsibility principle.
● Organizing code into modules also allows lazy loading, meaning the
modules load as needed rather than all at once on application
initialization.
● Can be root module/ feature module
● Root Module is always one and it’s called AppModule by default

Modules meta-data
An Angular module has five properties that make up its metadata
● Declarations: We can list any directives, components, or pipes here that will need to
communicate with each other.
● Imports: Pulls in any modules like the forms or router modules.
● Exports: Makes components, pipes, and directives usable in other modules that import
this one.
● Providers: Services added here become known globally to allow for dependency
injection.
● Bootstrap: Only the root module has this property. This will contain the main application
view, also called the root component.

Lifecycle hooks
Angular has a lifecycle that starts when Angular instantiates the component
class and renders the component view along with its child views.
The life cycle continues with change detection, as Angular checks to see when
data-bound properties change, and updates both the view and the
component instance as needed.
The lifecycle ends when Angular destroys the component instance and
removes its rendered template from the DOM.
Directives have a similar life cycle, as Angular creates, updates, and destroys
instances in the course of execution.

Directives
Directives are classes that add additional behavior to elements in your
Angular applications
The different types of Angular directives are as follows:
Components—directives with a template. This type of directive is the most
common directive type.
Attribute directives—directives that change the appearance or behavior of an
element, component, or another directive.
Structural directives—directives that change the DOM layout by adding and
removing DOM elements

Observables
Observable services are patterns that allow you to effectively deal with data —
allowing you to parse, modify and maintain data in an event-based system.
You can’t really escape Http and Observables because everything is data

Routing, guards
● To handle the navigation from one view to the next, you use the Angular
Router.
● If you have a login of some sort, you’re going to need route guards.
● The idea that you can protect certain views from unauthorized views is a must-
have requirement in many applications.
● Route guards act as an interface between your router and the requested
route.
● lazy-loading can also enhance your user’s experience by speeding up your
application’s load time

Pipes
● Formatting data has never been easier with Angular pipes.
● While a lot of the pre-configured and out the box pipes covers a lot of
things like dates, currency, percentages and character casing, it doesn’t
cover everything that you’ll ever need.
● That’s where custom pipes come in handy. You can create your own filters
easily and transform data formats to your liking

Component to component communication
There are 3 different communications
● Parent to Child Communication
● Child to Parent Communication
● Interaction when there is no parent-child relation

Forms
Handling user input with forms is the cornerstone of many common
applications.
Applications use forms to enable users to log in, to update a profile, to enter
sensitive information, and to perform many other data-entry tasks.
Angular provides two different approaches to handling user input through
forms: reactive and template-driven.

Angular crash course

More Related Content

What's hot (20)

Similar to Angular crash course (20)

Recently uploaded (20)

Angular crash course

Editor's Notes