this presentation serve as an introduction to Angular JavaScript framework and also touch on some basic modern JavaScript, front-end development basics.

1. Ng-Talk
By: Aymen Bennour

2. intro
1. What is a Framework? and
Why we use it ?
2. What and why Angular ?
3. Your first step to be an
AWESOME Ng-dev ?

3. Why do I need a
Framework
Framework is a technology that
provide us with the right tools to
build a web application while also
defining how it should be designed
and how the code should be
organized.

4. Pros for using a Framework
1. Most JS frameworks these days are
opinionated.
2. Help you write well maintained and
scalable clean-code.
3. Eliminate the risk of reinventing the
wheel.

5. 1. What is Angular
Angular is a Javascript framework
to build more interactive web apps
AKA single-page application(SPA).
It is designed for both Web,
Desktop(Electron)and Mobile
platforms(NativeScript).

6. So what is a single-page
application or SPA ?
A single-page
application is
an app that
works inside a
browser and
does not
require page
reloading
during use.

8. Why Angular

10. Let’s talk some Angular :D

11. Angular CLI (command line
interface)

12. Angular cli is a command line interface to
scaffold and build angular apps.
Not only it provides you scalable project
structure, instead it handles all common
tedious tasks for you out of the box.

13. Getting started
with the Angular
Cli
ng new
Create well structure
apps out of the box.
ng generate
Generate components,
routes, services and
pipes with a simple
command.
ng serve
Easily test your app
locally while
developing.

14. A word about TypeScript the
future of Javascript

15. A word about
TypeScript
the future of
Javascript

16. Debugging in
TypeScript

17. How Angular Really
works

19. Component
The fundamental building block in an ng app, consist of 02 main
parts:
1. @Component
Decorator that marks a class as an Angular component and provides
configuration metadata that determines how the component should be
processed, instantiated, and used at runtime.
2. Controller
A class that control the logique of the component

21. Template binding
We call the syntax of {{...}}
template binding and what we mean
by it is to tell the view that we
want to use the value of the
expression inside the brackets at
this location.

23. Built in directives
Angular provide a number of built
in directives, which are attributes
we add to our HTML elements that
give us a dynamic behavior.

24. NgIf
The ngIf directive is used
when you want to show or hide
an element based on a Boolean
condition. Therefor the
element will be removed from
the DOM if the expression
returns false.

26. NgSwitch
ngSwitch directive works is
similar to how the switch
statement works which is by
allowing a single evaluation
of an expression, and then
display nested elements based
on the value that resulted
from that evaluation.

28. NgFor
the role of this directive is
to repeat a given DOM element
(or a collection of DOM
elements) by looping through
an element on each iteration.

30. Pipes in Angular
Angular pipes are a way to
write display-value
transformations that you
can declare in your HTML.

32. Bootstrapping the App

33. Thanks! Where to find me:
Twitter: @aymenokay
LinkedIn: Aymene Bennour
Email: aymenebennour@gmail.com