Posts

10.a Routing basics Router links

Image
AIM:  Create multiple components and add routing to provide navigation between them. Install angular client 13.0 globally, if it is not present in your system COMMAND: npm install -g @angular/cli@13.0 create a new angular project abc ng new abc go into abc folder and create components   ng generate component home ng generate component about ng generate component contact Open app-routing.module.ts and add routes: --------------------------- import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; import { ContactComponent } from './contact/contact.component'; const routes: Routes = [   { path: '', component: HomeComponent },        // default route   { path: 'about', component: AboutComponent },   { path: 'contact', component: ContactComponent } ]; @NgModule({   imports:...

MongoDB 11.B, 12.B : insert,find,update, and delete commands ; count, limit, sort

use AIDS_B  command creates AIDS_B database. In AIDS_B database to create collection names "register"  db.register.insertOne({Name:'abc',RegdNo:10001,Year:4,Semester:1,branch:'AIDS'})   it is implicit way MongoDB Experiments: 11.B, 12.B test> use AIDS_B switched to db AIDS_B AIDS_B> db.register.insertOne({Name:'abc',RegdNo:10001,Year:4,Semester:1,branch:'AIDS'}) {   acknowledged: true,   insertedId: ObjectId('690588f3b25c5cb31d63b112') } AIDS_B> db.register.insertOne({Name:'def',RegdNo:10002,Year:4,Semester:1,branch:'AIDS'}) {   acknowledged: true,   insertedId: ObjectId('6905891eb25c5cb31d63b113') } AIDS_B> db.register.insertOne({Name:'ghi',RegdNo:10003,Year:4,Semester:1,branch:'AIDS'}) {   acknowledged: true,   insertedId: ObjectId('69058941b25c5cb31d63b114') } AIDS_B> db.register.insertOne({Name:'jkl',RegdNo:10004,Year:4,Semester:1,branch:'IT'}) {   acknow...
DEMONSTRATION  Module Name: Introduction to the CRUD Operations Write MongoDB queries to perform CRUD operations on document using insert(), find(), update(), remove() Document Fields: Name Regdno Year Semester branch Document Fields: Name EmpNo DOJ department Module Name: Create and Delete Databases and Collections Write MongoDB queries to Create and drop databases and collections. Introduction to MongoDB Queries Write MongoDB queries to work with records using find(), limit(), sort(), createIndex(), aggregate().

Experiments dates SOC: Mean stack technologies module - II 2025-26 I SEM

8 Develop a single page application by using synchronous or asynchronous Angular routing.

 Develop a single page application by using synchronous or asynchronous Angular routing. Step 1: Create a New Angular Project ng new spa-routing-demo cd spa-routing-demo ng serve -o Step 2: Generate Components ng g c home ng g c about ng g c contact Step 3: app-routing.module.ts import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; const routes: Routes = [   { path: '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },   { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) },   { path: 'contact', loadChildren: () => import('./contact/contact.module').then(m => m.ContactModule) }, ]; @NgModule({   imports: [RouterModule.forRoot(routes)],   exports: [RouterModule] }) export class AppRoutingModule {} Step 4: app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from...

Assignment -1 KEY

 Assignments 1,2, and 3   https://drive.google.com/file/d/1YdLCEISk5ax3uTELfbbju0j4VRRdUPhJ/view?usp=drive_link  Assignments 4,5, and 6 https://drive.google.com/file/d/1T6syb_DPnx5vXAfJlp9aD6dikJGYx7eR/view?usp=drive_link  

Assignments - 1

      1) A) Angular Application Setup          Observe   the   link   http://localhost:4200/welcome   on   which   the   mCart             application   is   running.       B)     Elements   of   Template Add   an   event   to   the   hello   component   template   and   when   it   is   clicked,   it   should   change the   courseName. 2)  A)    Components   and   Modules  Create   a   new   component   called   hello   and   render   Hello   Angular   on   the   Page B)     ngFor  Create a courses array and rendering it in the template using ngFor directive in               a list format 3)  ...