Scribd
Upload
33 views

02ndMar@11AM (Angular)

The document provides an introduction to Angular, including its history and versions, how it can be used to build web and mobile applications, and its use of TypeScript. It also summarizes how to set up an Angular development environment and create a basic Angular application.

Uploaded by

king4u9
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
33 views

02ndMar@11AM (Angular)

The document provides an introduction to Angular, including its history and versions, how it can be used to build web and mobile applications, and its use of TypeScript. It also summarizes how to set up an Angular development environment and create a basic Angular application.

Uploaded by

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

Introduction to Angular

-----------------------

- "Angular" is the platform released by google for web applications and mobile
applications development.

- Angular also called as Framework (UI Framework).

- Angular have the two flavours(versions).

1) AngularJS

2) Angular2

- AngularJS is used to develop the only web applications with the help of
JavaScript.

- Angular2 used to develop the web applications and mobile applications with
the help of TypeScript.

- current version of Angular2 is "Angular9"

- both AngularJS & Angular2 follows the MVC Design Pattern.

M - Model

V - View

C - Controller / Component

Differences Between AngularJS to Angular2


--------------------------------------------------------------------
AngularJS Angular2

1) we can develop only web we can develop web applications


applications and mobile applications

2) we can develop by using we can develop by using


JavaScript TypeScript

3) Suitable for only small Suitable for small,medium &


Scale Web applications large scale web applications

4) Code Reusability is less Code Reusability is high because


because of Object Based of Object Oriented Programming
Scripting language. language

5) follows MVC Design Pattern follows the MVC Design Pattern

M - Model (JS Variables) M - Model (TS Variables)


V - View V - View
(HTML,
HTML5,
CSS,
CSS3,
BootStrap, ----
Python, ----
Django,
PERL,
ReactJS
---
---
---)
C - Controller (functions) C - Component (TS Classes)
-------------------------------------------------------------------
Environmental Setup for Angular9

1) download and install NodeJS

- To install "Angular9" we need "npm".

- "npm" stands for node packaging manager.

- "npm" is the tool present in "NodeJS".

website : https://nodejs.org/en/download/

file : node-v12.16.1-x64.msi

2) install yarn tool

- "yarn" tool given by facebook.

- "yarn" tool used to download the libraries from GitHub.

- we will install yarn tool by using following command.

> npm install -g yarn@latest

- where "-g" stands for global installation.

3) install Angular9

- we will install Angular9 by using following command.

> npm install -g @angular/cli@latest

- "cli" stands for command line interface

- "cli" is the tool provided by google.

- "cli" tool used to build and execute the angular applications

4) link the "yarn" tool to "cli" tool.

- we will link "yarn" tool to "cli" tool by using following command.

> ng config -g cli.pacakageManager yarn

- where "M" is the capital in "pacakageManager".


create and execute angular applications
---------------------------------------

1) create the directory


Ex.
Demo

2) create the angular project


> ng new firstApp

? Would you like to add Angular routing? (y/N) n


? Which stylesheet format would you like to use? (Use arrow keys)
> CSS

3) switch to angular application


> cd firstApp

4) execute angular application


> ng s -o

- "s" stands for "serve"

- "-o" stands for open default browser.

- by default angular application running on port no.4200

- we can change port no based on our application requirement

directory structure of angular application


------------------------------------------
1) e2e
- e2e stands for end to end.
- this directory helps to write the end to end test cases to angular
applications.

2) node_modules

- this directory containes libraries.


- these libraries helps to execute the angular applications.

3) src/app
- this directory helps to deploy our applications.

Ex.
Components
Directives
Services
Pipes
---
---
---
- we must register our applications in "app.module.ts" file.

- "app.module.ts" file called as registration file(module file).


- once if we register then only our applications will be executed.

4) src/app/app.module.ts

- this file is the default registration(module) file.

5) src/app/app.component.ts
app.component.html
app.component.css
app.component.spec.ts

- above files representing default component files in angular

6) src/assets

- this directory helps to deploy the static resources.

Ex.
Logos
XML files
JSON files
---
---
---

7) src/environments

- in general we have 3 types of environments.

=> Dev Environment.

=> Prod Environment.

=> Testing Environment.

- we will configure required environment in this directory

You might also like