Font size
S
M
L
XL
WorksheetsPemograman Web Lanjut
Total questions: 25
Worksheet time: 19mins
Name
Class
Date
1.
These questions have more than one correct answer. Select all that apply. In the current app.routes.ts, which routes use lazy loading with loadComponent?
a)
/admin/login
b)
/admin/dashboard
c)
/admin/students
d)
/programs
e)
All the answers are correct
2.
Compare the routing approaches: What key difference exists between app-routing.module.ts and app.routes.ts?
a)
app.routes.ts uses lazy loading with loadComponent
b)
app-routing.module.ts supports child routes with canActivate
c)
app.routes.ts has no wildcard route
d)
app-routing.module.ts uses RouterModule.forChild
e)
All the answers are correct
3.
Evaluate the use of standalone components in AppComponent: Is this a good architectural decision?
a)
No, standalone components reduce reusability
b)
Yes, it eliminates the need for NgModules and simplifies bootstrap
c)
No, it prevents server-side rendering
d)
Yes, but only for small applications
e)
All the answers are correct
4.
Create an enhancement to app.config.ts: How could you add error handling interceptor?
a)
Replace authInterceptor with error interceptor
b)
Add another interceptor to the withInterceptors array
c)
Use HTTP_INTERCEPTORS token instead
d)
Add it directly in AppComponent
e)
All the answers are incorrect
5.
Scenario: The app is deployed with server-side rendering (SSR). Which file ensures SSR providers are merged?
a)
app.module.ts
b)
app.config.ts
c)
app.config.server.ts
d)
app.routes.ts
e)
All the answers are incorrect
6.
These questions have more than one correct answer. Select all that apply. Which sections or elements are present in the FooterComponent's template?
a)
Social media icons
b)
Academic links
c)
Campus Life links
d)
Mobile menu toggle
e)
All the answers are correct
7.
Analyze the HeaderComponent's navigation: How does it handle active states and mobile responsiveness?
a)
Uses routerLinkActive for styling, with a separate mobile menu toggled by a button
b)
Applies active class manually via code
c)
Has no mobile support
d)
Uses CSS only for responsiveness
e)
All the answers are incorrect
8.
Evaluate the use of standalone components in these files: Is it an effective choice for this university website?
a)
No, it increases bundle size
b)
Yes, it simplifies imports and enables lazy loading, suitable for a modular site
c)
No, standalone prevents icon usage
d)
Yes, but only for small components
e)
All the answers are incorrect
9.
To enhance HomeComponent for accessibility, what new feature could you synthesize in the hero section?
a)
Add alt text to all icons and aria-labels to buttons
b)
Remove all icons
c)
Hardcode colors instead of gradients
d)
Duplicate the section
e)
All the answers are incorrect
10.
Scenario: The website is loaded on a mobile device. What happens when the user clicks the menu button in HeaderComponent?
a)
Nothing; no mobile support
b)
The mobile menu opens, showing navigation links below the main bar
c)
It redirects to home
d)
Social icons appear
e)
All the answers are incorrect
11.
These questions have more than one correct answer. Select all that apply. Which features are common to both AdminGuard and AuthGuard?
a)
They inject PLATFORM_ID and use isPlatformBrowser
b)
They redirect to a login page with returnUrl query parameter
c)
They implement the CanActivate interface
d)
They check authentication via a service method
e)
All the answers are correct
12.
Compare the redirection logic in AdminGuard vs AuthGuard: What key difference exists?
a)
AdminGuard redirects to '/login', AuthGuard to '/admin/login'
b)
AuthGuard redirects to '/login', AdminGuard to '/admin/login'
c)
Both redirect to the same login page
d)
Only AdminGuard preserves returnUrl
e)
All the answers are incorrect
13.
Evaluate the security approach of returning false during SSR: Is this a good practice?
a)
No, it blocks all server-rendered protected routes
b)
Yes, it safely prevents access errors and ensures client-side auth enforcement
c)
No, authentication should happen on the server
d)
Yes, but only for public sites
e)
All the answers are incorrect
14.
To support multiple roles (e.g., teacher), synthesize a new generic guard: What approach would be best?
a)
Duplicate AdminGuard with different service
b)
Create a RoleGuard that accepts allowed roles as route data
c)
Remove all guards and handle in components
d)
Use only AuthGuard for everything
e)
All the answers are incorrect
15.
Scenario: An authenticated student has a valid JWT but navigates to /admin/students in the browser. What occurs?
a)
Access granted because a token exists
b)
AdminGuard checks adminService.isAdminAuthenticated(), finds false, redirects to /admin/login with returnUrl
c)
AuthGuard blocks it first
d)
The page loads but shows blank
e)
All the answers are incorrect
16.
These questions have more than one correct answer. Select all that apply. Which actions does the authInterceptor perform when a valid token exists?
a)
Clones the request
b)
Adds an Authorization header with Bearer token
c)
Logs a warning message
d)
Adds the token to query parameters
e)
All the answers are correct
17.
In the student.model.ts file, why are currentCourses, upcomingAssignments, and announcements marked as optional (?) ?
a)
To allow null values for better performance
b)
To support partial data loading and avoid runtime errors when properties are missing
c)
Because they are deprecated fields
d)
To make the interface compatible with Java backend
e)
All the answers are incorrect
18.
Evaluate the use of environment.tokenKey in authInterceptor: Is this a good practice?
a)
No, hardcoded strings are more reliable
b)
Yes, it centralizes configuration and supports different keys in dev/prod
c)
No, environment files should not be used in interceptors
d)
Yes, but only for admin tokens
e)
All the answers are incorrect
19.
Synthesize an enhancement to the models: How could you make Program and News more extensible for future features?
a)
Convert them to classes with methods
b)
Add a generic metadata: Record<string, any> field
c)
Remove all fields
d)
Merge all models into one
e)
All the answers are incorrect
20.
Scenario: A student with an expired token makes an API request to fetch current courses. What happens in the authInterceptor?
a)
The request proceeds without Authorization header
b)
The request includes the expired token, server returns 401, interceptor removes student-related localStorage items and redirects to /portal
c)
The interceptor prevents the request entirely
d)
The user is redirected immediately without sending the request
e)
All the answers are incorrect
21.
These questions have more than one correct answer. Select all that apply. Which services use environment.apiUrl to construct their base API endpoints?
a)
AnnouncementService
b)
AssignmentService
c)
CourseService
d)
NotificationService
e)
All the answers are correct
22.
In ProgramService, how does searchPrograms() handle query parameters, and what is its implication for API calls?
a)
It always sends all params, even if empty
b)
It conditionally adds params like query, degree, field only if provided, allowing flexible searches
c)
It uses POST instead of GET
d)
It ignores field if degree is 'all'
e)
All the answers are incorrect
23.
Evaluate the use of BehaviorSubject in NotificationService: Is it an effective choice for notifications?
a)
No, it blocks the UI during updates
b)
Yes, it allows reactive subscription and auto-hiding via setTimeout
c)
No, localStorage would be more persistent
d)
Yes, but only for errors
e)
All the answers are incorrect
24.
To enhance AuthService for multi-factor authentication (MFA), what new method could you synthesize?
a)
Remove login() entirely
b)
Add verifyMfaCode(code: string) that posts to /auth/mfa and updates token on success
c)
Duplicate refreshToken()
d)
Hardcode MFA in environment
e)
All the answers are incorrect
25.
Scenario: An admin calls getAllCourses() in CourseService from the UI. What is the expected outcome based on the code?
a)
It fails due to no auth check in service
b)
It succeeds if backend authorizes (via JWT), as the method is a simple GET to apiUrl
c)
It redirects to login
d)
Hardcode MFA in environment
e)
It returns only student courses
Reset
