Angular 10
https://www.youtube.com/watch?v=9CVZks6U0ZY&list=PL8p2I9GklV45JZerGMvw5JVxPSxCg8VPv
http://osol-tutorials.blogspot.com/2020/12/10-httpswww.html
https://www.youtube.com/watch?v=9CVZks6U0ZY&list=PL8p2I9GklV45JZerGMvw5JVxPSxCg8VPv
install commandline for angular
npm install -g @angular/cli
OR
npm install --global @angular/cli@next
Create new project
===================
ng new angularProjectName
cd angularProjectName
Initiate server associated with Angular
========================================
ng serve
Site will be available at
http://localhost:4200 (after a few compilation steps)
TO CREATE PRODUCTION VERSION
=============================
ng build
will create files in
dist/projectName folder
use with --prod argument for final version
ng build --prod
make sure to change <base href= appropriately
POINTS TO PONDER
=================
https://www.youtube.com/watch?v=q4fBJtnbqk8&list=PL8p2I9GklV45JZerGMvw5JVxPSxCg8VPv&index=3
1.package.json (scripts like ng serve, ng build,ng lint etc . dependencies, dev dependencies)
2.node_modules folder
3.src folder (development files to be saved here)
4.environments folder(development/test/production configuations file are save here, environment.prod.ts, environment.ts)
5.assets folder (fonts, images etc)
6.index.html
7.main.js
8.style.css
9.app folder (app.module.ts, app.component.ts,app-routing.module.ts). influences content of <app-root></app-root> tag via app.component.html
10. modules (eg:user)
11. components: a module is made of multiple components( eg:user login,registration,)
FILES
=====
1. editorconfig ( for editors like vscode/adom/sublime)
2. karma.config (Karma is a testing automation tool(like phpunit?) created by the Angular JS team at Google. The first step for using Karma is to install Karma. Karma is installed via npm (which is a package manager used for easy installation of modules on a local machine).)
3. package.lock.json
4. tslint
5. typescript files
6. e2e folder (end to end configuration)
INTERPOLATION
--------------
https://www.youtube.com/watch?v=2-cekKLSpsk&list=PL8p2I9GklV45JZerGMvw5JVxPSxCg8VPv&index=5
variables are set in src/app/app.component.ts
inside export class AppComponent{varName ='val';}
used in app.component.html as {{varName}} in index.html
ABOUT COMPONENT
================
1. 4 files
default component is 'app', which is saved in src/app folder
app.component.html
app.component.ts
app.component.spec.ts (unit test cases)
app.component.css
there are 2 other files in default installation, which is not part of component
app.routing.module.ts
app.module.ts
2. Edit component
in app.component.ts
@Component({
selector:"app-root", // <app-root></app-root> will show content of this component
templateUrl:'app.component.html',
styleUrls:['app.component.css'],
})
3. make new component
command line
ng g c componnentName
g for generate
c gor component
MODULES:
============
Groups components, directives pipes and services that are related
**pipes: helps to get data from services, modify it etc
PS: Module and Model are different
files of module in default module 'app'
app.routing.module.ts
app.module.ts
@NgModule({
declarations:[
AppComponent // all components which is part of this module
],
imports:[ // list of other modules to be used
BrowserModule,
AppRountingModule
],
providers:[],
bootstrap:[AppComponent] // what component is to be automatically loaded
})
export class AppModule{
}
CREATING NEW MODULES
--------------------
ng g m newModuleName
will create a folder newModuleName inside src/app and a file src/app/newModuleName/newModuleName.module.ts
content of newmodulename.module.ts is
@NgModule({
declarations: [],
imports: [
CommonModule
]
})
export class UserModule { }
CREATE COMPONENT FOR THE Module
ng g c user/login
declartion in user.module.ts changes to
declarations: [LoginComponent],
add the followin inside @NgModule
,
exports:[
LoginComponent
]
to use the components of this module,
add in app.module.ts
import {UserModule} from ./user/user.module
and
UserModule in 'imports' (of app.module.ts)
MATERIALIZE CSS WITH ANGULAR
https://stackoverflow.com/questions/48007665/how-to-use-materialize-css-with-angular
FUNCTION
=========
button should be defined in component html
and function should be defined in ts file
define function in component class as
getName(): void{
console.log("hello Sreekanth");
}
call on button click as
<button (click)="getName()">Get My Name</button>
with parameter
<button (click)="getName('toney',testVarDefinedInComponentClass)">Get My Name</button>
EVENTS
=======
<input #id2getThisTextBox type="text" (keyup)="eventTest(id2getThisTextBox.value)" />
for specific buttons use keyp.enter/keyup.space etc
<input #id2getThisTextBox type="text" (keyup.enter)="eventTest(id2getThisTextBox.value)" (keyup.space)="eventTest('onspace')" />
GETTING INPUT BOX VALUE AND REFLECTING IT IN PAGE
==================================================
step 1
=======
in component html
<input type="text" (keyup)="eventTest($event.target.value)" />
step 2
========
define in component ts
currentVal ="";
and in eventTest function
this.currentVal = arguments[0];
step 3
=======
in component html(again)
{{currentVal}}
in component html
PROPERTY BINDING (to an html element, & difference between binding and interpolation)
=================
https://www.youtube.com/watch?v=_uY-FOPem0E&list=PL8p2I9GklV45JZerGMvw5JVxPSxCg8VPv&index=11
interpolation sample
{{currentVal}}
binding sample
<input type="text" [value]="currentVal" />
CONDIDITIONS
===============
ng-template [ngIf]="currentVal !='red'"
SWITCH CASE
==============
