Posts

steps for angular part -3

                                                   Angular Material Icons  Setting Up Material Library Step1: go to terminal in VSCode npm install --save @angular/material Step2: Add this in index.html after line 8 < link href = "node_modules/@angular/material/core/theming /prebuilt/indigo-pink.css" rel = "stylesheet" > Step 3:  Add the below line in systemjs.config.js '@angular/material' : 'npm:@angular/material/bundles/material.umd.js'  and check if it correctly referenced
Post a Comment
Read more

steps for angular part-2

import { Component } from '@angular/core' ; @ Component ( { selector: 'messages' , // template:"this is a message Component {{messages.length}}" // template:"this is a message Component {{messages[0].text}}" template: `this is a message Component <div *ngFor="let message of messages"> {{message.text}} by :{{message.owner}} </div> ` } ) export class MessagesComponent { messages =[{ text: 'Some text' , owner: 'Karthik' },{ text: 'Other text' , owner: 'Gorijavolu' }]; }
Post a Comment
Read more

Steps for Angular App

Step1 : create a directory AngularApp Step 2: cd AngularApp step 3: git clone https://github.com/angular/quickstart.git frontend    THIS will clone angular to Frontend folder step 4: open Frontend folder through VSCode setp 5: view --Integrated Terminal -- npm install npm start You will see hello angular step 6: File Preferences--settings add { "files.autoSave": "afterDelay", "files.exclude": { "**/*.js.map": true, "**/*js":{"when":"$(basename).ts"} } } step 7: Add a Component Add the dependecies of the component in appmodule (imports and also in declarations) also import the message component in appcomponent and use the selector of the messagecomponent in appcomponent like below AppModule import { MessagesComponent } from './messages-component' ; import { NgModule } from '@angular/core' ; import { BrowserModule } from '@angular/platform-br...
Post a Comment
Read more

Angular and Aspnet Core

1)ClientApp--Client side code  --Angular app App folder has a)app.module.TS b)components 2)Controllers and Views--ASP.netcore 3)WWWRoot--public assets of client  It has dist--Distributable folder--(img,fonts,icons) dist has  a)main-client.js ---compilation of angular app  into js b)vendor.js---compilation of all third party libraries c)vendor.css--compilation of all third party css 4)Appsettings.json---applications settings --prev versions use web.config 5).csproj----VS-17 Recognises 6)Web.config---only <system.webserver> --configuration of IIS 7)couple of Webpack configuration files--bundler for client side code--compile and minify java files and style sheet files--- Webpack.vendor.js--configuration for compiling third party libraries- in entry vendor --all the third party libraries are present Infuture to add third party--add in entry vendor in webpack.vendor 8)Program.cs--Main is the entry point--configure webserver 1)kestral--cr...
Post a Comment
Read more

Adding Style separately in a File

/*site.css*/ body { font-family: sans-serif; font-size: 16px; font-weight: bold; } label { font-weight: normal; display:block; } input[type=text],input[type=password],textarea { width: 150px; }
Post a Comment
Read more

Adding Style in the Head

<html> <head>     <meta charset="utf-8" />     <title>The World</title> <style> body{ font-family:sans-serif; font-size:16px; } </style> </head>
Post a Comment
Read more

Adding Style directly to the body

<body style="font-family:sans-serif; font-size:16px;"> <form> <div> <label>Date</label> <input /> </div> <div> <label>Location</label> <input /> </div> <div> <input type="submit" value="add" /> </div> </form> </body>
Post a Comment
Read more