Date:06/Feb/2023

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

Angular Framework

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

- Angular is typescript based open source front end web application platform

- TypeScript is super script of Java Script

JavaScript vs TypeScript

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

- JavaScript does not support data types directly where as TypeScript

supports data types

Ex:

JavaScript

----------

var n=10;//n is number data type

var name="Raj";//name is string data type

var flag=true;//flag is boolean data type

TypeScript

----------

n : number = 10;

name : string = "Raj";

flag : boolean;

- JavaScript is object environment(predefined objects) scripting programming language

where as TypeScript is object oriented

- Angular is developed by Google

Note: Angular and Angular JS are different

- It is used to design single page applications (SPA) using routing

Angular Setup

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

- Node JS

- used to develop and run Angular Applications

To Download

-----------

url: nodejs.org

To verify Node JS

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

Open command prompt/terminal

C:\>node -v

-v => version

C:\>npm -v

npm (node package manager) => used to install Angular/CLI

- A text editor which can open folders

- Visual Studio Code

- Sublime Text
 To download Visual Studio Code

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

url: code.visualstudio.com/download

- Angular/CLI

- CLI stands for Command Line Interface

- Angular/CLI makes it easy to create an application that already works

url: cli.angular.io

To install Angular/CLI

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

Open command prompt/terminal

C:\>npm install -g @angular/cli

-g => to install globally so that we can work in any folder

To verify

----------

C:\>ng version

ng => angular

Creating an Angular Project

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

- Create a folder "Angular" as follows

C:\>cd Angular

C:\Angular>ng new Angular-Project

To Run Angular Project

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

C:\Angular>cd Angular-Project

C:\Angular\Angular-Project>ng serve

which compiles the project

- Open browser and type the following url

http://localhost:4200

Open Angular-Project folder in Visual Studio Code

- When a request is made to an Angular Project, the server loads, index.html file

- In index.html, using the element <app-root>, it loads the app component (app.component.ts) file

- app is the root component for Angular

- The presentation of app component is done in app.component.html file

- Type styling of app component is done in app.component.css file

Refer programs

- app.component.ts

- app.component.html

- app.component.css
To terminate the compilation => ctrl + c
Date:07/Feb/2023

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

{{ }} => data binding

Angular Directives

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

*ngFor and *ngIf are Angular Directives

Example Application

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

- Create a new component "address" as follows

>ng generate component address

Refer programs

- address.component.ts

- address.component.html

- address.component.css

- app.component.html (updated)

Angular Forms

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

Angular Forms are used to accept the user input and submit the form data to

the component
To use Angular Forms we need to add "FormsModule" in app.module.ts file

Refer program app.module.ts

Example Application

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

- Create a new component "book"

>ng generate component book

or

>ng g c book (shortcut)

Refer programs

- book.component.html

- book.component.ts

- app.component.html (updated)

[(ngModel)] => two way data binding

Angular Routing

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

- Routing is used to navigate between the pages

- Routing is used to develop single page applications

Example Application

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

- Create the following new components

>ng g c about

>ng g c dashboard

- Create a router configuration file "routerConfig.ts" in app folder

Refer program routerConfig.ts

- Update app.module.ts file by adding RouterModule

Refer program app.module.ts

- Update app.component.html file

Refer program app.component.html

- Run the application

>ng serve

- Open browser and type the following url

http://localhost:4200
Date:08/Feb/2023

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

Angular HttpClient Module

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

HttpClient module of Angular is used to invoke the services which are running

on the server side like Java, .NET, PHP etc

Ex:

httpClient : HttpClient;

httpClient.get("http://localhost:8080/api/employees/allemployees");

Java Side

----------

- Create a table "Employee" in MySQL

mysql>create table employee (emp_id varchar(10), name varchar(10), designation varchar(10),

mysql>insert into employee values ('111','Raj','accountant',6000);

mysql>insert into employee values ('222','Ramu','hr',8000);

mysql>insert into employee values ('333','Ramya','manager',16000);

- Choose a new workspace "SpringAngular" in STS

Click on File -> New -> Spring Starter Project

Name : SpringAngularProj

Type: Maven Project

Java Version : 8

Group : springangular

Artifact : SpringAngularProj

Package : com.spring.angular

Click Next

In Project Dependencies add the following and click Finish

- Spring Web

- Lombok

- Spring Data JPA

- MySQL Driver

- Create a POJO Class "Employee" in com.spring.angular package

Refer program Employee.java

Note

----

If errors in Employee.java while importing the packages,

copy the code of pom.xml file

- Create an interface "EmployeeDAO" in com.spring.angular package

REfer program EmployeeDAO.java

- Create a Service class "EmployeeService" in com.spring.angular package

REfer program EmployeeService.java

- Create a REST Controller class "EmployeeController" in com.spring.angular package

Refer program EmployeeController.java

- Update application.properties

REfer program application.properties

- Run "SpringAngularProj" as Spring Boot App

Refer programs in SpringAngular.zip file

Angular Side

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

- Create a new component "employee"

>ng g c employee

REfer programs

- employee.component.html

- employee.component.ts
- Update app.module.ts file by adding "HttpClientModule"

Refer program app.module.ts

- Create a folder "service" in app folder

- Create a file "http-client.service.ts" in service folder

Refer program http-client.service.ts

- Update "app-routing.module.ts" file

Refer program app-routing.module.ts

- Run the project

>ng serve

- Open browser and type the following url

http://localhost:4200

Refer programs of Angular in app.zip file

- Full Stack Java Course Recordings in the form of zip file

- GitHub tool recording

- Java Related Links

- Mini Project (Spring Angular CRUD Application)