XANGL10918 InstructorPhilipM-1

Good morning

10 E - 1 E
1:45 E - 4:45 E

Book for both classes Ang 6 (Ang 17)

VS Code > Day 3 folder projects

html, css, basic coding

html  0-10
angular 0-10
ang version? 15,16,17

ng --version

ng cmd name attrs/options/switches
ng g c
generate  g
component c

ng new angular-hello-world

ng serve --open


ng build  > app html and js
ng serve > dev server port 4200    --port 9001
--open  open browser 


Controller stable
 View
  1. UI/UX
  2. api calls
  3. timer


break 11:25 E - 11:40 E
page 12-18  component
philipm@onlc.com Philip Matusiak

ng generate component comp-name

folder/ 4 files

md cart > command

> UPDATES module.ts


ng g c hello-world
1. .html view
2. .ts controller class
3. .spec.ts  specs and testing
4. .css 

views
comps
css


@Decorator
object > class


myFunction ()   varName ()
myFunction()    dec func()

z=x+y
z = x+y
z= x + y
z = x+ y



; end of operation
\n

z = x + y;
print(z)


@Injectable()
class

<b>Philip</b>
<strong>

<app-hello-world></app-hello-world>

ng g c hello-world-inline

variable class> global or local var
variable view > template var  { varName }

ng g c user-item

varName type > property of an object
fName string
lName string
age int

Contact <obj> > fName, lName,age

Class Contacts > Contact <obj> > 3 props


myfunc(x: number,y: number) {

 z = x + y

}

myfunc(5,3)


Data Sets

Arrays []  ['Philip', 21, True, 21] len(4) range 0-3, [1C]
Sets  {} {'Philip', 21, True, 21} len(3) 
Tuple ('Philip', 21, True, 21) can not change 
Dictionary { key:value }  key!dup valuesdup

ng g c user-list

[1,2,3,4]
1. string
2. array 

Lunch 1:05 E - 1:50 E
philipm@onlc.com / 800.288.8221
page 23 *ngFor (page 114)
child comp to call parent
user-item view user-list data set

loop
for
while
switch / case

Excel Formula in a Cell
<DOM> Loop in Attr
<selector> directive

<input name="fname">  input DOM  name attr fname value

<DOM attr="value> 2 way attr
<DOM attr> 1 way attr  <button enabled>
<DOM *directive="value">  2 way binding / directive *ngFor
<DOM *directive>  1 way binding / directive *ngModel
<DOM #tempVariable> 1 way

<DOM static="static">
<a href="google.com">
<a href="{{ urlRef }}">
<a [href]="{{ urlRef }}">

*ngFor >  let x of ys
x local var in template
ys data?

names: string[]  controller class
Hello, my name is {{ name }}  view (html)  <li>

let name of names


input name
local temp name

[input]="lv temp"
[name]="name'

(output)=event()

ng new angular-reddit
CHANGE . ARCH
1. Data Model
 a. DM and D in same comp & same controller class (.ts)
   a1. controller class > Controller Comp, DM & Data
 b. Move Data Model *.ts > own class
    Move Data to App
NEW . FORMS
 a. html forms
NEW . Functional and Structural Methods

vote counter 
 structurally number that inc buy 1 +=1   : any
 var/type
 pass functional
  user clicks on upvote or downvote outout=onclick() : void

upVote() struc  > upVote() func > view

cd angular-reddit
ng serve


1 comp
ng g c article

div structural
span functional

DOM submit > POM? refreshes

view > function > controller

<input name="title" #newtitle>

addArticle(newtitle)

controller  addArticle(title)




addArticle(param1: type , param2: type) {
  globals this = params

}

fucnt 27 steps

return type step 27



void > how to handle return type or memory
any >
boolean  > true or false return 


return types accepted
void: undefined
any: defined

memory
void: discards
any: reference


parentf(): void {
  cFunt(): any

}



break 4:00 E - 4:05 E
REVIEW:
` inject
" string 
' char

`You added the article titled ${title.value}. It's link is ${link.value}`

"Philip's quoted as saying"

` injection

` INSERT into "tblname: flffname = 'value'

Data Model page 48
Data page 53

Day 2 10 EST
finish data on page 48
page 49