Scribd
Upload
42 views9 pages

Angularjs: Manne Veera Venkat Narayana 17551A0589 Computer Science and Engineering

This document describes the development of an Angular website called Quik Results for job searching. Angular is a JavaScript framework used to build single page applications. The Quik Results site includes modules for users, searching, login, and registration. The registration module allows users to create an account. Angular forms are used to generate the registration form with input fields and validations. Clicking the registration button calls a function to register the user's data. The jobs list displays categories of jobs using an unordered list and the Angular *ngFor directive to repeat the list items for each category.

Uploaded by

bhanu prakash
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
42 views9 pages

Angularjs: Manne Veera Venkat Narayana 17551A0589 Computer Science and Engineering

This document describes the development of an Angular website called Quik Results for job searching. Angular is a JavaScript framework used to build single page applications. The Quik Results site includes modules for users, searching, login, and registration. The registration module allows users to create an account. Angular forms are used to generate the registration form with input fields and validations. Clicking the registration button calls a function to register the user's data. The jobs list displays categories of jobs using an unordered list and the Angular *ngFor directive to repeat the list items for each category.

Uploaded by

bhanu prakash
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/ 9

ANGULARJS

BY:-
MANNE VEERA VENKAT NARAYANA
17551A0589
COMPUTER SCIENCE AND ENGINEERING
PROJECT : QUIK RESULTS

Sub:Angular Website Development


What is Angular ?
 Angular 2 is a JavaScript framework for building
web applications and apps in JavaScript, html and
Typescript, which is a superset of JavaScript.

This framework was used to overcome obstacles


encountered while working with Single Page
applications.
 it was developed by GOOGLE
Introduction
Quik Results is Job Searching website, can be used by thousands of
Students/Employee/Companies.

Web site comprises following modules:


• User Module
• Search Module
• Login Module
• Registration Module

This website is developed to facilitate and manage the various


peoples to search for their Jobs .This web site is developed in
Angular 2
Registration Module
 Registration Module is used to create an account in
QuikResults job portal website

 Here, to create a form, Angular form module is used


 In this, input fields like <input type=“text”>,
<select><option></option></select>

 Code as follows..:

<div class="form-group">
<input type="text" class="form-control"
formControlName="name" placeholder="Name”/>
</div>
Registration Module
With validations…

 Here, I imported Validators from @angular/forms


 Angular has built-in validators such as mandatory field,
minlength, maxlength, and pattern.
Code as follows..:
<form>
[formGroup]=“signUpForm" >
<div class="form-group">
<input type="text" class="form-control" formControlName="name"
placeholder="Name" />
<div *ngIf="submitted && f.name.errors" class="invalid-feedback" >
<div *ngIf="f.name.errors.required"> Name is required </div> </div>
</div> </form>
Registration Module
With OnClick…
 OnClick:
• Here, I created a button In the app.component.html file and
added a function to it using the click event i.e.,
<button type="submit" (click)= SignUp(userData)
class="btn">Registration</button>
The function is defined in the .ts file i.e., app.component.ts
SignUp(userData) {
Console.log(userData)
}
Upon clicking the button, the control will come to the function
SignUp(userData) and the data entered by user is registered in this
job portal.
Jobs List
 Here, I created a list by using an unordered list ( <ul> ) Inserted
an <li> and <a> within <ul>
To repeat this list I used *ngFor Directive in Angular
NgFor is a built-in template directive that makes it easy to iterate
over the list like an array or an object
Code as follows:
<ul>
<li *ngFor="let category of Categories ">
<a >{{ category.category }}</a >
</li>
</ul>
Thank you

You might also like