JAVA Angular FULL STACK DEVELOPMENT
Objectives of this Lab Manual This lab manual includes - Exercises for hands on practice Guidelines to complete the exercise Learning Outcome
Basic Angular Application
Problem Statement What will you do? Build an Angular Application and serve it on a server.
Solution What will be the steps steps to get the output? • Step-1: Create an Angular project. • Step-2: Serve the application.
Code Open the command prompt and execute the commands – • Create a project – ng new First ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? CSS • Serve the application – ng serve
Output Output for the Adedxetercxitsheewreil:l- be :-
Learning Outcome After performing this Add teexxt ehrecries:e- You’ll be able to build a basic angular application.
Login Component
Problem Statement What will you do? Create an Angular application. Build a component inside the application in order to implement a simple login form.
Solution What will be the steps steps to get the output? • Step-1: Create a component. • Step-2: Implement the HTML for the login. • Step-3: Implement the style for the login. • Step-4: Add the component to the main app module.
Code Open the command prompt and execute the command – • Create a component – ng g c login • Code for login form in login.component.html <html> <body bgcolor='#80ced6'> <div class=\"container\"> <form> <table cellspacing='15' border='0'> <caption>Registration Form</caption>
Code <tr> <td><label>Name: </label></td> <td><input type='text' id='name'></td> </tr> <tr> <td><label>Phone Number: </label></td> <td><input type='text' id='ph_no'></td> </tr> <tr> <td><label>Email Id: </label></td> <td><input type='text' id='email_id' placeholder='[email protected]'></td> </tr>
Code <tr> <td><label>Age: </label></td> <td><input type='text' id='age'></td> </tr> <tr> <td><label>Password: </label></td> <td><input type='password' id='pwd'></td> </tr> <tr> <td><label>Confirm Password: </label></td> <td><input type='password' id='confirm_pwd'></td> </tr>
Code </table> <button type=\"submit\">SUBMIT</button> </form> </div> </body> </html>
Code • Code for login design in login.component.css .container { background-color: #c5e8ec; margin: 8% 37% 1% 37%; padding: 20px 40px 20px 40px; font-size: 18px; border-radius: 50px 20px; } input { padding: 5px 0px 5px 5px; font-size: 15px; }
Code caption { font-weight: bold; font-style: italic; font-size: 34px; padding-bottom: 20px; text-shadow: 3px 3px 4px #256c74; text-align: center; } button { font-size: 18px; padding: 8px 50px 8px 50px; margin: 25px 0px 25px 0px; background-color: #256c74;
Code color: white; border-color: black; border-width: 3px; } • Add the component in app.component.html – <app-login></app-login>
Output Output for the Adedxetercxitsheewreil:l- be :-
Learning Outcome After performing this Add teexxt ehrecries:e- You’ll be able to build a simple login component.
Two Way Binding
Problem Statement What will you do? Create an Angular application. Create a component to implement two-way binding which is a combination of both property binding and event binding.
Solution What will be the steps steps to get the output? • Step-1: Create a component. • Step-2: Apply two-way binding inside the component. • Step-3: Import the FormsModule into the main app module. • Step-4: Add the component to the main app module.
Code Open the command prompt and execute the command – • Create a component – ng g c binding • Apply two binding inside the template of the component – import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-binding',
Code template: ` <label>Enter Language: </label> <input [(ngModel)]=\"lang\" type=\"text\"> <h2>My native language is {{lang}}</h2> `, styleUrls: ['./binding.component.css'] }) export class BindingComponent implements OnInit { public lang = \"\"; constructor() { } ngOnInit(): void { } }
Code • Import the FormsModule in app.module.ts – import { FormsModule } from '@angular/forms’; • Declare the FormsModule in the imports array – @NgModule({ imports: [ BrowserModule, FormsModule, AppRoutingModule ], • Add the component in app.component.html – <app-binding></app-binding>
Output Output for the Adedxetercxitsheewreil:l- be :- Without Input –
Output Output for the Adedxetercxitsheewreil:l- be :- With Input –
Learning Outcome After performing this Add teexxt ehrecries:e- You’ll be able to apply two-way binding.
Switch Structural Directives
Problem Statement What will you do? Create an Angular application. Create a component to define the switch structural directive. The user will enter their choice of course based on which the switch directive will choose an appropriate output.
Solution What will be the steps steps to get the output? • Step-1: Create a component. • Step-2: Create a courses table. • Step-2: Define a switch structural directive. • Step-3: Define the switch case statements. • Step-4: Add the component to the main app module.
Code Open the command prompt and execute the command – • Create a component – ng g c switch • Create a course table in the template of switch.component.ts – import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-switch',
Code template: ` <table align=center border=1 cellpadding=5> <tr> <th>Sr. No</th> <th>Course</th> </tr> <tr> <td>1</td> <td>Java Programming</td> </tr>
Code <tr> <td>2</td> <td>Spring Boot</td> </tr> <tr> <td>3</td> <td>Microservices</td> </tr> <tr> <td>4</td> <td>Angular</td> </tr>
Code <tr> <td>5</td> <td>React</td> </tr> </table> <br><br> • Define the switch structural directive according to the options – <input [(ngModel)]=\"option\" type=\"text\"> <div [ngSwitch]=\"option\"><br>
Code <div *ngSwitchCase=\"0\">Please pick an option.</div> <div *ngSwitchCase=\"1\">You picked Java Programming.</div> <div *ngSwitchCase=\"2\">You picked Spring Boot.</div> <div *ngSwitchCase=\"3\">You picked Microservices.</div> <div *ngSwitchCase=\"4\">You picked Angular.</div> <div *ngSwitchCase=\"5\">You picked React.</div> <div *ngSwitchDefault>Please pick a correct option.</div> </div> `, styleUrls: ['./switch.component.css'] })
Code export class SwitchComponent implements OnInit { public option = 0; constructor() { } ngOnInit(): void { } } • Add the component in app.component.html – <app-switch></app-switch>
Output Output for the Adedxetercxitsheewreil:l- be :- No pick –
Output Output for the Adedxetercxitsheewreil:l- be :- Matching pick –
Output Output for the Adedxetercxitsheewreil:l- be :- Non-Matching pick –
Learning Outcome After performing this Add teexxt ehrecries:e- You’ll be able to define switch Structural directive.
Forms
Problem Statement What will you do? Write a Program to Show the Responses While the Form is in the Submitted State and Provide an Edit Button
Solution What will be the steps steps to get the output? • Step-1: Wrap the entire form in a div • Step-2: Bind its hidden property to the form component submitted property. • Step-3: Display each of your form’s inputs within the first div • Step-4: Add an edit button that clears the submitted flag.
Code <div [hidden]=\"!submitted\"> <h2>Your responses are:</h2> <div class=\"row\"> <div class=\"col-xs-3\">Name</div> <div class=\"col-xs-9\">{{ model.name }}</div> </div> <div class=\"row\"> <div class=\"col-xs-3\">School</div> <div class=\"col-xs-9\">{{ model.school }}</div> </div>
Code <div class=\"row\"> <div class=\"col-xs-3\">Grade</div> <div class=\"col-xs-9\">{{ model.grade }}</div> </div> <br> <button type=\"button\" class=\"btn btn-primary\" (click)=\"submitted=false\">Edit</button> </div>
Output Output for the Adedxetercxitsheewreil:l- be :- The form’s responses and an edit button Will be displayed.
Learning Outcome After Performing this Add teExxt ehrecries:e- You’ll be able to write code to display your form’s responses once it is submitted.
Service
Search
