Scribd
Upload
52 views13 pages

Overview of Angular

This document provides an overview of Angular, including its architecture, installation, and creating a first application. Angular is a JavaScript framework for building client-side applications. It uses components, directives, and services for modularity. The key parts of an Angular application are modules, components, templates, metadata, data binding, and dependency injection. Developers can get started by installing Node.js, the Angular CLI, and using commands like ng new to generate a new project and ng serve to run a development server.

Uploaded by

Rofak Vkm1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
52 views13 pages

Overview of Angular

This document provides an overview of Angular, including its architecture, installation, and creating a first application. Angular is a JavaScript framework for building client-side applications. It uses components, directives, and services for modularity. The key parts of an Angular application are modules, components, templates, metadata, data binding, and dependency injection. Developers can get started by installing Node.js, the Angular CLI, and using commands like ng new to generate a new project and ng serve to run a development server.

Uploaded by

Rofak Vkm1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Overview of Angular

Prepared by Spring Team


Content
⎆ Introduction to Angular
⎆ Angular Architecture
⎆ Angular Environment Installation
⎆ Angular CLI
⎆ Angular Module
⎆ Creating First Application

2
Introduction

⎊ Angular is a JavaScript framework and platform for developing client-slide (front-end).


⎊ It was created in 2009 by two developers, Misko Hevery and Adam Abrons.
⎊ It contains some benefits such as :
1. Support multiple platform
2. High speed, ultimate performance
3. Productivity
4. Full stack development

3
Introduction

⎊ The differences between Angular and AngularJS

AngularJS Angular

Architecture The view processes the information Uses components and


available in the model to generate the directives.
output.

Written JavaScript TypeScript

Mobile Support Not support Support

Expression Use ng-bind for databinding Properties enclosed in “()” and


Syntax “[]”

4
Introduction

Routing Uses $routerprovider.when() for Uses @RouteConfig{(..)} for


routing configuration. routing configuration.

Dependency Does not use dependency injection. Uses hierarchical dependency


Injection injection system with unidirectional
tree-based change detection.

Structure Less manageable Better structure

Speed Reduced the development effort and Faster


time

5
Angular Architecture

6
Angular Architecture

⎊ The architecture diagram identifies the eight main building blocks of an Angular application:
1. Module: denoted by @NgModule and used to declare each thing you create in application
and group them together.
2. Components: the piece of the screen; visually and logically and denoted by @Component.
3. Templates: a template is nothing but a form of HTML tags that tells Angular about how to
render the component.

7
Angular Architecture

4. Metadata : the information saying what to do with the class.


5. Data Binding:used to define the communication between a component and the DOM.
6. Directives : a .js/.ts class, which is declared with @Directive. That’s what lets you change
the UI elements at runtime.
7. Services: declared as @Injectable. A class that gives us the ability to use data in multiple
components. It provides specific functionality not directly related to views and saves us
from duplicated code.

8
Angular Environment Installation

⎊ Install Node.js from https://nodejs.org/en/

to check the version of your node.js node -v

⎊ Use npm to Install Angular CLI

use this following command :

npm install -g @angular/cli or npm install -g @angular/cli@latest

⎊ Check your installed version

to check Node and Angular CLI version, use ng --version command

9
Angular CLI

⎊ Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and
maintain Angular applications. You can use the tool directly in a command shell, or indirectly
through an interactive UI such as Angular Console.

Example :

- ng new : used for create application


- ng generate : used to generate components, routes, services and pipes with a simple command.
- ng serve : test your app locally while developing.

10
Creating First Application

Go to your terminal and execute these commands

$ cd ~

$ ng new angular-example

$ cd angular-example

$ ng serve

11
References

● https://www.freecodecamp.org/news/angular-8-tutorial-in-easy-steps/
● https://medium.com/@cyrilletuzi/understanding-angular-modules-ngmodule-and-their-scopes-81e4ed6f7407
● https://www.edureka.co/blog/angular-tutorial/
● https://medium.com/@cyrilletuzi/architecture-in-angular-projects-242606567e40

12
THANKS!
Please try hard to study..!

13

You might also like