Using angular js Create a SPA that show Syllabus content of all subjects of M.Sc (CS) Sem-II (use ng-view)

 1.ng new msc-syllabus

cd msc-syllabus

ng serve

2.ng generate component os

ng generate component java

ng generate component ds

ng generate component cn

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { OsComponent } from './os/os.component';
import { JavaComponent } from './java/java.component';
import { DsComponent } from './ds/ds.component';
import { CnComponent } from './cn/cn.component';

const routes: Routes = [
  { path: 'os', component: OsComponent },
  { path: 'java', component: JavaComponent },
  { path: 'ds', component: DsComponent },
  { path: 'cn', component: CnComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }


app.component.html
<h2>M.Sc (CS) Sem-II Syllabus</h2>

<nav>
  <a routerLink="/os">Operating System</a> |
  <a routerLink="/java">Java Programming</a> |
  <a routerLink="/ds">Data Science</a> |
  <a routerLink="/cn">Computer Network</a>
</nav>

<hr>

<router-outlet></router-outlet>

os.component.html

<h3>Operating System</h3>
<p>Process Management, Memory Management, Scheduling, Deadlocks</p>

java.component.html

<h3>Java Programming</h3>
<p>OOP Concepts, Exception Handling, JDBC, Collections</p>

ds.component.html

<h3>Data Science</h3>
<p>Python Basics, NumPy, Pandas, Data Visualization</p>

cn.component.html

<h3>Computer Network</h3>
<p>OSI Model, TCP/IP, Routing Algorithms, Network Security</p>

Comments

Post a Comment

Popular posts from this blog

Slip 11: Write node js application that transfer a file as an attachment on web and enables browser to prompt the user to download file using express js.

  const express = require ( 'express' ); const path = require ( 'path' ); const app = express (); const PORT = 3000 ; // Route to download file app . get ( '/download' , ( req , res ) => {     res . download ( 'a.txt' , ( err ) => {         if ( err ) {             console . log ( "Error downloading file:" , err );         } else {             console . log ( "File sent successfully" );         }     }); }); // Home app . get ( '/' , ( req , res ) => {     res . send ( '<h2>Click below to download file</h2><a href="/download">Download File</a>' ); }); app . listen ( PORT , () => {     console . log ( `Server running at http://localhost: ${ PORT } ` ); });
Read more

Slip 7 Create a node js file named main.js for event-driven application. There should be a main loop that listens for events, and then triggers a callback function when one of those events is detected.

 // import event module var events = require('events'); // create an eventEmitter object var eventEmitter = new events.EventEmitter(); // create an event handler var connectHandler = function (s) {    console.log('Its', s); }; // Bind the data_received event eventEmitter.on('data_received', function (name) {    console.log(name, "Understood event -Driven"); }); // trigger data_received event eventEmitter.emit('data_received', "FYMSC(CS)"); // Bind the connection event eventEmitter.on('connection', connectHandler); // trigger connection event eventEmitter.emit('connection', "SIMPLE SOLUTION"); console.log("program Ended");
Read more

Slip 1(a) Write an Angular 13 application addition of two numbers using ng-init, ng-model & ng-bind. And also demonstrate ng-show, ng-disabled, ng-click directives on button component.

Image
 a) ng new slip1 b) cd slip1 c) open app.component.ts   import { Component } from '@angular/core' ; @ Component ({   selector : 'app-root' ,   templateUrl : './app.component.html' ,   styleUrls : [ './app.component.css' ] }) export class AppComponent {   num1 : number = 0 ;   num2 : number = 0 ;   result : number = 0 ;   disableButton : boolean = false ;   showResult : boolean = false ;   add () : void {     this . result = this . num1 + this . num2 ;     this . disableButton = true ;   // Disable the button after calculation     this . showResult = true ;       // Show the computed result   } }                                                                ...
Read more