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
- It is a complete rewrite from the same team that built Angular JS
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: [Link]
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: [Link]/download
- Angular/CLI
- CLI stands for Command Line Interface
- Angular/CLI makes it easy to create an application that already works
url: [Link]
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:\>md Angular
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
[Link]
Open Angular-Project folder in Visual Studio Code
- When a request is made to an Angular Project, the server loads, [Link] file
- In [Link], using the element <app-root>, it loads the app component ([Link]) file
- app is the root component for Angular
- The presentation of app component is done in [Link] file
- Type styling of app component is done in [Link] file
Refer programs
- [Link]
- [Link]
- [Link]
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
- [Link]
- [Link]
- [Link]
- [Link] (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 [Link] file
Refer program [Link]
Example Application
-------------------
- Create a new component "book"
>ng generate component book
or
>ng g c book (shortcut)
Refer programs
- [Link]
- [Link]
- [Link] (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 home
>ng g c about
>ng g c dashboard
- Create a router configuration file "[Link]" in app folder
Refer program [Link]
- Update [Link] file by adding RouterModule
Refer program [Link]
- Update [Link] file
Refer program [Link]
- Run the application
>ng serve
- Open browser and type the following url
[Link]
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;
[Link]("[Link]
Java Side
----------
- Create a table "Employee" in MySQL
mysql>create table employee (emp_id varchar(10), name varchar(10), designation varchar(10),
salary int(4));
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
- Create a Spring Starter Project "SpringAngularProj" in STS
Click on File -> New -> Spring Starter Project
Name : SpringAngularProj
Type: Maven Project
Java Version : 8
Group : springangular
Artifact : SpringAngularProj
Package : [Link]
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 [Link] package
Refer program [Link]
Note
----
If errors in [Link] while importing the packages,
copy the code of [Link] file
Refer program [Link]
- Create an interface "EmployeeDAO" in [Link] package
REfer program [Link]
- Create a Service class "EmployeeService" in [Link] package
REfer program [Link]
- Create a REST Controller class "EmployeeController" in [Link] package
Refer program [Link]
- Update [Link]
REfer program [Link]
- Run "SpringAngularProj" as Spring Boot App
Refer programs in [Link] file
Angular Side
------------
- Create a new component "employee"
>ng g c employee
REfer programs
- [Link]
- [Link]
- Update [Link] file by adding "HttpClientModule"
Refer program [Link]
- Create a folder "service" in app folder
- Create a file "[Link]" in service folder
Refer program [Link]
- Update "[Link]" file
Refer program [Link]
- Run the project
>ng serve
- Open browser and type the following url
[Link]
Refer programs of Angular in [Link] file
- Full Stack Java Course Recordings in the form of zip file
- GitHub tool recording
- Java Related Links
- Mini Project (Spring Angular CRUD Application)
