An Open-Source JavaScript Framework It’s used to build Single Page based Web Application (SPA) Developed by Google, Release date March 2017, Current version 4.4.6 (stable).

1. Presented by : Imran Qasim
Complete
Angular JS 5
In Urdu & Hindi 2017
By: Perfect Web Solutions
1

2. What is Angular?
2

3. What is Angular ?
• An Open-Source JavaScript Framework
• It’s used to build Single Page basedWeb Application (SPA)
• Developed by Google,
• Release date March 2017,
• Current version 4.4.6 (stable).
3

4. Why Angular JS?
4

5. Why Angular JS?
• Speed &Performance,
• Smaller application,
• Modular application,
• Cross-platform Web, Mobile &Desktop,
• SPA,
• RESTful API,
• Uses TypeScript,
• It has a huge community on GitHub.
5

6. What Is TypeScript ?
6

7. What is Type Script ?
• Free & Open-Source programming language, Developed &
maintained by Microsoft.
• A superset ofJavaScript.
• Full Object-Oriented Programming with features like classes,
interfaces & modules…
• Support for ECMAScript and uses arrow function syntax.
• Compiles to plainJavaScript.
7

8. Single Page Application (SPA)
8

9. Single Page Application ?
One and Only HTMLpage for the entire application,
Dynamically update the single page with new data if needed, as
the user interacts with theapp,
Show and Hide some components during the interaction process,
No reloading or refreshing duringnavigation,
More responsive & fluid app as a result,
Full separation between the presentation logic & business logic,
Asynchronous Requests (AJAX), JSON response & RESTful API.
9

10. Development Environment Setup
10

11. Development Environment Setup
Node.js is an open-source, cross-platform JavaScript run-time environment.
we use itto:
> Run a developmentserver.
> Use the npm tool.
npm is a Node.js Package Manager for
JavaScript programming language.
npm is automatically installedwith Nodejs.
11

12. Development Environment Setup
To develop the application usingTypeScript we need to
install the TypeScript package using thecommand,
Angular CLI (Command Line Interface) is a tool that allows
us to create a project, generate it’s parts, build it andrun it
on the development server directly through the command
line,
12

13. Development Environment Setup
Visual Studio Codeas a Text Editor
13

14. Welcome APP
14

15. Creating Welcome APP
Go to your projects directory,
Using Angular CLI ng new command create the Welcome APP application,
Go to the Welcome APP directory,
Run the application using another Angular CLI command ng serve,
15

16. Basic Structure of
Angular Application
16

17. BasicStructure of ANGULAR Application
.angular-cli.json , package.json and
tsconfig.json are the responsible
files on the project configuration, it’s
dependency management and it’s
external packages.
17

18. BasicStructure of ANGULAR Application
main.ts and index.html are the entry
point to the application,
Since we are developing a SPA
index.html is the only HTML page in the
whole project,
style.css is the style sheet for the global
app design.
18

19. BasicStructure of ANGULAR Application
node_modules folder contains the
packages installed by the npm tool,
app folder contains all the work,
components, modules…
19

20. Bootstrapping
TheAPP
20

21. Bootstrapping the app
21

22. Building Blocks
22

23. Every Angular app has at least one Module, the
root module named AppModule,
An Angular app is a Modular app,
A module is a TypeScript class with the Decorator
@NgModule,
Each module in the application has it’s own Components,
Directives, Services… Theyshould be declared in
@NgModule decorator,
Modules can cooperate to achieve someapp
functionalities.
23

24. A Component controls a piece of screen called
view,
This view is defined by the Template associated to
the Component,
A Component handles the user interaction with the
view (Template), passes data and properties to the
view and updates itdynamically,
A Component is a TypeScript class with the
Decorator @Component.
24

25. A Component view is defined by its associated
Template,
A Template is bunch of HTML tags,
Along side with the HTML, a Template typically
contains some particular expressions andsyntax
which belong to Angular,
A Template may contain some Custom Tags, that
represent another Component, the selectors.
25

26. A Module, a Component, a Directive or a Service are
just TypeScript Classes until we tell Angular about the
difference between them, and that is done by the
Metadata,
We attach Metadata in TypeScript to a class by using
Decorators, @NgModule, @Component, @Injectable…
Metadata tells Angular which Template belongs to which
Component and which Component belongs to which
Module…
Class + @Component + Metadata = A Component
26

27. 27

28. A Directive is a TypeScript class with the Decorator @Directive.
Directives appear within HTML tag as attributes.
Two kind of directives: Structural & Attribute.
Structural Directives change the layout by addingor removing
Template elements,
Example: *ngFor &*ngIf.
Attribute Directives change the appearance orthe behavior of
an existing Template element, Example: ngModel, ngStyle &
ngClass.
28

29. A Service is a TypeScript class with the Decorator
@Injectable,
A Service achieve some functionalities for the application
such us fetching data from server, authentication…
Thiskind of functionalities should not be done in the
Component,
AComponent should only take care of rendering the
Template (view).
29

30. Thank You!
30